maratishe.github.io WYSIWYG Editor for Your GitHub Pages Author: maratishe@gmail.com -- created 141220

Just finished the WYSIWYG editor which runs locally and needs no internet, cloud storage, or anything else that is commonly on the list of requirements of popular tools of this class.

The software described below is at this GitHub project . As it says above, it will just run locally and will allow you copy the raw HTML of the outcome.

GitHub Pages and Blogging Evolution

Let me recall the evolution I went through since the release of GitHub Pages a couple of months ago.

First, there was Blogger > GitHub migration. Blogger used to do all my formatting and hosting which I now have to do myself. I start using Dillinger as a WYSIWYG editor for my pages and then process .md files into HTML files which I then process into my own pages.

Then, completely tired of the .md > .html conversion as well as the clumsy Markdown environment of Dillinger (I got out of StackEdit for the same exact reason), I migrate Dillinger > Local WYSIWYG using the code I wrote myself.

Content Editable in HTML5

In modern browsers, you can simply edit contents of any tag, say <div> , by changing the attribute of the tag to editable . Yes, it is that easy! Then, you can edit the contents any way you what in a fully WYSIWYG environment. Major difference from StackEdit and Dillinger are:

You can drag-n-drop or even copy-paste images or screenshots into the box you are editing.
You can add your own HTML (css, etc.) into the window you are editing. I use a fixed template (same as in this format). Change stub.html if you want to make your own template.
When the box you are editing and the outcome are out of sync, you can just sync them right there. In this case all the special formatting you used will disappear, replaced with the resulting HTML.

The Editor

I just copy-pasted the screenshot of this very page. This is exactly how this software works. Just like in Dillinger or StackEdit*, the page is split into two parts, where the left part is the editable box and the right side is the resulting view. The view is synced by parsing HTML every 3 seconds.

The software has some features which I did not mention above. Just use it and see how it goes. Some functionality is on the page as slides on the left side. Special formatting is in rules.js which is loaded once at the beginning. You can add your own editing rules if you want to. I have the few codes I use for my blogs.

That's it. Enjoy.

Written with my own local WYSIWYG editor.