5

I need to create a simple rich-text editor that saves its contents to an XML file using arbitrary markup to indicate special text styles (e.g: [b]...[/b] for bold and [i]...[/i] for italic). All the backend PHP stuff seems fairly straightforward, but the front-end WYSIWYG portion of the feature seems a bit more convoluted. I've been reticent to use one of the currently-available JavaScript-based WYSIWYG editors because the rich-text options I want to allow are so limited, and these applications are so fully-featured that it almost seems like more work to stip them down to the functions I need.

So, in setting out to create a bare-bones rich-text editor, I've encountered three approaches:

  • The first two approaches use the contentEditable or designMode properties to create an editable element, and the execCommand() method to apply new text styles to a selected range.
    • The first option uses a standard div element, executes all styling commands on that elements contents.
  • The second option uses the editible body of a window enclosed in an iframe, then passes any styling commands initiated from buttons in the parent document into its contentWindow to alter selected ranges in the contained body. This seems like several extra steps to accomplish the same effect as option one, but I suppose the isolation of the editable content in its own document has its advantages.
  • The third option uses a textarea overlaying a div, and uses the oninput JS event to update the background div's innerHTML to match the input textarea's value whenever it changes. Obviously, this requires some string finagling to to convert elements like newline characters in the textarea to <br/> in the div, but this would allow me to preserve the integrity of my [/] markup, while relegating the potentially-messy DOM manipulation to front-end display only.

I can see benefits and drawbacks for each method. the contentEditable solutions seem initially the simplest, but support for this features tends to vary across browsers, and each browser that DOES support it seems to manipulate the DOM differently when implementing execCommand(). As mentioned before, the textarea/div solution seems like the best way to preserve my arbitrary styling conventions, but the custom string-manipulation procedure to display rich text in the output div could get pretty hairy.

So, I submit to you my question: Given the development goals I've outlined, which method would you choose, and why? And of course, if there's another method I'm overlooking that might better serve my purpose, please enlighten me!

Thanks in advance!

Amit Kumar Gupta
  • 7,193
  • 12
  • 64
  • 90
Aaron
  • 5,137
  • 1
  • 18
  • 20
  • Do you actually want `[b]...[/b]` or `...`? – user123444555621 Dec 14 '11 at 21:56
  • @Pumbaa80 I want to use the square bracket markup as, even though it doesn't save much space with elements like ``, there are some styling conventions that will translate into more lengthy and complex html that I'd like to abbreviate with the arbitrary markup, and even though all of the content will be enclosed in `CDATA` tags, I'd like to keep potentially interfering characters out of my XML as much as possible. – Aaron Dec 14 '11 at 22:04
  • I don't get it. Why don't you use a simple textarea (like Stackoverflow dows)? – user123444555621 Dec 14 '11 at 22:06
  • I may, especially if I can keep my markup simple. The only reason I hesitate to use that approach is that I'm designing this to appease content editors (read: non-programmers) that tend to spook easily when they see a lot of `[];>`. – Aaron Dec 14 '11 at 22:10

2 Answers2

2

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

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

NB It would be far more efficient to generate the preview using plain-js BBcode approach. However, do not overcomplicate stuff unless you necessary need it.

Gajus
  • 69,002
  • 70
  • 275
  • 438
  • Very interesting. So, basically, I would have a raw textarea for input to which markup would be directly applied when adding styles to a selected range, and also a separate (not underlaying) preview div, which would convert the markup to html on the fly and output the result on input. I may go with this solution, I just need to be sure that my content editors are comfortable working with simple "BBCode-esque" markup. Thanks for the reply! – Aaron Dec 14 '11 at 21:40
0

The problem with BBCode, Markdown, ... is that it's not that trivial for genpop. I suggest looking at widgEditor, it is by far the simplest WYSIWYG editor I've seen to date. It was developed some time ago, so I am not sure about compatibility, but it sure is an inspiration.

I would have included this only as a comment, since it does not directly answer your question, but I am fairly new to SA and could not find out how to do that. Sorry.

palmplam
  • 707
  • 9
  • 20
Ondrej
  • 502
  • 1
  • 3
  • 12
  • Thanks for taking the time to respond. The intimidation that non-programmers feel when confronted with excessive markup is the very factor compelling me to create this editing interface. However, I don't want my application blindly creating styling elements that induce a panic attack for anyone that might have to edit the xml source itself. – Aaron Dec 14 '11 at 21:49
  • I know the nightmares, believe me. Have you considered something like Tidy? If you combine it with a simple WYSIWYG, where the user can't go too crazy, then you could get decent code. Depends on the users' knowledge, I know a lot of people who would freak out about BBCode and the likes, but again... depends. Good luck whatever path you choose! Cheers. – Ondrej Dec 15 '11 at 21:12
  • Since I don't have the possibility to comment other responses, this sounds exactly like what Guy is suggesting — http://jrmoran.com/playground/markdown-live-editor/ - it is all JavaScript based, so no AJAX necessary. – Ondrej Dec 15 '11 at 21:17