How to integrate Medium-Editor to Extjs 6?

Question

I want to integrate Medium Editor to ExtJs6 but I don't know how to do. I download the editor from https://github.com/yabwe/medium-editor. I thank you so much for your collaboration.

Answer 1

1. Add dependency library url's to index.html
2. Create custom component
3. Use afterrender method on custom component and use your library api inside it
4. Preserve the instance of library variable inside custom component for further use.

Its not too much complicated as it sounds from above list.

Here is an example:

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
                    }
                }
            }]
        })
    }
});

Working Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29v0