Question

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

Answer 1

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

从上面的列表中听起来并不太复杂。

以下是一个例子：

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

如何将Medium-Editor与Extjs 6集成？

1 个答案: