CKEDITOR 小部件拖放到需要的元素中

Question

我对 ckeditor 小部件有疑问。我有内联不可编辑的文本小部件，我可以在编辑器中的任何地方拖放（使用其默认功能）。所以我需要检查我在哪里放置了我的小部件，如果这个地方是不可放置的（根据我的规则它是我们的表），请取消事件传播并且小部件应该保留在以前的位置。

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）