如何将媒体编辑器集成到Extjs 6中？

Question

我想集成媒体编辑器到ExtJs6，但我不知道如何做。我从https://github.com/yabwe/medium-editor下载编辑器。我非常感谢你们的合作。

Answer 1

1. 将依赖库url添加到index.html
2. 创建自定义组件
3. 在自定义组件上使用后置渲染方法，并在其中使用库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