CKEDITOR小部件將拖放到所需元素中

Question

我對ckeditor小部件有問題。 我有內聯的不可編輯的文本小部件，可以在編輯器中拖放位置（使用其默認功能）。 因此，我需要檢查要放置窗口小部件的位置，以及該位置是否不可刪除（按照我在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
    });
});

您可以在CKEditor中找到它的工作方式（請參閱功能setupDragAndDrop的代碼）