What is the best method to create a simple rich-text WYSIWYG editor?

Question

I need to create a simple rich text editor that saves its contents in an XML file, using arbitrary markup to specify special styles of text (for example: [b]...[/b] for bold and [i]...[/i] for italics). All basic PHP files seem pretty simple, but part of the front-end WYSIWYG interface seems a little more confusing. I used one of the currently available JavaScript-based WYSIWYG editors with restraint, because the rich text options that I want to allow are so limited and these applications are so fully functional that they almost seem to work, right down to the functions I need.

So, when creating to create a rich text editor, I came across three approaches:

• The first two approaches use the contentEditable or designMode to create an editable element and the execCommand() method to apply new text styles to the selected range.
  • The first option uses a standard div element, executes all style commands in the contents of these elements.
• The second option uses the editable body window enclosed in the iframe , and then passes any styling commands initiated with buttons in the parent document to its contentWindow to change the selected ranges in the contained body. This seems like a few extra steps to achieve the same effect as option one, but I believe that isolating editable content in your own document has its advantages.
• The third option uses textarea overlay a div and uses the oninput JS event to update the background innerHTML div to match the input text register value whenever it changes. Obviously, this requires some string conversion to convert elements such as newline characters in textarea to <br/> into divs, but this would allow me to preserve the integrity of my markup [/] , while at the same time discarding the potentially messy DOM manipulations only with an interface.

I see the advantages and disadvantages for each method. contentEditable solutions seem initially the simplest, but support for these features tends to vary across browsers, and each browser that supports it seems to manipulate the DOM differently when execCommand() implemented. As mentioned earlier, the textarea / div solution seems to be the best way to preserve my conditional style conventions, but the custom string manipulation procedure for displaying expanded text in the output div can be quite hairy.

So, I submit to you my question: Given the development goals that I have outlined , which method would you choose, and why? And of course, if there is another method, I don’t notice that it can better serve my purpose, please enlighten me!

Thanks in advance!

Answer 1

Have you looked at http://php.net/manual/en/book.bbcode.php ? This is your answer. If in doubt, you are doing something wrong. :-)

Then use JS to track the keyup event and simple AJAX to preview the input. Just like in stackoverflow.

Note. It would be much more efficient to generate a preview using simple BBcode. However, do not overload things if you do not need it.

Answer 2

The problem with BBCode, Markdown, ... is that this is not what is trivial for genpop. I suggest looking at widgEditor , which is by far the easiest WYSIWYG editor I've seen so far. It was developed some time ago, so I'm not sure about compatibility, but it sure is inspiration.

I would only include this as a comment, since it does not directly answer your question, but I am pretty new to SA and could not learn how to do this. Unfortunately.