Question

我正在尝试动态更改tinymce编辑器的内容。即使这个步骤也行不通。实际上我想把内容放在ajax的成功上，但由于它不起作用我不能继续。

我收到类型错误tinemce.get（）为null且tinymce.activeEditor为空错误

<textarea style="height:700px" name="proposal" id="proposal" >
                        hi
</textarea>
<script>
    $(document).ready(function () {
                        tinymce.init({
                          selector: "#proposal",
                          height: 250,
                          theme: "modern",
                          plugins: [
                            "autoresize advlist autolink lists link image charmap print preview hr anchor pagebreak",
                            "searchreplace wordcount visualblocks visualchars code fullscreen",
                            "insertdatetime media nonbreaking save table contextmenu directionality",
                            "emoticons template paste textcolor colorpicker textpattern imagetools codesample toc"
                          ],
                          toolbar1: "undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media | forecolor backcolor emoticons | codesample",
                          image_advtab: true,
                          content_css: [
                            "https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css",
                          ], 


                        });
                        var content = "<p>Hello World </p>";
                        tinyMCE.get("proposal").setContent(content);//not working
                        tinyMCE.activeEditor.setContent(content);//not working

                    });

<script>

Answer 1

您可能会在编辑器实际实例化之前调用tinyMCE.get("proposal")和tinyMCE.activeEditor。 TinyMCE init()方法需要一些时间才能完成，但是您在init()之后直接调用这两个方法，因此编辑器可能尚未初始化。

编辑器有一个init事件，您可以用它来了解编辑器何时完全初始化，然后您可以使用编辑器API。您可以在TinyMCE配置中添加这样的内容：

tinymce.init({
    selector: "#proposal",
    ...
    setup: function (editor) {
        editor.on('init', function () {
            var content = "<p>Hello World </p>";
            editor.setContent(content);
        });
    }  
});

Answer 2

在Tinymce 4中你可以尝试一下：

// Sets the HTML contents of the activeEditor editor
tinymce.activeEditor.setContent('<span>some</span> html');

// Sets the raw contents of the activeEditor editor
tinymce.activeEditor.setContent('<span>some</span> html', {format: 'raw'});

// Sets the content of a specific editor (my_editor in this example)
tinymce.get('my_editor').setContent(data);

// Sets the bbcode contents of the activeEditor editor if the bbcode plugin was added
tinymce.activeEditor.setContent('[b]some[/b] html', {format: 'bbcode'});

通过Tinymce

了解详情

如何动态设置tinymce内容

2 个答案: