编辑 SlickGrid 列时如何使用 tinyMCE？

Question

我想将 tinyMCE 与自定义 Slick Editor 在 table 之外或在对话框内使用。只是为了启用富文本编辑。

我可以将此外部插件用于自定义 Slick Editor 吗？我还没有看到任何这样的用法示例。
同时使用这两个插件是否存在任何潜在问题（例如注入冲突 HTML 或阻止某些触发事件）？

Answer 1

使用具有兼容版本的 jquery 别名 "jQuery_new"
注册新编辑器"TinyMCEEditor" & 添加到slick.editors.js

这样使用{id:"column2",name:"Year",field:"year",editor:Slick.Editors.TinyMCE}

jQuery_new.extend(true, window, {
  "Slick": {
    "Editors": {
        (..)
        "TinyMCE": TinyMCEEditor
    }
}});

function TinyMCEEditor(args) {
var $input, $wrapper;
var defaultValue;
var scope = this;

this.guid = function () {
    function s4() {
        return Math.floor((1 + Math.random()) * 0x10000)
            .toString(16)
            .substring(1);
    }
    return s4();
},

this.init = function () {
    var $container = jQuery_new(".container");
    var textAreaIdString = 'rich-editor-'+guid();

    $wrapper = jQuery_new("<DIV ID='rds-wrapper'/>").appendTo($container);
    $input = jQuery_new("<TEXTAREA id=" + textAreaIdString + "/>");
    $input.appendTo($wrapper);
    jQuery_new("#" +textAreaIdString).val( args.item[args.column.field] );

    var _this = this;
    tinymce.init({
        selector: "#"+textAreaIdString,
        forced_root_block : "",
        plugins : "save image imagetools",
        toolbar: 'undo redo | styleselect | bold italic | link image | save',
        save_onsavecallback: function() {
            jQuery_new("#" +textAreaIdString).val( this.getContent() );
            _this.save();
        }
    });

    $input.bind("keydown", this.handleKeyDown);
    scope.position(args.position);
    $input.focus().select();
};

this.handleKeyDown = function (e) {
    if (e.which == jQuery_new.ui.keyCode.ENTER && e.ctrlKey) {
        scope.save();
    } else if (e.which == jQuery_new.ui.keyCode.ESCAPE) {
        e.preventDefault();
        scope.cancel();
    } else if (e.which == jQuery_new.ui.keyCode.TAB && e.shiftKey) {
        e.preventDefault();
        args.grid.navigatePrev();
    } else if (e.which == jQuery_new.ui.keyCode.TAB) {
        e.preventDefault();
        args.grid.navigateNext();
    }
};

this.save = function () {
    args.commitChanges();
};

this.cancel = function () {
    $input.val(defaultValue);
    args.cancelChanges();
};

this.hide = function () {
    $wrapper.hide();
};

this.show = function () {
    $wrapper.show();
};

this.position = function (position) {
};

this.destroy = function () {
    $wrapper.remove();
};

this.focus = function () {
    $input.focus();
};

this.loadValue = function (item) {

    $input.val(defaultValue = item[args.column.field]);
    $input.select();
};

this.serializeValue = function () {
    return $input.val();
};

this.applyValue = function (item, state) {
    item[args.column.field] = state;
};

this.isValueChanged = function () {
    return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
};

this.validate = function () {
    return {
        valid: true,
        msg: null
    };
};

this.init();
}

编辑 SlickGrid 列时如何使用 tinyMCE？

How could I use tinyMCE when editing a SlickGrid column?

tinymce

slickgrid