editor-js / header

Header Tool for Editor.js 2.0
MIT License
96 stars 122 forks source link

How to change the class name in the editor? #43

Open do-web opened 4 years ago

do-web commented 4 years ago

How to change the class name in the editor or disable the styles?

So i want to remove or change the classname ce-header, that the header can use the default page style.

EChatzidakis commented 3 years ago

Either change the ./src/index.css file or bundle the module without the css and have the styles in a separate file.

elroliv commented 3 years ago

Hello, to override Header I've done this :

// HeaderBulma.js
const Header = require('@editorjs/header/dist/bundle.js')
class HeaderBulma extends Header {
    constructor({ data, config, api, readOnly }) {
        super({ data, config, api, readOnly })
        this._CSS.wrapper = 'title'
        /**
         * Main Block wrapper
         *
         * @type {HTMLElement}
         * @private
         */
        this._element = this.getTag();
    }
    /**
     * Get tag for target level
     * By default returns second-leveled header
     *
     * @returns {HTMLElement}
     */
    getTag() {
        const tag = super.getTag()
        let headerClass = 'is-'+this.currentLevel.number
        tag.classList.add(headerClass);

        return tag;
    }
}
module.exports = HeaderBulma
// main.js
let editor = new EditorJS({
    tools: {
        header: {
            class: HeaderBulma,
        },
    }
}

I hope it's help you 😉