Ext 整合富文本编辑器Tinymce插件

手头有个项目需要做一个富文本编辑器，Ext自带的文本编辑器htmleditor功能不齐全，上网搜了很多资料，都是提供部分代码，研究了下，终于搞出来了，贴出教程供自己查看和别人借阅。
Extjs自带的文本编辑器htmleditor只是提供简单的功能，超链接，对齐，字体选择按钮，粗体，下划线，斜体按钮，链接按钮，列表按钮，源代码编辑按钮等一些基本的功能。不过ext自带的浏览器存在浏览器不兼容的问题，使用起来不方便，而且界面也不是很美观，功能不齐全。Tinymce是一个基于浏览器的强大的编辑器，它使用户可以方便的编辑html内容。易于集成，只要简短的几行代码就可以搞定，界面美观，支持主题和模板，还可以使用自定义的代码扩展（插件），可定制html输出，支持多种浏览器。所以这里进行讲解Ext整合富文本编辑器Tinymce进行使用。
Tinymce官网的链接https://www.tinymce.com/download/

1. 下载插件tinymce （中文版版本）地址附上链接: https://pan.baidu.com/s/1qXQyEKG 密码: vsf8
2. 将下载下来的文件解压然后放到项目中，在index.html文件引入

<script src="tinymce/js/tinymce/tinymce.min.js"></script>

3.创建文件TinyMCETextArea.js

/*jshint bitwise:true, curly:true, eqeqeq:true, forin:true, noarg:true, noempty:true, nonew:true, undef:true, browser:true */
/*global Ext, tinymce, tinyMCE */

Ext.define('Ext.ux.form.TinyMCETextArea', {

    extend: 'Ext.form.field.TextArea',
    alias: ['widget.tinymce_textarea', 'widget.tinymce_field'],

    //-----------------------------------------------------------------

    /*
     Flag for tracking the initialization state
     */
    wysiwygIntialized: false,
    intializationInProgress: false,

    lastHeight: null,
    lastFrameHeight: null,

    /*
     This properties enables starting without WYSIWYG editor.
     The user can activate it later if he wants.
     */
    noWysiwyg: false,

    /*
     Config object for the TinyMCE configuration options
     */
    tinyMCEConfig: {},

    /*
     In the ExtJS 5.x, the liquid layout is used if possible. 
     The liquid layout means that the component is rendered
     with the help of pure CSS without any JavaScript. In this 
     case, no sizing events are fired.

     However, the event 'resize' is essential for the 
     Ext.ux.form.TinyMCETextArea. For that reason, we set 
     liquidLayout to false.
     */
    liquidLayout: false,

    //-----------------------------------------------------------------
    afterRender: function () {
   
        var me = this;

        me.callParent(arguments);

        me.on('blur', function (elm, ev, eOpts) {
   

            var ctrl = document.getElementById(me.getInputId());

            if (me.wysiwygIntialized) {
                var ed = tinymce.get(me.getInputId());

                // In the HTML text modus, the contents should be
                // synchronized upon the blur event.
                if (ed && ed.isHidden()) {
                    if (ctrl) {
                        me.positionBeforeBlur = { start: ctrl.selectionStart, end: ctrl.selectionEnd };
                    }

                    ed.load();
                }
            }
            else {
                if (ctrl) {
                    me.positionBeforeBlur = { start: ctrl.selectionStart, end: ctrl.selectionEnd };
                }
            }
        }, me);

        me.on('resize', function (elm, width, height, oldWidth, oldHeight, eOpts) {
   

             /*
             alert('width:' + width + '\n' +
             'height:' + height + '\n' +
             'oldWidth:' + oldWidth + '\n' +
             'oldHeight:' + oldHeight
             );*/

            if (!me.noWysiwyg && !me.wysiwygIntialized) {
                me.initEditor(height);
            }
            else
            {
                me.syncEditorHeight(height);
            }
        }, me);
    },
    //-----------------------------------------------------------------
    syncEditorHeight: function (height) {
   
        var me = this;

        me.lastHeight = height;

        if (!me.wysiwygIntialized || !me.rendered) { return; }

        var ed = tinymce.get(me.getInputId());

        // if the editor is hidden, we do not syncronize
        // because the size values of the hidden editor
        // are calculated wrong.

        if (ed.isHidden()) { return; }

        var edIframe = Ext.get(me.getInputId() + "_ifr");

        var parent = edIframe.up(".mce-edit-area");
        parent = parent.up(".mce-container-body");

        var newHeight = height;

        var edToolbar = parent.down(".mce-toolbar-grp");
        if(edToolbar) 
          newHeight -= edToolbar.getHeight();

        var edMenubar = parent.down(".mce-menubar");
        if(edMenubar) 
          newHeight -= edMenubar.getHeight();

        var edStatusbar = parent.down(".mce-statusbar");
        if(edStatusbar) 
          newHeight -= edStatusbar.getHeight();

        me.lastFrameHeight = newHeight - 3;

        edIframe.setHeight(newHeight - 3);

        return newHeight - 3;
    },
    //-----------------------------------------------------------------
    showBorder: function(state) {
   
        var me = this;