extjs - 如何将 Medium-Editor 集成到 Extjs 6？

Question

我想将 Medium Editor 集成到 ExtJs6，但我不知道该怎么做。我从https://github.com/yabwe/medium-editor下载编辑器。我非常感谢您的合作。

Answer 1

1. 将依赖库 url 添加到 index.html
2. 创建自定义组件
3. 在自定义组件上使用 afterrender 方法并在其中使用您的库 api
4. 保留自定义组件内的库变量实例以供进一步使用。

从上面的列表中听起来，它并没有太复杂。

这是一个例子：

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('widget.mediumEditor', {
            extend: 'Ext.panel.Panel',
            alias: 'widget.mediumEditor',
            xtype: 'mediumEditor',
            padding: 20,
            html: "<div class='editorcontent'></div>",
            height: 400,
            listeners: {
                afterrender: function(component) {
                    var mediumEditor = new MediumEditor('.editorcontent', component.editorConfig);
                    component.editorInstance = mediumEditor;
                }
            }

        });

        Ext.create('Ext.panel.Panel',{
            renderTo: Ext.getBody(),
            layout: 'fit',
            title: 'Medium editor',
            items: [{
                xtype: 'mediumEditor',
                editorConfig: {
                    toolbar: {
                        /* These are the default options for the toolbar,
                           if nothing is passed this is what is used */
                        allowMultiParagraphSelection: true,
                        buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote'],
                        diffLeft: 0,
                        diffTop: -10,
                        firstButtonClass: 'medium-editor-button-first',
                        lastButtonClass: 'medium-editor-button-last',
                        relativeContainer: null,
                        standardizeSelectionStart: false,
                        static: false,
                        /* options which only apply when static is true */
                        align: 'center',
                        sticky: false,
                        updateOnEmptySelection: false
                    }
                }
            }]
        })
    }
});

工作小提琴： https ://fiddle.sencha.com/#view/editor&fiddle/29v0