Basic WYSIWYG Editor using Quasar 2 / Vue 3 / TipTap 2 Configured for Typescript and Vue's Composition API
You can view a demo at [https://www.simplicityblocks.com/quasar2tiptap2]
This project basically implements the basic examples that are on the TipTap site at [https://www.tiptap.dev/examples/default] within a Quasar Framework project.
The project uses Vue 3, the composition API and Typescript.
I have added a few custom extensions to provide the capability of Font Color, Font Size and Font Background Color. Additionally, I added an interactive node for image property management.
This is just meant to be a starter.
To get this to work I had to add a resolutions property to the package.json file telling it to use vue 3.1.4. Because of this I believe you need to use yarn instead of npm to install the dependencies (I do not think that npm looks at the resolutions property). Without adding this the editor was not displaying.
git clone https://github.com/mfoitzik/quasar2-tiptap2.gityarn installquasar devI am building some commercial stuff so if you want to support me, just help spread the word about [https://www.SimplicityBlocks.com], [https://www.SimplicityBuilder.com] or try these out (free - no credit card required) and give me some feedback on them, or just follow me on twitter to keep up with me.
The following are listed in alphabetical order as I think for this particular project they are all equally important.
ProseMirror is the "engine" under the hood of the TipTap project.
Support ProseMirror at: [https://marijnhaverbeke.nl/fund/]
Quasar Framework is an awesome framework built on top of Vue.js that provides UI components as well as many other features that simplify building a Vue.js project.
Support the Quasar Framework project at: [https://github.com/sponsors/rstoenescu]
TipTap is the headless editor framework for web artisans.
Support TipTap at: [https://github.com/sponsors/ueberdosis]
Vue is a progressive framework for building user interfaces.
Support Vue at: [https://vuejs.org/support-vuejs/]