如何使用Require.js实现TinyMCE?

use*_*756 11 javascript jquery tinymce requirejs

我目前正在将TinyMCE源作为依赖项传递,然后调用tinyMCE.init({}); 但它没有初始化TinyMCE.当我在console.log TinyMCE时,它返回一个TinyMCE对象.代码示例如下:

define([
'jQuery',
'Underscore',
'Backbone',
'TinyMCE'
], function($, _, Backbone, tinyMCE) {

        tinyMCE.init({
            mode: "exact",
            elements: $('textarea'),
            theme: "advanced",
            theme_advanced_toolbar_location: 'top',
            theme_advanced_buttons1: 'bold,italic,underline,bullist,numlist,link,unlink',
            theme_advanced_buttons2: '',
            theme_advanced_buttons3: '',
            theme_advanced_toolbar_align: 'left',
            plugins: 'paste,inlinepopups',
            width: '100%',
            height: textarea.attr('data-height'),
            oninit: function () {
                console.log('TargetTD :');
                console.log(targetTD);

            }
        });
   }
});
Run Code Online (Sandbox Code Playgroud)

eba*_*nov 34

您可以对requirejs 2.1.0或更高版本使用'shim',请参阅下面的主脚本示例:

requirejs.config({
    baseUrl: "js",
    paths: {
        tinyMCE: 'libs/tinymce/tiny_mce'
    },
    shim: {
        tinyMCE: {
            exports: 'tinyMCE',
            init: function () {
                this.tinyMCE.DOM.events.domLoaded = true;
                return this.tinyMCE;
            }
        }
    }
});

requirejs([
    'tinyMCE'
], function (tinyMCE) {
    console.log(tinyMCE);

    // your code here
});
Run Code Online (Sandbox Code Playgroud)

编辑:我在评论中从下面添加了iimuhin的片段.没有它它似乎没有用; 我添加了它,因为未来的搜索者会欣赏避免增加的IE头痛.

  • 这将加载tinyMCE但tinyMCE.init将不会创建编辑器.您将需要以下行:`this.tinyMCE.DOM.events.domLoaded = true;`返回this.tinyMCE之前````(在tinyMCE 4.02b上测试过) (14认同)

小智 6

有同样的问题.我的解决方案是直接使用TinyMCE jQuery插件而不是TinyMCE.这样它工作正常.

define(['jquery', 'tiny_mce/jquery.tinymce'], function ($) {
    $('textarea').tinymce({
        script_url : 'js/tiny_mce/tiny_mce.js',
        theme : 'advanced',
        theme_advanced_buttons1 : 'fontselect,fontsizeselect,forecolor,bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,removeformat,indent,outdent,numlist,bullist,copy,paste,link',
        theme_advanced_buttons2 : '',
        theme_advanced_buttons3 : '',
        theme_advanced_toolbar_location : 'top',
        theme_advanced_toolbar_align : 'left'
   });
});
Run Code Online (Sandbox Code Playgroud)

  • 我强烈建议大家不要使用tinymce jquery构建,它有许多缺点并且是麻烦的来源,它在键盘输入处理方面特别慢! (3认同)