如何让 TinyMCE 4.x 使用动态添加的 DIV？答案

【问题标题】：How do I get TinyMCE 4.x to work with dynamically added DIVs?如何让 TinyMCE 4.x 使用动态添加的 DIV？
【发布时间】：2014-10-09 12:15:47
【问题描述】：

我需要使用 TinyMCE 4.x 来编辑 multiple DIVs 中的内容。这很好用，除非我通过单击按钮 (jquery) 动态添加更多 DIV。

新的 DIV 显示在其他 DIV 下方，但不能立即编辑。保存文件并重新加载后，新的 DIV 也是可编辑的。

我看到所有现有的 DIV 都有一个 id="mce_nn" 其中 nn 是一个唯一的数字。这个接缝由 TinyMCE 自己添加。

当我动态添加新的 DIV 时，它们没有添加 id。但是在保存文件然后重新加载页面后，它添加了一个 id。

有没有办法让 TinyMCE 动态地允许我编辑新的 DIV？（所有新的 DIV 都有一个共同的类。）

这是我当前的 TinyMCE 初始化：

<script type="text/javascript">
tinymce.init({
    selector: "div.mydivsclass",
    inline: true,
 theme: "modern",
    width: "100%",
    height: 300,

感谢所有帮助 :-)

【问题讨论】：

标签： jquery tinymce tinymce-4

【解决方案1】：

我通过创建一个激活新 DIV 编辑器的函数来做到这一点：

 <script type="text/javascript">
    function ActivateTinyMCE() {
        tinymce.init({
selector: "div.myclass",
inline: true, etc

然后在我的“insert-a-new-div”-function 中添加 ActivateTineMCE() 作为最后的步骤之一：

ActivateTinyMCE()

然后我的插入函数为新的 DIV 运行 TinyMCE 初始化，它运行良好。

【讨论】：

【解决方案2】：

我通过在 DIV 的单击上调用 ActivateTinyMCE() 函数来做到这一点，但是内联 tinymce 工具栏对我不起作用。 Tinymce 编辑器实例正在初始化，但工具栏不可见。我已经通过在 tinymce 初始化时触发焦点事件解决了这个问题，如下所示。

<script type="text/javascript">
function ActivateTinyMCE() {
    tinymce.init({
         selector: "div.myclass",
         inline: true,
         ...,
         setup : function(editor) {
            editor.on('init', function() {
                editor._eventDispatcher.fire("focus");
         });
        }
    });
}

<div class="myclass" onclick="ActivateTinyMCE()"/>

【讨论】：