Wysiwyg Editor for components / vuetify

Question

I really hate ui designing. So i thought about building my own wysiwyg editor.. Just for fun and a new challenge.

Has anyone of you experience with it and tried something like that?

Thanks in advance, Cheers

Experience and knowledge of the community

Answer 1

Should be fairly simple using Vuetify components. They already have a bunch of components that constitute the building blocks for a WYSIWYG, like the v-textarea and the v-btn-toggles. In fact, they already have a simple WYSIWYG example in the v-btn-toggle page.

If you want a harder challenge, you should do it without using Vuetify and that forces you to learn more about how to bind the reactive properties and dynamically style the text based on those properties. Vuetify is very much plug and play so it's not much of a challenge.

Answer 2

Make it simple and implement only those things what you will actually going to use. Like if you do not want list items then don't implement logic for those. Here is a list i think would help you proceed further:

• HTML contenteditable attribute which can help you render the modified texts. Input fields won't be able to render the html inside so this would be useful.

• Another useful thing would be getting selected text from the contenteditable div

Use vue reactivity and work on your magic. Good Luck!!