如何在TinyMCE 4中设置内容，最好是在$(document).ready();块

正如标题所说，我查阅了官方文档，但它不起作用；这是我的JavaScript（利用jQuery）代码：

$(document).ready(function() {
    tinymce.init({
        element_format: "html",
        schema: "html4",
        menubar: false,
        plugins: 'preview textcolor link code',
        selector: 'TEXTAREA#rtf',
        toolbar: 'preview | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | blockquote subscript superscript | code'
    });
    tinymce.activeEditor.setContent($('TEXTAREA#rtf').text());
});

我试着检查tinymce和tinymce（从谷歌）实例，它们都是对象好吧
我还尝试检查tinymce.activeEditor和tinymce.activeEditer，但结果是null

（咳嗽）不知怎么的，在我把所有东西都恢复到我开始的地方之后，它开始工作了：

$(document).ready(function() {
    tinymce.init({
        element_format: "html",
        menubar: false,
        plugins: 'preview textcolor link code',
        schema: "html4",
        selector: 'TEXTAREA#rtf',
        toolbar: 'preview | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | blockquote subscript superscript | code'
    });
});

我怀疑是UA缓存或XSLT转换的结果缓存造成了问题；再次感谢您抽出时间！

我找到了更好的解决方案，可以在代码中的任何地方工作（与setTimeout技巧不同，它不是黑客）

tinymce.get('tinymce-element-id').on('init',function(e) {
      e.target.setContent('my custom content');
});

这就是我实现它的方式：

setTimeout(tinyMCE.init({
                            selector: "textarea.edit_notes",
                            height: editor_height,
                            theme: "modern",
                            menubar: "tools table format view insert edit",
                            force_br_newlines : false,
                            force_p_newlines : false,
                            forced_root_block : '',
                            //plugins: "fullpage",
                            valid_elements : '*[*]',
                            setup: function(ed){
                                ed.on("init",
                                      function(ed) {
                                        tinyMCE.get('testeditor').setContent($('#testeditor').val());
                                        tinyMCE.execCommand('mceRepaint');
                                      }
                                );
                            }
                            }), 50);

试试

tinymce.activeEditor.setContent('<span>some</span> html');

https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#setcontent

这个线程让我走上了正轨，所以我想与v4 共享我的解决方案

tinymce.init({
     ...,
     init_instance_callback:function(editor){
         editor.setContent(__YOUR_CONTENT__);  
     }
});

此代码在文档处于就绪状态时立即运行，因此唯一需要做的就是在textarea有内容之前就设置内容。一个问题是，文本区域中的内容在哪里以及如何设置？

其次，您可以将tinyMCE.init({ .... });放置在setTimeOut中。

希望这能有所帮助。

我记得我曾经做过这样的事情，手动将textarea值添加到TinyMCE:

tinyMCE.init({
   ...
   setup : function(editor) {
      editor.setContent($('TEXTAREA#rtf').text());
   }
});

设置函数的"editor"参数是TinyMCE实例，保证存在。有一段时间没有使用TinyMCE了，但我记得有很多这样的问题！你并不是唯一一个在这里发现问题的人。

但是为什么不使用这样的东西呢？http://www.tinymce.com/wiki.php/Configuration3x:editor_selector

tinyMCE.init({
        ...
        mode : "specific_textareas",
        editor_selector : "TEXTAREA#rtf" // CSS Selectors
});

这是使用TinyMCE的默认方式。它将把您的文本区域转换为TinyMCE实例，并保持输入和TinyMCE 之间的值同步

我一直是这样做的：

tinymce.init({
     ...
     setup: function (editor) {
        editor.on('init', function () {
            editor.setContent('<p>Some content goes here.</p>');
            tinymce.triggerSave();
        })
     },
     ...
});

相关内容

最新更新

热门标签：