所见即所得编辑器将 HTML 内容放在当前位置答案

【问题标题】：WYSIWYG Editor place HTML content in current position所见即所得编辑器将 HTML 内容放在当前位置
【发布时间】：2013-05-28 16:40:06
【问题描述】：

我正在使用来自mindmup 的 WYSIWYG 富文本编辑器

我在工具栏中添加了一个下拉框，我使用此下拉框从服务器获取内容，并将光标指向的编辑器中的现有内容追加/前置。

但它不会将数据添加到编辑器中。

我提到了Insert html at caret in a contenteditable div 和Insert text at cursor in a content editable div

但它们不适合我。

这是我在更改下拉菜单时用来获取数据的函数

function loadJournalTemplate(journalTemplateId) {

$.post('/Journal/GetTemplate', { journalId: journalTemplateId }, 
  function (data, textStatus) {
    if (textStatus == "success") {

        $('#editor1').html(data.content); //Here i need to append/prepend
    }
 }, "json");

}

如何在当前光标位置添加 HTML？

注意：这个Insert text at cursor in a content editable div在下拉菜单中添加内容，当我在点击编辑器之前直接选择一个下拉菜单时

【问题讨论】：

标签： javascript html contenteditable rich-text-editor

【解决方案1】：

听起来工具栏按钮正在从可编辑元素中窃取焦点，从而破坏了选择。您要么需要阻止按钮/下拉菜单执行此操作，要么需要save and restore the cursor position，在这种情况下，您需要在工具栏按钮破坏选择之前检测它们的点击（可能使用mousedown）。

示例：contenteditable selected text save and restore

【讨论】：