Question

我有一些javascript打开一个灯箱，其中包含动态创建的HTML，包括一些textareas。然后我做...

tinyMCE.init({mode: "none", theme: "simple"});
tinymce.execCommand("mceAddControl", true, id);

...其中 id 特别是一个textarea的id。我知道id是正确的，因为textarea消失了（它突然有 display：none 作为内联样式？），但是如果我删除那个内联样式，textarea再次显示不变，但没有tinymce编辑附。为什么要应用内联样式，为什么没有附加编辑器？

编辑Thariama

编辑2 - 代码包含一个错误，虽然修复后仍然无效...

这里有一个显示问题的例子。

<html>
    <head>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="tiny_mce.js" type="text/javascript"></script>
    </head>
    <body>
        <ul id="list">
        </ul>    
    </body>

    <template id="thingyTemplate">
        <li>
            <label>Email rich text body:</label>
            <textarea rows="8" cols="50" path="bodyRichText" class="wysiwyg"></textarea>
        </li>
    </template>

    <script>

        var newTemplate = $("#thingyTemplate > *").clone();
        $(newTemplate).find("textarea").attr("id", "myTextArea");
        $("#list").append(newTemplate);

        tinyMCE.init({ mode: "none", theme: "simple" });
        tinymce.execCommand("mceAddControl", false, "myTextArea");

    </script>
</html>

当页面加载时，您可以看到模板元素，但列表中的clone（）'d副本将消失。如果删除 mceAddControl 行，则可以看到模板及其克隆。

Answer 1

我试过了：

tinymce.remove();
    tinymce.init({
        selector: 'textarea',
        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            });
        },
        height: 100,
        width: 350,
        menubar: false,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table contextmenu paste code',
          'textcolor'
        ],
        toolbar: 'undo redo | insert | styleselectfontselect fontsizeselect | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        content_css: '//www.tinymce.com/css/codepen.min.css'
    });

为我工作。

Answer 2

您是否尝试将该呼叫推迟到“准备就绪”？也许你的DOM不够快，或者你的代码中你有相同的ID;）

    $(function(){
            tinyMCE.init({ mode: "none", theme: "simple" });
            tinymce.execCommand("mceAddControl", false, "myTextArea");
    });

添加tinyMCE以动态添加textarea

编辑Thariama

2 个答案: