Articles RSS Feed

Blite Blog

Blite : a lightweight blog app

Implementing a WYSIWYG Editor in Blite

Posted 21 Apr 2012, 6:13 pm in Blite Development

It's easy isn't it? Just copy 'n' paste some code into the sub_post.tpl template and you're done. WYSIWYG editing!

But really it's not that easy. At least for me. Essentially there's three issues...

  1. Markup style. I like to format my blog posts with paragraphs and CSS styling. But most WYSIWYG editors will implement logical tags like <H1>which make no (logical) sense within a blog post, and the dreaded, deprecated <font> tag. I have no use for either. The markup style used by an editor relates to the DOM model it implements. Simple, small editors leverage the DOM of user's browser. This is efficient but is limiting and sometimes produces different results on different browsers. Large editors like tinyMCE implement their own DOM and provide much great control and customization of the HTML & CSS output.
     
  2. Ability to customize. Simple, small editors are (relatively) easy to customize, usually by hacking the source js or by providing a stylesheet at runtime. But "hacking the source js" isn't something I expect you to do. Instead, I want to provide something that you can easily customize without delving into source code. Large editors (again, like tinyMCE) offer skins and themes and myriad opportunities for customization. But it's too much of a good thing. "Skinning" one of these big editors is a nightmare. I just want to blog, not spend a week trying to get it look right!
     
  3. Code handling. I want to be able to post raw HTML and programming code and not have it munged by a WYSIWYG editor. Stuff like <?php echo "Hello World!"; ?>.
    Put that snippet into any WYSIWYG editor and it'll get munged. Unless you use a big editor with the right plugin and get it exactly right -- Uh huh.

So what's the solution? Use a small editor and live with the crappy markup? Or a heavy editor that gets the markup right but is a bitch to customize? And what to do about that code munging issue?

Look for Blite 0.2 betas coming soon(ish)!

5 Comments
Comments RSS Feed
I must agree with your issues, I hadn't tried posting source code with NicEdit until a draft post last night, and it royally messed things up. I had to clean up the post by editing it in the database directly.

I wouldn't mind the work required to theme a heavier editor if you decided to go with one for Blite. Even doing a Blite theme + matching TinyMCE theme would still be much less fiddly than say, an SMF theme.

If/when you choose a default editor for Blite, I trust your judgement :)
22 Apr 2012, 5:31 am · Permalink
Doug:
Roph: I think I've got something almost usable :) I'll setup a demo this week for you and a few other to play with.
22 Apr 2012, 7:43 pm · Permalink
KuJoe:
Why not use something like BBCode? Here's the code from my sNews-based site: http://pastebin.com/DC4FGrS0
28 Apr 2012, 11:54 am · Permalink
Doug:
Interesting KuJoe, thanks. Though BBCode or any markup/markdown editor isn't the user-experience I'm hoping for. I wanted something wysiwyg to cater to completely non-technical users, while retaining code-editing for those who like that.
28 Apr 2012, 1:33 pm · Permalink
KuJoe:
Gotcha. Just throwing it out there. ;) I'm not a fan of WYSIWYG but I've heard great things about TinyMCE and CKEditor.
28 Apr 2012, 7:59 pm · Permalink
Comments are closed for this post.