Custom WYSIWYG Editor

I am so sick of WYSIWYG editors being exclusively for the latest browser or being huge with every option under the sun. I tried to make my own, using code I found online as well as a little of my own handy work.

This is what I came up with:

http://jsfiddle.net/spadez/RRBHw/1/

```
/*
* WYSIWYG EDITOR BASED ON JQUERY RTE
*/

// define the rte light plugin
(function ($) {

if (typeof $.fn.rte === "undefined") {

var defaults = {
max_height: 350
};

$.fn.rte = function (options) {

$.fn.rte.html = function (iframe) {
return iframe.contentWindow.document.getElementsByTagName("body")[0].innerHTML;
};

// build main options before element iteration
var opts = $.extend(defaults, options);

// iterate and construct the RTEs
return this.each(function () {
var textarea = $(this);
var iframe;
var element_id = textarea.attr("id");

// enable design mode
function enableDesignMode() {

var content = textarea.val();

// Mozilla needs this to display caret
if ($.trim(content) === '') {
content = '';
}

// already created? show/hide
if (iframe) {
console.log("already created");
textarea.hide();
$(iframe).contents().find("body").html(content);
$(iframe).show();
$("#toolbar-" + element_id).remove();
textarea.before(toolbar());
return true;
}

// for compatibility reasons, need to be created this way
iframe = document.createElement("iframe");
iframe.frameBorder = 0;
iframe.

Just three quick notes about clean code, not a complete review:

-
You could extract out some functions which would make some comments unnecessary, like:

// IE selections
// Mozilla selections

Just create functions for them, like ieSelections and mozillaSelections.

-
I'd introduce an explanatory variable here:

if (iframe.contentWindow.document.selection) ...

For example:

var isInternetExplorer = iframe.contentWindow.document.selection;
if (isInternetExplorer) ...

Reference: Chapter 6. Composing Methods, Introduce Explaining Variable in Refactoring: Improving the Design of Existing Code by Martin Fowler:


Put the result of the expression, or parts of the expression,
in a temporary variable with a name that explains the purpose.

And Clean Code by Robert C. Martin, G19: Use Explanatory Variables.

-
This comment also seems unnecessary:

// enable design mode now
enableDesignMode();

The name of the function also says that.

StackExchange Code Review Q#28882, answer score: 4