tinyMCE和insertAtCaret()，替代tinyMCE？

Question

我有一个带有insertAtCaret()函数的文本区域，它允许用户从列表中拖放到文本区域，这一切都很棒。我的老板让我把tinyMCE放在上面，这样用户就不会看到html格式。当我这么做的时候，我的拖放功能坏了。

我知道tinyMCE有一个允许拖放的内置函数，但它不是我们想要的系统形式。因此，如果有什么需要的话，我也需要禁用该功能(有任何线索吗？)

我的问题是，除了tinyMCE，还有什么替代insertAtCaret的方法吗？我一直在谷歌搜索，但没有发现任何真正有用的东西。只有少数来自其他人的帖子有同样的问题。

提前感谢-V

Answer 1

我也遇到过这个问题。问题是，这些编辑器中的大多数使用iframe来显示html并隐藏输入字段。因此，您需要找到并绑定可拖放到iframe并触发事件来检测和处理该事件。

我对CKEditor做了类似的事情，但是我没有拖放，而是做了一个onclick事件，在插入符号中放置了一些html。样本如下：

<ul class="dis-tags">
    <li title="Id of the soo. This is useful for links and reference.">[SooID]</li>
    <li title="The user first name.">[FirstName]</li>
    <li title="The user last name.">[LastName]</li>
</ul>

// used to set the drag/drop of the tags
$('.dis-tags li').click(function () {
   CKEDITOR.instances.Message.insertHtml($(this).text());
   return false
});

Answer 2

此外，我们还回答了：

insertAtCaret不会使用任何实时编辑器，因为它们都使用一个内容可编辑的iframe。底层的teaxtarea (或其他html文件)在初始化时被隐藏起来。

uadrive是对的，您必须向该iframe添加处理程序，以便在需要时执行任何操作。如果您使用tinymce配置参数"paste_block_drop"，您将无法执行任何拖放操作，因为如果将此参数设置为true，则所有拖放事件都将被阻塞。

要在tinymce中插入插入符号位置的代码，需要使用以下命令：

tinyMCE.execCommand('mceInsertContent', false, 'my new content to be added');

下面是一些要使用的代码(这是我在编辑器中执行的操作，我重构插入的内容，然后根据我的需要添加/过滤它，然后将它插入编辑器中)。

setup : function(ed)
{
  ed.onInit.add(function(ed){
    $(ed.getDoc()).bind('drop', function(event){

        ed.content_pre = ed.getContent();
        ed.drag_content_html = event.originalEvent.dataTransfer.getData('text/html');
        ed.drag_content_plain1 = event.originalEvent.dataTransfer.getData('text/plain');
        //console.log('x', ed.content_pre, ed);
        tinymce.activeEditor = ed;
        setTimeout(function(){
            var ed = tinymce.activeEditor;
            var content_post = ed.getContent();
            var diff_front = 0;
            for (var i=0; i < ed.content_pre.length; i++) {
                if (ed.content_pre.charCodeAt(i) !== content_post.charCodeAt(i)) {
                    diff_front = i;
                    break;
                }
            }               

            if (ed.content_pre.substr(diff_front-2, 2) == '<p') diff_front -= 2;
            if (ed.content_pre.substr(diff_front-1, 1) == '<') diff_front -= 1;

            ed.setContent( ed.content_pre.substr(0, diff_front) + ed.drag_content_plain1 + ed.content_pre.substr(diff_front) );

        },0);
    });
  });
},