WYSIWYG Javascript/HTML Editor

Writing and editing documents in your browser, no libraries or plugins!

The editor is really elegant and quiet amazing - just goes to show what you can do .... The reason it's so short and compact (couple of hundred lines), is because it uses the 'execCommand' to perform formatting operations. You don't need to worry about searching for cursor locations, or tracking focus/unfocused elements, it does it all for you!! Damm! Isn't that great.

You can see a live version of the implementation below - shows the editor, live output and the generated html. At the bottom of the page, you can run/edit or test the code to experiment with the features.
Have fun!!

WYSWYG Editor

Text output:

HTML output:

Click on the tab to select the option, edit the scripts in the output underneath (edit and play around with the implementation):

/* Javascript code  .... */

function download(filename, text) {
	/*
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
	*/
	var blob = new Blob([text], {type: "text/plain"});
	var url = window.URL.createObjectURL(blob);
	var a = document.createElement("a");
	a.href = url;
	a.download = filename;
	a.click();
}

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
	typeof define === 'function' && define.amd ? define(['exports'], factory) :
	(factory((global.editor = {})));
}(this, (function (exports) 
{ 
'use strict';

var exec = function exec(command) 
{
  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
  return document.execCommand(command, false, value);
};

var fileReader = new FileReader();
		  fileReader.onload = function(fileLoadedEvent)
		  {
			  var textFromFileLoaded = fileLoadedEvent.target.result;
			  document.getElementById("content").innerHTML = textFromFileLoaded;
			  document.body.removeChild(x);
			  
			  document.getElementById('text-output').innerHTML   = textFromFileLoaded;
			  document.getElementById('html-output').textContent = textFromFileLoaded;
		  };

fileReader.readAsText(fileToLoad, "UTF-8");
		}
		x.click();
	  }
    }
  },
  save: {
    icon: '📥', // &#128229;
    title: 'Save (.htmx)',
    result: function result() {
	  const cont = document.getElementById('content').innerHTML;
	  download('file.htmx', cont);
    }
  }
};

var defaultClasses = {
  actionbar: 'editor-actionbar',
  button: 'editor-button',
  content: 'editor-content',
  selected: 'editor-button-selected'
};

var classes = _extends({}, defaultClasses, settings.classes);

var defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div';

var actionbar       = createElement('div');
  actionbar.className = classes.actionbar;
  appendChild(settings.element, actionbar);

var content = settings.element.content = createElement('div');
  content.id              = 'content';
  content.contentEditable = true;
  content.className       = classes.content;
  content.oninput         = function (_ref) 
  {
     var firstChild = _ref.target.firstChild;

if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>');else if (content.innerHTML === ' ') content.innerHTML = '';
 settings.onChange(content.innerHTML);
 };
 content.onkeydown = function (event) {
 if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
 setTimeout(function () {
 return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
 }, 0);
 }
 };
 appendChild(settings.element, content);

actions.forEach(function (action) 
  {
    var button       = createElement('button');
    button.className = classes.button;
    button.innerHTML = action.icon;
    button.title     = action.title;
    button.setAttribute('type', 'button');
    button.onclick   = function () 
	{
      return action.result() && content.focus();
    };

if (action.state) 
	{
      var handler = function handler() 
	  {
        return button.classList[action.state() ? 'add' : 'remove'](classes.selected);
      };
      addEventListener(content, 'keyup',   handler);
      addEventListener(content, 'mouseup', handler);
      addEventListener(button,  'click',   handler);
    }

appendChild(actionbar, button);
  });

if (settings.styleWithCSS) exec('styleWithCSS');
  exec(defaultParagraphSeparatorString, defaultParagraphSeparator);

return settings.element;
};

var editor = { exec: exec, init: init };

exports.exec = exec;
exports.init = init;
exports['default'] = editor;

Object.defineProperty(exports, '__esModule', { value: true });

})));
	
var editor = window.editor.init({
	element: document.getElementById('editor'),
	defaultParagraphSeparator: 'p',
	onChange: function (html) {
		document.getElementById('text-output').innerHTML   = html;
		document.getElementById('html-output').textContent = html;
	}
});

Possible extra features to add:
* Add the option to change the font size
* Add button to set the color of selected words
* Add code syntax highlighting (e.g., see References, PrismJS)
* Add undo/redo option (already supported by the commandExec, just got to add the extra few lines)

References

* Misc Javascript Tutorials [Link]
* Online Editor/Compiler [Link]
* Beautiful Code Highlighting [Link]

Advert (Support Website)

Visitor: