WYSIWYG编辑器将​​HTML内容放在当前位置

时间:2013-06-02 09:08:23

标签: javascript html html5 contenteditable rich-text-editor

我正在使用mindmup

中的WYSIWYG富文本编辑器

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

enter image description here

但它没有将数据添加到编辑器中。

我提到了Insert html at caret in a contenteditable divInsert 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会在下拉列表中添加内容

1 个答案:

答案 0 :(得分:1)

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

示例:contenteditable selected text save and restore