search

ProcessMaker / vue-form-elements

Reusable VueJS Based Form Elements
25 stars 12 forks source link

WYSIWYG Editor #15

Closed velkymx closed 5 years ago

velkymx commented 5 years ago

I'd like to enhance the text editor to allow for a more rich environment on the page. To do this I'd like to add a WYSIWG editor to the input box on the side bar. Extra points for allowing editing inline on the main canvas.

use https://www.tinymce.com/docs/integrations/vue/

velkymx commented 5 years ago

image

Features to expose: font style (h1, pre, etc), bold, italic, align (left, center and right), link and code view

velkymx commented 5 years ago

If we have room, show the numbered and unnumbered lists

tdondich commented 5 years ago

As long as tinymce can export bootstrap related classes. Another one that is bootstrap orientated I believe is summernote. Also a more simplified verison for text could be Trix, https://trix-editor.org/. This editor is used for Laravel Nova's wysiwyg editor and might be more appropriate.

I only say this because I know integration of tinymce is a huge pain in the butt.

velkymx commented 5 years ago

I'd like to also make sure we can bind parts of the html to the data model.

Use case: a URL generated by a script task

velkymx commented 5 years ago

This is interesting too: https://ckeditor.com/blog/best-wysiwyg-editor-for-vue/

velkymx commented 5 years ago

Also we need to verify that those tags are whitelisted as part of the save process.

tdondich commented 5 years ago

Note the mustache syntax is parsed during rendering. So as long as the mustache syntax is intact in the content, it'll still work.

velkymx commented 5 years ago

Duplicate: https://github.com/ProcessMaker/vue-form-builder/issues/62