codex-team / editor.js

A block-style editor with clean JSON output
https://editorjs.io
Apache License 2.0
28.27k stars 2.06k forks source link

Load blog, italic and link tools #898

Closed tgalopin closed 4 years ago

tgalopin commented 4 years ago

Hello,

I upgraded from 2.13 to 2.15 and this made my bold, italic and link tools fail. If I remove the tools from the configuration, they are not included in the toolbar anymore. I don't know how to load them, every documentation I find is either missing the bold/italic/link tools, or is for 2.13.

Here is my code:

const editor = new EditorJS({
    holder: this.viewElement,

    autofocus: true,
    placeholder: 'Tapez votre texte ...',

    tools: {
        marker: {
            class: Marker,
        },
        header: {
            class: Header,
            toolbox: {
                title: 'Insérer un titre',
            },
        },
        image: {
            class: Image,
            config: {
                endpoints: {
                    byFile: '/console/uploads/file?r='+projectRef,
                    byUrl: '/console/uploads/url?r='+projectRef,
                },
                buttonContent: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3.15 13.628A7.749 7.749 0 0 0 10 17.75a7.74 7.74 0 0 0 6.305-3.242l-2.387-2.127-2.765 2.244-4.389-4.496-3.614 3.5zm-.787-2.303l4.446-4.371 4.52 4.63 2.534-2.057 3.533 2.797c.23-.734.354-1.514.354-2.324a7.75 7.75 0 1 0-15.387 1.325zM10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z"></path></svg> Choisissez une image',
            },
            toolbox: {
                title: 'Insérer une image',
            },
        },
        facebook: {
            class: Facebook,
        },
        twitter: {
            class: Twitter,
        },
        instagram: {
            class: Instagram,
        },
        youtube: {
            class: Youtube,
        },
        list: {
            class: List,
            inlineToolbar: true,
            toolbox: {
                title: 'Insérer une liste',
            },
        },
        delimiter: {
            class: Delimiter,
            inlineToolbar: true,
            toolbox: {
                title: 'Insérer une séparation horizontale',
            },
        },
        quote: {
            class: Quote,
            toolbox: {
                title: 'Insérer une citation',
            },
        },
        raw: {
            class: Raw,
            toolbox: {
                title: 'Insérer du code HTML brut',
            },
        },
    },

    onChange: () => {
        editor.save().then((content) => {
            this.content = content;
            this.save();
        });
    },

    data: this.content,
});

Could you help?

Thanks by advance!

tgalopin commented 4 years ago

Any help possible :) ?

neSpecc commented 4 years ago

@tgalopin we need more information about you problem. Where do you expected to see the Inline Toolbar? It does not appear or it appears empty?

In the code you include, Inline Toolbar activated only for List tool. And for Delimiter, but Delimiter has no one contenteditable fields, so you won't see the Toolbar.

tgalopin commented 4 years ago

Basically, my problem is that I don't know how to make it so that my inline toolbar includes the Bold, Italic and Link buttons using the new version of editor.js. Currently, my toolbar does display but I don't see the buttons for Bold, Italic and Link.

neSpecc commented 4 years ago

Could you make a screenshot?

tgalopin commented 4 years ago

Screenshot from 2019-10-04 17-20-58

neSpecc commented 4 years ago

Ok, I've got that. We are working on the solution.

tgalopin commented 4 years ago

Thanks :) !

neSpecc commented 4 years ago

Duplicate #853