javascript - 将 tinyMCE 添加到动态添加的文本区域

标签 javascript jquery tinymce dhtml

我有一些 javascript 可以打开一个灯箱,其中包含动态创建的 HTML,包括一些文本区域。然后我做...

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

...其中 id 特别是一个文本区域的 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>

当页面加载时,您可以看到 template 元素,但列表中的 clone() 副本消失了。如果您删除 mceAddControl 行,但是模板及其克隆是可见的。

最佳答案

我试过这个:

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'
    });

为我工作。

关于javascript - 将 tinyMCE 添加到动态添加的文本区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14774560/

相关文章:

javascript - Facebook 点赞按钮未显示

javascript - Rails 6 Webpacker : Attempting to install jQuery and JS library

javascript - 当我使用 javascript 动态创建 html 页面时,Jquery 脚本未加载到 head 中

javascript - 第二个节目的 TinyMCE 问题。帮助

javascript - Vuejs : Includes css file in webpack minified css

javascript - 是否有可能在一定数量的滚动像素上出现动画?

javascript - 函数式编程中的依赖注入(inject)

javascript - 在剑道网格中使用动态下拉菜单进行内联编辑

tinymce - 如何使用具有完整 RTL 方向的tinymce

javascript - TinyMCE上传音频/视频/图像/文件