从 TinyMCE 内容动态填充 div

Question

我正在尝试从 TinyMCE 文本区域获取内容以在我键入时填充 button/div。这是为了向客户展示 button/div 上线后的样子。其他一切都动态工作，例如 button/div 颜色、标题和下拉菜单。

问题在于从 TinyMCE 动态检索内容。如果我使用标准文本框，它工作正常。我希望客户端能够使用TinyMCE的一些基本功能。

了解此表单域的工作方式。当我在此框中键入内容时，我可以在下方看到我的文本更新。

我的 JS 是：

$(document).on('change', '#ParentID', function() {
    var NTxt = $('#ParentID option:selected').text();
    var NVal = document.getElementById("ParentID").value;
    NTxt = NTxt.replace(/ @ /g,"<br/>");
    if(NVal != "0"){
        if(NTxt.value != null || NTxt.value != "0" || NTxt.value != undefined){
        $("#LTxt").html(NTxt);
        }
    }else{
        $("#LTxt").html('External Link Text/Quote Text');
    }
});
$(document).on('keyup', '#Opt2', function() {
   $('#LTxt').text($(this).val());
});

以下是一些屏幕截图：

1.正常状态：

2。填充的标题和下拉列表 "internal link" 文本：

3。文本区域，填充同一个地方（没有 TINYMCE）：

有人知道我如何使用 TinyMCE 做到这一点吗？我试过了...

tinymce.get('content id').getContent()

...但它似乎没有动态填充。

这是关键问题：如何在用户输入时将输入到 TinyMCE 文本区域的任何内容传递到底部的按钮？

非常感谢，

格林

Answer 1

您需要使用 TinyMCE 触发的各种事件来了解其内容何时更改。然后您可以从编辑器中获取内容并对其进行任何您需要的操作。

这是一个示例，显示了相邻 DIV 中的实际原始 HTML。它可以很容易地调整为将 HTML 插入到元素中，以便它实际呈现到页面上。

http://fiddle.tinymce.com/Gegaab/5

此处记录了可用事件列表：https://www.tinymce.com/docs/advanced/events/#editorevents

该示例特别使用了 keydown 和 change 事件，但如果这些事件不符合您的需要，还有很多可供选择。

从 TinyMCE 内容动态填充 div

Populate a div from TinyMCE content dynamically

javascript

dynamic

tinymce

keyup

onkeyup