TinyMCE / CKEditor line-height not implemented correctly

2
votes

I have an issue with WYSIWYG editors like TinyMCE or CKEditor that they does not format line-height intuitively like standard text editors.

When changing the font-size in WordPad, Google Docs or any standard text editor, the line-height always matches a line font-size and not the just a font-size of it's wrapper block:

Expected behaviour - Google Docs:

enter image description here

Unfortunately, TinyMCE or CKEditor are too simplistic in this area so they set the font-size by wrapping the selected text into inline span. And inline elements cannot have different line-height set. While I understand the requirement of a clean code, the result is not what a regular user expects.

Wrong behaviour - TinyMCE

enter image description here

Wrong behaviour - CKEditor

enter image description here

My clients are rightly surprised that such basic feature is not implemented by default and we need to dig into editor's JS code to achieve the correct line-height formatting.

Any solution to fix it?

1
cssckeditortinymcewysiwygfont-size
Look at this answer that I have sent to a similar question link here in stackoverflow – rezaSefiddashti

1 Answers

0
votes

CKEditor wraps text in span tags. Where u render the CKEditor HTML, spans must hav display property block and the line-height should work.