editor.js/example/plugins/text/text.js

/**
 * @class Text
 * @classdesc Paragraph plugin for CodexEditor
 *
 * @author CodeX Team (team@ifmo.su)
 * @copyright CodeX Team 2017
 * @license The MIT License (MIT)
 * @version 2.0.0
 *
 *
 * @typedef {Object} TextData
 * @property {String} text — HTML content to insert to text element
 *
 */

class Text {

    /**
     * Pass true to display this tool in the Editor's Toolbox
     *
     * @returns {boolean}
     */
    static get displayInToolbox() {

        return true;

    }

    /**
     * Class for the Toolbox icon
     *
     * @returns {string}
     */
    static get iconClassName() {

        return 'cdx-text-icon';

    }

    /**
     * Render plugin`s html and set initial content
     *
     * @param {TextData} data — initial plugin content
     */
    constructor(data = {}) {

        this._CSS = {
            wrapper: 'ce-text'
        };

        this._data = {};
        this._element = this.draw();

        this.data = data;
    }

    /**
     * Method fires before rendered data appended to the editors area
     */
    appendCallback() {

        console.log("text appended");

    }

    draw() {

        let div = document.createElement('DIV');

        div.classList.add(this._CSS.wrapper);
        div.contentEditable = true;

        return div;
    }

    /**
     * Create div element and add needed css classes
     * @returns {HTMLDivElement} Created DIV element
     */
    render() {

        return this._element;

    }

    /**
     * Check if saved text is empty
     *
     * @param {TextData} savedData — data received from plugins`s element
     * @returns {boolean} false if saved text is empty, true otherwise
     */
    validate(savedData) {

        if (savedData.text.trim() === '') {

            return false;

        }

        return true;

    }

    /**
     * Get plugin`s element HTMLDivElement
     * @param {HTMLDivElement} block - returned self content
     * @returns {HTMLDivElement} Plugin`s element
     */
    save(block) {

        return this.data;

    }

    /**
     * Get current plugin`s data
     *
     * @todo sanitize data while saving
     *
     * @returns {TextData} Current data
     */
    get data() {

        let text = this._element.innerHTML;

        this._data.text = text;

        return this._data;

    }

    /**
     * Set new data for plugin
     *
     * @param {TextData} data — data to set
     */
    set data(data) {

        Object.assign(this._data, data);

        this._element.innerHTML = this._data.text || '';

    }

}