how to add new component like code editor ?

[ducvu91]

Hello, I want add new component like code editor, can add anything html & style in this (like ckeditor).

[givanz]

Hi

Can you please provide more details, do you want to replace the text editor (that shows on element double click) with ckeditor?

There is a plugin to replace the default text editor with ckeditor you only need to download ckeditor and uncomment the plugin code https://github.com/givanz/VvvebJs/blob/master/editor.html#L1668-L1675

If you want to have a component that adds ckeditor to the page you can use something like

Vvveb.Components.extend("_base", "widgets/ckeditor", {
    name: "Ckeditor",
    attributes: ["data-component-ckeditor"],
    image: "icons/code.svg",
    dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/code.svg">',
    html: `<div data-component-ckeditor>
               <div class="ckeditor">This is some sample content.</div>
            </div>`,

    afterDrop: function (node)
    {
        //check if ckeditor is included and if not add it after component drop
        let body = Vvveb.Builder.frameBody;

        if ($("#ckeditor-script", body).length == 0)
        {
            $(body).append('<script id="ckeditor-script" src="https://cdn.ckeditor.com/ckeditor5/39.0.2/classic/ckeditor.js"></script>');
            $(body).append(`<script>
                ClassicEditor
                                .create( document.querySelector( '.ckeditor' ) )
                                .then( editor => {
                                        console.log( editor );
                                } )
                                .catch( error => {
                                        console.error( error );
                                } );
              </script>`);
        }

        return node;
    },

    properties: []
});

You will also need to add the component to a group to be visible in the list

https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-widgets.js#L19

Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/ckeditor"];

You might also want to make the element not editable to allow select by adding

[data-component-ckeditor]

to the non editable components list in

https://github.com/givanz/VvvebJs/blob/master/scss/vvvebjs-editor-helpers.scss#L69