Question

我的ckeditor小部件有问题。我有内联不可编辑的文本小部件，我可以在编辑器中拖放enywhere（使用其默认功能）。所以我需要检查我放弃我的小部件的位置，如果这个地方不可用（根据我的规则，我们就是TABLE），取消事件传播，小部件应该留在以前的地方。

editor.widgets.add('customWidgetAdd', {
   inline: true,
   template: '<span class="simplebox">' +
            '<span class="simplebox-title" ></span>' +
        '</span>',
   init: function(){
      var that = this;

            that.widgetData = ko.observable(self.activeWidgetData);

            var subscription = that.widgetData.subscribe(function (value) {                                        
                $(that.element.$).find('.simplebox-title').text(value.name);
                if (that.isSelected) {
                    self.activeWidgetData = value;
                }
            });
            var destroyListener = function(ev){
                subscription.dispose();
            };         
            that.once('destroy', destroyListener);

            that.on('doubleclick', function (evt) {
                editor.execCommand(editAction.command);
            });                

            that.on('select', function (evt){
                that.isSelected = true;
                self.activeWidgetData = that.widgetData();
            });

            that.on('deselect', function (evt){

                try {
                  var endContainer = editor.getSelection().getRanges()[0].endContainer.getName();
                } catch (e) {

                }

                that.isSelected = false;
                if (endContainer == 'td' || endContainer == 'th') {

                        //SO here comes the problem. My rule is executed and
//I want CKEDITOR do nothing from here... but stil widget is getting cutted     from DOM and inserted to place where I have dropped it...
                        //that.removeListener('destroy', destroyListener);
                        //that.removeAllListeners();
                        evt.cancel();
                        evt.stop();

                        return false;                        
                }
            });
   }
});

Answer 1

不幸的是，在这种情况下没有简单的解决方案。您可以这样做的唯一方法是订阅编辑器的drop事件，并在需要时取消它，例如：

editor.on('contentDom', function() {
    var editable = editor.editable(),
        // #11123 Firefox needs to listen on document, because otherwise event won't be fired.
        // #11086 IE8 cannot listen on document.
        dropTarget = (CKEDITOR.env.ie && CKEDITOR.env.version < 9) || editable.isInline() ? editable : editor.document;

    editable.attachListener(dropTarget, 'drop', function(evt) {
        //do all checks here
    });
});

你可以找到它的工作原理in CKEditor（参见函数代码 setupDragAndDrop ）

CKEDITOR Widgets拖入需要的元素

1 个答案: