在动态加载的TextArea上加载TinyMCE不起作用

Loading TinyMCE on dynamically loaded TextArea not working

本文关键字：加载 TinyMCE 不起作用 动态 TextArea      更新时间：2023-09-26

我正在尝试创建一个动态加载的文本区域，并自动应用TinyMCE编辑器。

尽管有很多关于这个主题的话题，甚至还有一些教程，但我似乎并没有把它发挥作用。

我可能忽略了一件很小的东西，但如果我知道的话。。

情况

当前安装：TinyMCE 4.x+jQuery v1.10.1通过AJAX调用加载文本区域的HTML页面。

我尝试在文本区域初始化TinyMCE编辑器。在那里它失败了。

FireBug错误控制台告诉我：ReferenceError：tinyMCE未定义但它已经被定义了。我甚至试图设定绝对路径。

    <title>jQuery test file</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/classes/jquery.tinymce.js"></script>
    <script type="text/javascript">
    $(function() {
        $('.EditorField').tinymce({
            script_url: 'http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/tinymce.jquery.min.js'
        });
    });
    </script>
    <script type="text/javascript">
      jQuery(document).ready(function() {
         $.get("test.php", function( EditorHTML ) {
            $("#EditorSection").html( EditorHTML );
            tinyMCE.execCommand('mceAddEditor', false, '.EditorField'); 
        });
      });
   </script>

我使用的HTML表单代码：

<form method="post" action="result.php">
    <div>
        <div id="EditorSection">
        </div>
        <br />
        <input type="submit" name="save" value="Submit" />
        <input type="reset" name="reset" value="Reset" />
    </div>
</form>

也许AJAX加载的代码也很重要：

<textarea name="TextArea1" cols="20" rows="2" class="EditorField" id="WysyWig" style="background-color: red; width: 100%; height: 700px;">

动态加载的文本区域内容

我在这里尝试了多种选择：

tinyMCE.execCommand('mceFocus', false, '.EditorField');
tinyMCE.execCommand('mceAddEditor', true, '.EditorField');

或者直接通过ID本身不应该有什么不同

tinyMCE.execCommand('mceAddControl', false, '#WysyWig');

我希望有人看到我俯瞰的地方。

用一个替换脚本标记：

<script type="text/javascript">
jQuery(document).ready(function() {
    $.get("test.php", function( EditorHTML ) {
        $("#EditorSection")
            .html( EditorHTML )
            .find('.EditorField')
            .tinymce({
                script_url: 'http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/tinymce.jquery.min.js'
            });
        tinyMCE.execCommand('mceAddEditor', false, '.EditorField'); 
    });
});
</script>

基本上，您将等待Ajax响应，一旦它在DOM中，您将初始化tinyMCE。

相关文章：