Custom elements?

[hackuun]

Is it possible to extend functionality to use custom elements?

[chmln]

Yes, this should definitely be possible. The modular architecture will make this rather easy too.

[hackuun]

I checked the sources but still unsure how to achieve that. @chmln any pointers?

[romainbx]

Some news about that ?

I would like to create my own modules (for toolbar buttons), but I dont see how to do it nicely.

[hackuun]

@chmln cool. Can you please provide usage example?

[mycarrysun]

@chmln why did you close the issue? Thinking a show HTML button would be very useful and was going to add as a custom element. Also wanted to add icons as a custom element. Any way to currently do this??

[chmln]

@mycarrysun look at https://github.com/chmln/vue-wysiwyg/commit/e2c3d9b67b62adb3c5af922e7cfacc3350112eec#diff-39e1dfe7260adc0ef53ec43cb1f8e58cR1

[jonalxh]

I dont understand how to set the method that will be called from the customModule. This is my code:

    customModules: [{
        title: "Fullscreen", 
        icon: "+",
        customAction() {
                    console.log("customAction ")            
        }
    }]

It does not work. Can you explain me how? I want to set the editor in fullscreen.

[richardhedges]

This is all I did to create a custom module:

Vue.use(wysiwyg, {
    customModules: [{
        title: 'moduleTitle',
        icon: 'ICON', // an SVG will suffice
        customAction(utils) {
            return [['insertHTML', `<span class="custom-class">${utils.getHTMLOfSelection()}</span>`, true]]
        }
    }]
})

My only issue right now is having it remove the span. Because it inserts HTML, it will probably need to be expanded upon to check if the highlighted selection already contains the element we're about to add, and remove it if necessary.