Rich-text editor implementation?

[mirkos93]

Would it be possible to integrate a rich-text editor?

[albanm]

Maybe, I need to think about it. tiptap-vuetify looks promising.

[twoxfh]

I was able to add ace using a default slot. I recreated the textarea with the defaults, added an id tag and a style display:none. Then I added a div for ace to put its editor on and synced the changes back to the textarea. You can likely do the same with other Rich-text editors.

[albanm]

Nice, I was thinking of writing a tutorial or simply a codepen similar to what you describe.

[PythonLinks]

@albamn A code pen would be brilliant. I need both Ace and a Rich Text Editor. The problem is that I am quite new to view, so I do not even understand the instructions above.

It is hard to find the software which does what I need. The problem is that my forms are both nested, and need editors. I started with https://github.com/json-editor/json-editor but it did not percolate validation errors up to the tabs. Vue.js can do that kind of stuff much better. Sadly this library does not have a Rich Text editor. So there is reportedly only 1 other json Vue editor. https://github.com/wotamann/vuetify-form-base which does nested. But it lacks both ace and Rich text editors.

Sigh. I am not sure what I will do next.

[PythonLinks]

So here is a vue component which works with Ace Editor.
https://github.com/chairuosen/vue2-ace-editor Do you think we could do some kind of "multiple inheritance" to make it subclass off of both a VJSF class and that vue class?

I might be able to make something like this work if someone provided enough guidance. I am more of a Python developer than a Javascript/Vue developer.

I have this suspicion that one needs something like vue to make the validation error events bubble up correctly to the tabs. I fear that no package will do what I want out of the box, and I have fix this stuff myself.

[PythonLinks]

After looking at the other choices I am back. I corrected my previous comment. You do have an Ace Editor in the examples. If I want to, I could use that as an example for how to add an RTF editor. In the meantime, I can use Markdown in Ace. That is actually much better for my use case, teaching Python, web development and JSON schema in the browser.

You can read more about my misadventures looking for a JSON Form library here: https://forestwiki.com/json-schema-form-generators

My conclusion, is that this stuff is very complex to do right. You need a platform like Vue components or React to do it. The money is on React, but what a pain o use it. This library looks great. A good reason to learn more about Vue.

Thank you so much for all of your hard work.

[albanm]

I was going to tell you to have a look at this example but it seems, based on your latest comment, that you already found it.

Thanks for the feebback !