更新 3
以下解决方案在Chrome Firefox and Safari 中相当稳定：
var $editor = $("#input").cleditor()[0];
var focused = false;
var isFirefox = typeof InstallTrigger !== 'undefined';
var text = '';
$('.draggable').draggable({
appendTo:'body',
helper:'clone',
iframeFix: true,
revert:'invalid',
cursorAt:{top:0,left:0}
});
$("#w-edit").droppable({
drop: function (event, ui) {
text = ui.draggable.text();
if(!focused && !isFirefox)
$editor.focus();
else
$editor.focused();
}
});
$editor.focused(function(){
if(text != ''){
$editor.execCommand('inserthtml',text, false);
text = '';
}
focused = true;
});
$editor.blurred(function(){
focused = false;
});
$editor.change(function(){
if(!$('#w-edit').hasClass('ui-droppable')){
focused = false;
$("#w-edit").droppable({
drop: function (event, ui) {
text = ui.draggable.text();
if(!focused && !isFirefox)
$editor.focus();
else
$editor.focused();
}
});
}
});
http://jsfiddle.net/C3cFk/
我能找到的唯一问题是，如果您碰巧调整了窗口大小，然后将一个项目拖到它上面，这可能会有点不可预测，新拖动的项目会出现在文本区域中的哪个位置。坦率地说，我不知道如何解决这个问题，我有点筋疲力尽地试图让它发挥作用。 （主要是因为IE）
IE 问题
这在 IE 中效果不佳（在 IE 10 上测试），除非您每次单击编辑器，然后有一半的时间单词相互覆盖。 execCommand('inserthtml' 在 IE 中不能很好地工作。我修改了代码以使用 IE 支持的pasteHTMl，但仍然存在一些问题，例如，如果您单击编辑器然后拖动项目，有时它会替换所有文本。或者，如果您重新调整页面大小，然后在其上拖动更多项目，则会将项目附加到页面顶部而不是编辑器，除非您先在编辑器中单击。我不相信这个解决方案适用于IE8，还有更多的限制需要处理，而且我没有简单的方法在 IE8 上进行测试或开发，所以我将不理会它。
这是我能想到的最好的IE10：
$(document).ready(function(){
var $editor = $("#input").cleditor()[0];
var focused = false;
var text ='';
var temp;
$('.draggable').draggable({
appendTo:'body',
helper:'clone',
iframeFix: true,
revert:'invalid',
cursorAt:{top:0,left:0}
});
$("#w-edit").droppable({
drop: function (event, ui) {
temp = $(this).contents().find("html body")[0];
text = ui.draggable.text();
if(!focused)
$editor.focus();
else
$editor.focused();
}
});
$editor.focused(function(){
if(text != ''){
var doc = document.getElementById("w-edit").contentWindow.document;
if (doc.selection && doc.selection.createRange) {
var range = doc.selection.createRange();
if (range.pasteHTML) {
range.pasteHTML(text);
}
}
$editor.updateTextArea();
text = '';
}
focused = true;
});
$editor.blurred(function(){
focused = false;
});
$editor.change(function(){
if(!$('#w-edit').hasClass('ui-droppable')){
$("#w-edit").droppable({
drop: function (event, ui) {
temp = $(this).contents().find("html body")[0];
text = ui.draggable.text();
if(!focused)
$editor.focus();
else
$editor.focused();
}
});
}
});
});
所有这些类型的事情似乎很难在所有浏览器中正确处理。对于每个浏览器，我必须以不同的方式处理某些事情才能使其正常工作。
注意：
我在IE8 上测试了我之前回答中的代码（您说的代码在 IE8 中不起作用，并且文本不在光标所在的位置），它对我有用（确保您的浏览器模式和doc模式为IE8):
$(document).ready(function(){
var $editor = $("#input").cleditor()[0];
$('.draggable').draggable({
appendTo:'body',
helper:'clone',
iframeFix: true,
revert:'invalid',
cursorAt:{top:0,left:0}
});
$("#w-edit").droppable({
drop: function (event, ui) {
console.log('drop');
$(this).contents().find("html body").append(ui.draggable.text()+' ');
$editor.updateTextArea();
}
});
$editor.change(function(){
if(!$('#w-edit').hasClass('ui-droppable')){
$("#w-edit").droppable({
drop: function (event, ui) {
$(this).contents().find("html body").append(ui.draggable.text()+' ');
$editor.updateTextArea();
}
});
}
});
});