Best WYSIWYG editor for Vue that supports structured content?
We're using prosemirror for this - I'm learning it now. I believe it's also what's under the hood of TipTap. But our goal is building custom WYSIWYG editors, so a toolkit is exactly what we need.
There's also stuff like storybook https://storybook.js.org/
More on reddit.comLooking for WYSIWYG library for Vue 3
WYSIWYG library suggestion for vue3
Vue 3 rich text editor
What is the price for TinyMCE Vue WYSIWYG editor?
Does the TinyMCE Vue rich text editor have copy and paste functionality?
Why should you choose TinyMCE Vue rich text editor?
Videos
Hi there –
I'm looking for a good WYSIWYG editor for Vue.
Here are my requirements:
-
It must support structured content. That is: I don't want a WYSIWYG editor that stores the content as HTML under the hood. I do want an editor which stores content as JSON (or a similar format), so that I can convert it to whatever markup I need for a given purpose.
-
It must be possible to easily create my own custom element types. For example, let's say that my users want to add embedded YouTube videos to the documents they're editing. I should be able to write a custom plugin which adds a "YouTube" button to the editor toolbar, describes how that element works and behaves, how it gets rendered on the editor canvas, etc.
-
There must be a well supported PHP library which allows me to convert the structured content into HTML in a flexible way. For example, this library should allow me to specify that my custom YouTube element should be converted to the markup for a Bootstrap 5 embed. And when we later move to Bootstrap 6 (or some other CSS framework entirely), I should be able to specify some other markup – without having to modify any of the structured content itself.
-
I should be able to get a basic editor working without a ton of custom code. (A lot of the editors I'm finding are "toolkits" for creating editors from scratch. I'm looking for something that's more ready-to-use – but extensible and customizable.)
So far, I've looked at:
-
Tiptap: Seems like it requires too much custom development just to get a basic editor working.
-
EditorJS: The only tools I could find for converting to HTML are third-party efforts by individual developers, so it fails my third requirement.
-
Slate: Looks very promising, but it's for React. (Someone has floated the idea of making it framework-agnostic, but the maintainers haven't committed to that goal yet.)
Others that I'm aware of (but haven't dug into yet):
-
ProseMirror: Seems like more of a toolkit.
-
Quill: This blog post from the Medium development team gives me a little pause about Quill.
Any advice would be welcome – I'm new to this kind of editor. Thanks!
We're using prosemirror for this - I'm learning it now. I believe it's also what's under the hood of TipTap. But our goal is building custom WYSIWYG editors, so a toolkit is exactly what we need.
There's also stuff like storybook https://storybook.js.org/
We are using tiptap. It is a lightweight wrapper over prosemirror. To support basic functionality it is not a lot of work. There is the starter-kit package with all basic extensions. But prosemirror and tiptap are extremely extensible.
Do not use Quill. It is unmaintained and does not support line-breaks even.
I look up and there's not so much options. It usually made for vue 2 and no longer maintained. However, I found one mavon editor but it's made by the chinese (and using chinese language for most of it) so I'm having a hard time to customise and style it (I want to implement dark mode). So perhaps if there are other good alternative out there? if not then I have to figure my way out myself with the mavon editor.