That was an inspiring post, Great advice to use a WYSIWYM Editor. Thanks for bringing this up.
Rolling My Own WYSIWYM Editor ¶
December 13, 2009
4 comments
Dec
13
While trying to create a decent comment system for this blog I was faced with many choices. It seems everyone has a different idea of the best way to get this done. In the end I decided to go with a WYSIWYM editor. WYSIWYM stands for "What you see is what you mean." This was new to me since StackOverflow started using it. Basically, its not a full blown WYSIWYG editor, but much simpler, and fits my needs quite well. You can see an example of it at the bottom of this page.
I also looked at a few markup languages to use. The ones in question were textile, markdown, and restructured text. I decided to go with MarkDown because of the simplicity to add code to a comment.
Why Not Use an Already Exising Editor?¶
There are currently two implementations of this type of editor that I know of. And researching each one, I decided neither of seem to fit my bill. Or maybe I am too picky.
StackOverflow's WMD¶
The first one I thought of naturally was the StackOverflow implementation. The story behind this editor is quite strange. It was originally developed by John Fraser. For reasons unknown to the interwebs, he has fell off the face of the planet around August 2008 according to Jeff Atwood of StackOverflow. A reverse engineering effort of the code was underway. And from my research, this effort and code is found in three different locations. This raises two questions in my mind..
The legality of the code seems to be a bit of a big question mark. The original code was never released with a license, and since the original author is nowhere to be found, we can only assume it's ownership still belongs to him. There is buzz that it was released under the MIT license, but that is just word of mouth from Jeff Atwood.
How maintainable will the reverse engineered version really be? I took the code from github as it seems like the most up to date version of the code base to date (Oct, 2008). I looked through a bit of source and found myself way in over my head. With regular expressions longer than my widescreen monitor and comments such as "my understanding of how the buttons and callbacks are stored in the array is incomplete." I think I'll leave this effort to the community to continue to maintain. ;)
MarkItUp!¶
Another implementation of a WYSIWYM editor is the MarkItUp! by a Jay Salvat from France. At first glance, the website is quite impressive, easy to find what I am looking for, and its still being maintained which is always a good thing. I already feel this is going smoother than the previous version.
I like how he made the code modular and supports more than just the Markdown syntax. What I didn't like was the implementation of the this in the actual code. It's a great product and I may recommend it to others, but I wasn't completely thrilled. Maybe it's the idea of extending regular expressions to prompt the user questions. While it's cool and sleek to stick questions to use user mixed into your regular expesssions, it's not a path I feel comfortable with. Also the main engine itself didn't seem to offer many of the features I was looking for as it seems limited to about 8 or so different hard-coded options surrounding the current cursor position. It doesn't have any knowledge of the current selected lines (that would be used for code blocks or blockquotes).
My Own Implementation¶
Maybe I truly wasn't happy with the above implementations, or maybe I simply wanted to see if I could actually pull this off myself. This is easily one of the bigger JavaScript projects I took on, thanks to jQuery, I feel much less afraid of actually coding in JavaScript these days.
I tried to keep the implementation modular or expandable as that's what I liked about MarkItUp! I also tried my best to separate simple textarea logic from that of the actual MarkDown syntax. In the end I came up with a general solution I am happy with. You can see the result when posting comments on any of the blogs posts on this site.
Conclusion¶
While not quite not as many features as the StackOverflow version, and not as pretty looking as the MarkItUp version, I am feel like I have a final result I am very happy with. And of course, because I thought of it as something I most likely wouldn't be able to accomplish, I am quite proud of the outcome.
As with any new project there will be many kinks to work out. It's a nice feeling to be one of only three implementations of wysiwym editors out there.
Download¶
Sorry. I took the download down for a few days while I polish it up a bit for a more official way to release the project such as Google code.
Comments¶
Software companies UK
Jan. 14, 2010, 9:54 p.m.
harald
Jan. 19, 2010, 9:55 p.m.
Great post... I'm looking into the same for several weeks now. Your post is a good source for inspiration. Thanks!
Woody Peterson
July 9, 2010, 9:57 p.m.
First of all, thanks, this was awesome. I like it better than wmd because:
- Code is waaaaay better, the documentation for setting it up wasn't great but I figured it out pretty easy by just looking at the code
- It auto-bullets. win. I'm using it in a site where that will be used a lot.
To share my experiences, this is all it took to implement outside of a django/comment environment (using Rails, although that doesn't matter):
$('#recipe_directions').wysiwym(WysiwymMarkdown, 'wysiwymComment');
function markupPreviewLoop() {
// Update the Comment Markup
var markupText = $('#directions').val().escapeHTML();
if (markupText == '') { markupText = " "; }
if (typeof(previousMarkupText) == "undefined" || markupText != previousMarkupText) {
var converter = new Showdown.converter();
var markupHtml = converter.makeHtml(markupText);
$('#directions_preview').html(markupHtml);
previousMarkupText = markupText;
}
setTimeout(markupPreviewLoop, 100);
}
markupPreviewLoop();
Note that this went in my $(document).ready(function() {... block.
Again, nice work.
Also, a design detail I'm trying out that I haven't seen people use is putting the preview above the textarea. It feels like a wysiwyg, although it might be a little weird... I end up watching the page and not the textarea as I type until I have a formatting problem.
Abhisek
July 3, 2011, 8:59 p.m.
This is so awesome! I always wanted something like SO. Thanks for this :)