javascript - 从 TinyMCE 内容动态填充一个 div

Question

我正在尝试从 TinyMCE textarea 获取内容以在我键入时填充按钮/div。这是为了向客户展示按钮/div 在上线时的外观。其他一切都是动态工作的，例如按钮/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。填充的标题和下拉“内部链接”文本:

<强>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 事件，但如果这些事件不符合您的需要，还有很多可供选择。