从 TinyMCE 内容动态填充 div

Question

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

问题在于从 TinyMCE 动态检索内容。如果我使用标准的 textarea 框，它可以正常工作。我希望客户端能够使用 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。填充标题和下拉“内部链接”文本：

3。 Textarea，填充同一个地方（没有 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 事件，但如果这些事件不符合您的需求，还有很多可供选择。