Vuetify: [Feature Request] Wysiwyg like Vueditor base on Vuetify Material Design

Created on 12 Mar 2018  路  9Comments  路  Source: vuetifyjs/vuetify

New Functionality

This component will allow us to have a web editor to do html, using Vueditor I have some small design issues when using Vuetify

Vueditor: https://github.com/hifarer/vueditor (This requires Vuex)
Vue-Wysiwyg: https://github.com/chmln/vue-wysiwyg

Sorry for bad english I'm from Brazil

Improvements

This component would make it easier to write html as a Blog System (Posts)

Bugs or Edge Cases it Helps Avoid

It would avoid that anyone who uses Vueditor or Vue-wysiwyg has design problems mainly with the change of theme (Dark and Light)

feature

Most helpful comment

I created an editor that is based on tiptap. It allows you to start quite quickly and have the flexibility to configure. I will be happy to help you if you have any problems. 馃槃

https://github.com/iliyaZelenko/tiptap-vuetify

All 9 comments

I don't think we would ever want to tackle this. It makes more sense to simply show how to integrate with these 3rd party libraries. If you would consider that to resolve this Feature Request, you can leave it open. If not, thank you for your suggestion, but it is not something we are going to pursue at this time.

@RafaelAzeredoDev you can use Quilljs and wire up your own toolbar with vuetify which probably will be closest to perfect for a richt text editor with your requested material design look and feel

@dohomi I'll try to use this Quilljs, thank you.

You could also have a look at tiptap. It's highly configurable.

The main benifit i see in a vuetify wysiwyg editor is that for example validation could be the same as all the other input components.

Or is there any way to include the :rules in a vue plugin which wraps an existing wysiwyg editor in vuetify. So that you can use all the input props on a wysiwyg editor.

Is it as simple as injecting the validateable mixin?

I created an editor that is based on tiptap. It allows you to start quite quickly and have the flexibility to configure. I will be happy to help you if you have any problems. 馃槃

https://github.com/iliyaZelenko/tiptap-vuetify

I've spent quite some time reviewing the different options and for me this works best:

https://github.com/ankurk91/vue-trumbowyg

I need the option to edit the raw html which is something fewer and fewer editors are allowing these days.
Downside is that it uses jquery :(

If someone is interested i've written an article about creating custom vuetify input components so you could embed your own wysiwyg editor
https://medium.com/@ricardo1994/creating-a-custom-input-component-for-your-vuetify-form-2306ecfa8e78

I think vuetify should have a wysiwyg to be more standalone.

Was this page helpful?
0 / 5 - 0 ratings