4

我在使用 tinyMCE 时遇到问题，当我将 init 代码放在 之前<script type="text/javascript" src="/scripts/tiny_mce/tiny_mce.js">，它工作正常。初始化代码是这样的：<head><textarea class="tinyMceEditor">

                    tinyMCE.init({
                        mode : "specific_textareas",
                        editor_selector : "tinyMceEditor",
                        plugins : "inlinepopups,advlink",
                        convert_urls : false,
                        theme : "advanced",
                        theme_advanced_buttons1 : "link,unlink",
                        width: "602",
                        height: "175",
                        theme_advanced_statusbar_location : "none"});

但是现在，我想推迟加载 tiny_mce.js，当用户第一次单击按钮时，将加载 tiny_mce.js，然后附加<textarea class="tinyMceEditor">到<body>，然后使用前面的代码执行 init，但这时间，它不会启动 tinyMCE 编辑器，它只会显示<textarea class="tinyMceEditor">

google了一下，没找到相关的，有谁遇到过这个问题？

任何建议将不胜感激。

我查看了 chrome web 开发人员工具，发现如果我动态加载 tinymce.js，其他需要的 js，如 en.js、editor_template.js、editor_plugin.js 等将不会被加载。即使我将这些 js 文件添加到动态加载，tinymce 仍然无法启动。

感谢您的帮助，我在 firebug 中观看了，我确实在 append <textareato之前加载了 tinymce.js <body>，然后我追加<textarea>了 tinymce init()，我正在使用 LazyLoad（jQuery 插件）动态加载 js 文件。

这就是我所做的

if(typeof TinyMCE == "undefined"){
    //dynamically load the tinymce.js
    LazyLoad(['tinymce.js'],function(){
        //callback function, called after tinymce is loaded
        $('body').append('<textarea class="TinyMceEditor"/>');
        tinyMCE.init({init settings});
    });
}

如果我不动态加载tinymce.js，只需在其中添加一个<script>标签<head>，即可启动tinymce，但是当我动态加载tinymce.js时，它不起作用。有什么想法吗？

4

2 回答 2

27

经过一天的工作，终于找到了解决办法，就放

 window.tinymce.dom.Event.domLoaded = true;

前

 tinymce.init();

然后可以正确启动tinymce。

于 2012-11-13T13:25:42.707 回答
1

我通过创建一个单独的咖啡脚本文件解决了这个问题。然后我在下面声明了具有窗口范围的函数以在视图中访问。

window.initialize_tiny_mce = () ->
  if (typeof tinymce != 'undefined' && tinymce != null)
    tinymce.remove();

  tinymce.init
    height: '180'
    menubar: false
    statusbar: false
    cleanup: true
    selector: '.new-tinymce-printable-html'
    plugins: [ 'autolink link image code lists advlist' ]
    toolbar: 'styleselect | bold underline italic | bullist numlist outdent indent | link image | code'
    browser_spellcheck: true
    setup: (editor) ->
      editor.on 'keyup', ->
        tinymce.triggerSave()
      editor.on 'change', ->
        console.log editor.getContent()
        return
      return

然后在部分视图中，我调用了这个函数：

:coffeescript
  initialize_tiny_mce()

现在动态创建的元素被分配了一个 tinymce 编辑器。

于 2019-06-19T07:48:52.163 回答