Javascript WYSIWYG Editor and font sizes and I am stumped

Question

I'm creating a Javascript WYSWYG editor (yes I know a million already exist but none met my needs) and I've hit a wall.

I need only two features in my editor:

1) Users should be able to select any font size specified in pts. 2) Users should be able to have text of various sizes in the same editor window.

Sounds simple but you'd be surprised at how hard this is.

I've already looked at TinyMCE, NicEdit, FreeRichTextEditor, TinyEditor, openWYSIWYG, WYMeditor, jHtmlArea, uEditor, CLEditor, jQRTE, jQuery Simple WYSIWYG Editor, and xinha and none of them have both these features.

The only editors that I can find that meet the bill are Google Docs, CKEditor, and YUI Rich Text. Google Docs isn't an option, CKEditor is $850 and is overkill for my project, and YUI Rich Text editor is too complicated as well. I just want a dead simple editor with these two features.

This is a big roadblock to my project.

Whatever solution is found has to be lightweight and free. YUI Text Editor for example works but depends on the YUI javascript library which is too big and not easy to take apart and strip down.

Answer 1

I've done this in an IE based control before. In summary:

1. User selects a segment of text and chooses a different font size in your GUI.
2. In Javascript:
   1. Use the browser DOM to get the current text selection object.
   2. Create a new SPAN element, set the CSS style font-size attribute as required (eg: 12pt).
   3. Set the inner text of the SPAN to the originally selected text.
   4. Delete the selected text from the document.
   5. Insert the new SPAN at the same location.

Of course the specifics depend on the browser/s you are targeting. If you need to support many browsers using a library (JQuery etc) may be the way to go.

If I remember correctly, in IE you use document.selection and selection.createRange() to get the current selection.

There is also a delete() or collapse() on the range object to delete the selected text. To insert the span you can use insertBefore() / insertAfter() or possibly range.pasteHTML()

Answer 2

CKEditor is $850 only if you require a special license. As long as you can respect the GPL, LGPL or MPL you can use it without buying anything. http://ckeditor.com/license

Answer 3

Using CLEditor, you could write a simple plug-in that replaces the built-in font popup with point size values (rather than font sizes 1-7). Then use the CLEditor .selectedText() and .execCommand() methods (along with the 'inserthtml' command) to replace the current selection with a span tag containing the selected text. This would work cross browser, would be very lightweight and should not be that dificult to write.