search

tiff / wysihtml5

Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
http://xing.github.com/wysihtml5/
MIT License
6.49k stars 1k forks source link

Span-itis #200

Open helloluis opened 12 years ago

helloluis commented 12 years ago

Hi everyone! We've been using WYSIHTML5's editor in a production app for the past few months and have generally had good results with it. However, I've found that it has a tendency to go nuts when the author uses a lot of different font-sizes in a given block of text. Here's an example of one of our production sites where nearly all the formatted text was created by WYSIHTML5: http://hack2hatch.com/

If you inspect the contents of the Registration bucket, you'll find that it's composed of a crazy amount of spans, because the user was changing the font-size and font-family between the first line ("Register") and the second line ("All startup teams ..."). The markup chopsuey looks like this:

 <h1 class="wysihtml5_editable">
<span class="wysiwyg-font-family-passion_one wysiwyg-font-size-36 wysiwyg-font-color-990000">registration<br></span><span class="wysiwyg-font-size-18">All startup teams may&nbsp;</span><a rel="nofollow" target="_blank" href="http://https//docs.google.com/spreadsheet/viewform?formkey=dHc0MTJZYzJYTEdwWkZQUnoxZ0l5a0E6MQ"><span class="wysiwyg-font-size-18">apply by filling out this form</span></a><span class="wysiwyg-font-size-18">. (Deadline is on Sept. 14, 2012.)&nbsp;</span><span class="wysiwyg-font-size-30"><span class="wysiwyg-font-size-18">Observers may&nbsp;</span></span><a rel="nofollow" target="_blank" href="http://http//hack2hatch.eventbrite.com/"><span class="wysiwyg-font-size-18">register for free&nbsp;here</span></a><span class="wysiwyg-font-size-18">.<br></span><br>
</h1>

In my custom implementation of WYSIHTML5, I've managed to integrate web-fonts and multiple font-sizes. Essentially, the author began by typing "registration", choosing a font family, color and size, then hitting Enter to go to the next line. Then they typed out the rest of the content, and then choose a font family, color and size for that as well. The result is what you see above :-/

Does anyone have any pointers for preventing or suppressing all of the extraneous spans?

crccheck commented 11 years ago

Does this only happen in Chrome? TinyMCE has a problem like this (part of the reason why I'm looking at wysihtml5). I can't find a specific mention to it, but their changelog has "* Fixed bug where the latest WebKit versions would produce span elements when deleting text between blocks."

https://github.com/tinymce/tinymce/commit/8e6422aefa9b6cc526a218559eaf036f1d2868cf https://github.com/tinymce/tinymce/commit/113bd1ceaef1e1de5f2fdf54633d58424817182c https://github.com/tinymce/tinymce/commit/cd84a63d4addf27c60ef32dcbe1a49bbee30150a