tinyMce addContent不起作用

时间:2018-02-23 20:51:20

标签: javascript tinymce textarea

我有以下代码。 setContent部分不起作用。如果我查看了一个视图源,我可以看到来自$ rowpost [" blog"]的信息被放入页面,因为某些原因不能显示。

<textarea name="txtBlog" id="txtBlog" cols="50" rows="10"></textarea>
<script type="text/javascript" src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=3x7na4p57b2ukuixfz5ird4sgs0kqhpfwzxlg0vz0j4dv4bd"></script>
<script>
    tinymce.init({
        selector:'textarea',
        menubar:false,
        plugins:[
            'advlist autolink link lists image charmap print preview anchor textcolor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste code help'
        ],
        toolbar:'styleselect | undo redo | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
    })
    tinymce.get("txtBlog").setContent('<?php echo $rowpost["blog"]; ?>');
</script>

感谢任何想法或建议。

由于

修改

我将代码更改为此,但是当我刷新页面时,它会将textarea更改回常规textarea。但是,它会显示数据库中的信息。

<textarea name="txtBlog" id="txtBlog" cols="50" rows="10"></textarea>
<script type="text/javascript" src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=3x7na4p57b2ukuixfz5ird4sgs0kqhpfwzxlg0vz0j4dv4bd"></script>
<script>
    tinymce.init({
        selector:'textarea',
        menubar:false,
        plugins:[
            'advlist autolink link lists image charmap print preview anchor textcolor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste code help'
        ],
        toolbar:'styleselect | undo redo | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
        setup: function (editor) {
            editor.on('init', function () {
                this.setContent("<?php echo $rowpost["blog"]; ?>");
            });
        }
    })
</script>

1 个答案:

答案 0 :(得分:0)

如果您想在页面加载时将内容加载到TinyMCE中,您可以使用setContent函数来执行此操作...但您需要确保在尝试使用setContent()之前初始化TinyMCE。在您的示例中,您调用init,然后立即调用setContent(),而不检查编辑器是否已加载。

执行所需操作的最佳方法是将代码加载到TinyMCE的配置对象中。例如:

tinymce.init({
  ...
  setup: function (editor) {
    editor.on('init', function () {
        this.setContent("<p>My new content</p>");
    });
  }
  ... 
});

在编辑器完成初始化之前,init函数不会被调用,因此您可以确保在调用setContent()代码之前一切准备就绪。

注意:使用init可确保您可以通过this定位特定的TinyMCE实例。如果您在页面上有多个编辑器。您不需要使用此方法来使用get() API。