CKEDITOR小部件将拖放到所需的元素中
CKEDITOR Widgets drag drop into needed element
我对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;
}
});
}
});
不幸的是,在这种情况下没有简单的解决方案。唯一可以做到这一点的方法是订阅编辑器的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)
相关文章:
- Android浏览器设置元素大小太小
- 获取浮动元素同级的最小innerWidth
- CKEDITOR小部件将拖放到所需的元素中
- 是否存在jQuery元素选择库的最小化版本
- CKEditor:以小部件作为第一个元素,选择所有在Chrome中不工作的
- 内联(非内联块)行为元素的最小宽度
- 如何在工具提示窗口小部件中获取悬停元素的id
- 使元素显示在最小屏幕大小上
- 如何使用此 js svg 解析器将 svg 文件或元素中的路径小数位更改为 n 位小数
- 查找在其上初始化了 jquery 小部件的元素
- 当有最小宽度时,如何使元素中心(水平)具有固定位置
- 获取小元素索引直到数组长度
- 在实例化 JQuery 小部件时选择当前元素
- 在页面/元素小部件上查找JavaScript
- 画布平移所有元素,包括小地图
- 将Google Analytics(分析)点击事件跟踪器添加到Wordpress社交登录小部件元素
- 检测元素高度变化,如果太小则隐藏
- Pickadate.js:如何通过另一个元素渲染小部件
- jquery-ui将可拖动元素约束在较小的容器中
- 禁用元素上的按钮小部件错误