针对上述问题,我做了一个解决方法。在 ckeditor instnaceReady 中,我已将 js 添加到 ckeditor iframe 的 head 部分。
CKEDITOR.on('instanceReady', function(ev) {
var oEditor = CKEDITOR.instances.editor;
var h = oEditor.document.getHead();
var element1 = oEditor.document.createElement( 'script' );
element1.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js');
element1.setAttribute('type','text/javascript');
h.append(element1);
var element2 = oEditor.document.createElement( 'script' );
element2.setAttribute('src','//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js');
element2.setAttribute('type','text/javascript');
var element3 = oEditor.document.createElement( 'script' );
element3.setAttribute('src','drag.js');
element3.setAttribute('type','text/javascript');
h.append(element2);
h.append(element3);
function drag() {
try {
$('iframe').get(0).contentWindow.EnableDrag();
}
catch(err) {
setTimeout(drag,10);
}
};
setTimeout(drag,10);
});
在 drag.js 中,我添加了 EnableDrag() 函数。
EnableDrag = function() {
$('#Layer1').draggable();
}
此代码适用于 ff、chrome 和 IE。
代码还是有一些问题,每次我们修改ckeditor的内容或者使用源码按钮,head里包含的binding和js都丢失了。此外,EnableDrag 函数在创建和附加对象后也不能立即使用。所以我使用 setTimeout 来添加延迟。在firefox中,拖动不是很流畅。
如果有人知道执行此操作的正确方法,请提供帮助。