所见即所得编辑器将HTML内容放置在当前位置 [英] WYSIWYG Editor place HTML content in current position

问题描述

我使用来自和插入文本光标在内容可编辑div

但他们不适合我。

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

 函数loadJournalTemplate（journalTemplateId）{
 
 $ .post（'/ Journal / GetTemplate'，{journalId：journalTemplateId}，
 function（data，textStatus）{
 if （textStatus ==success）{
 
 $（'＃editor1'）。html（data.content）; //这里我需要追加/前置
} 
 }，json）; 
 
 
 $ / code> 

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

注意：在光标处插入文本在内容可编辑div 在下拉菜单中添加内容本身，当我在单击编辑器之前直接选择一个下拉列表

解决方案

听起来像工具栏按钮正在从可编辑元素中窃取焦点，从而破坏了选择。您需要阻止按钮/下拉列表执行此操作，或者保存并恢复光标位置，在这种情况下，您在销毁选择之前需要检测工具栏按钮上的点击（可能使用 mousedown ）。

示例： contenteditable选定的文字保存和恢复

I am using a WYSIWYG Rich Text Editor from mindmup

I added a dropdown box in toolbar I use this dropdown to fetch the content from server and append/prepend to the existing content in the Editor where the cursor is pointing.

But it is not adding the data to the editor.

I referred Insert html at caret in a contenteditable div and Insert text at cursor in a content editable div

But they are not working for me.

This is the function i used to fetch the data when changing drop down

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");

} 

How can we add HTML at a current cursor position?

Note: This Insert text at cursor in a content editable div adds the content in dropdown itself, when I directly choose a dropdown before clicking editor

解决方案

Sounds like the toolbar buttons are stealing the focus from the editable element, thus destroying the selection. You'll either need to prevent the buttons/dropdowns from doing this or save and restore the cursor position, in which case you'll need to detect clicks on the toolbar buttons before they destroy the selection (possibly using mousedown).

Example: contenteditable selected text save and restore

这篇关于所见即所得编辑器将HTML内容放置在当前位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！