JavaScript WYSIWYG HTML editor

16 views
Skip to first unread message

Glen Peterson

unread,
Nov 28, 2016, 10:04:36 AM11/28/16
to Asheville Coders League
I'm looking for a JavaScript-based library that I can include in a web page to let someone edit HTML (of another web page).  It should show WYSIWYG and also the raw code.  End users should be marking things as H1, H2, H3, H4, EM, SUP, SUB, etc.  I don't want people creating their own styles.  I especially don't want people coding text that's not an H1 to look like an H1, so no changing font sizes, families, or colors, just pick which pre-defined styles to apply.  Some of these styles don't correspond well to existing HTML tags, so they generate <div class=... or <span class=... behind the scenes.  I also need to write some custom JavaScript extensions for weird styles that require extra work to represent in HTML (e.g. the Tip style requires multiple HTML tags to get the word "Tip" on the left with the text wrapping correctly to the right).  This is a little overwhelming, but seems to be a good start:

Why?
The company I work for bought a book company and we're making the books available online.  Right now, we have a very constrictive system (I threw it together in about a week) to upload the HTML and images that Adobe InDesign spits out (as an epub).  A script strips all the style information out of that, then convert the basic HTML to use consistent styles that look like our books.  It reports errors and warnings, then lets you commit your upload or try again.  This requires careful attention to how all text and images are coded in InDesign and will ultimately make the person doing that insane.  If we had a good WYSIWYG editor, she could upload the InDesign epub once, then fix it with the online editor as much as she wished.

Diego Medina

unread,
Nov 28, 2016, 11:50:07 AM11/28/16
to ashevill...@googlegroups.com
we are slowly moving away from ckEditor to http://quilljs.com/ and so far we are happy with it.

iirc, it let's you define custom formats if you need to. I do know you can pick which toolbar icons you want to enable, so you can just have the Hn/etc if that is all you need

Regards,

Diego


--
You received this message because you are subscribed to the Google Groups "Asheville Coders League" group.
To unsubscribe from this group and stop receiving emails from it, send an email to asheville-coders+unsubscribe@googlegroups.com.
To post to this group, send email to asheville-coders@googlegroups.com.
Visit this group at https://groups.google.com/group/asheville-coders.
For more options, visit https://groups.google.com/d/optout.



--
Diego Medina
Lift/Scala Consultant
di...@fmpwizard.com
https://blog.fmpwizard.com/
Reply all
Reply to author
Forward
0 new messages