Implemented MarkDown Editor

Over the last few months I have been trying a lot of difference WYSIWYG editors available, and have eventually been driven mad by them all. Between editors incorrectly deciding what if valid HTML to editors outright stripping out HTML from my pages, I have had enough.

So I started to research alternative editors. Something that allowed me to format documents easily, but still allowed me to use HTML when applicable. In the end the only real choice out there was MarkDown (or some minor variation/flavour of that).

MarkDown gives many advantages to me

  1. I can quickly format a document without the need of opening and closing xml/markup tags
  2. I do not have to worry about advanced formatting and colouring features. I am the designer of this site, I can simply change or add a style if I want something to display differently.
  3. I can use the browsers native spell checking. Something that a lot of WYSIWYG editors are either laking, or require huge external libraries to implement. In the case of TinyMCE, it was a flag that I could turn on, but I still needed to find and turn on that flag.

My Solution

So I began to research MarkDown solutions, and found that it was actually a Python library. So naturally, I decided to try to make my own port in JavaScript / jQuery with limited success (ref: Mark Down Parser | from May 9, 2014). This worked, but I eventually had enough and started looking for an already made solution.

Enter Vue and Marked

I did some research online and found Vue.js http://vuejs.org/ which did exactly what I was looking for. Compiled MarkDown into HTML with the help for Marked.js https://github.com/chjj/marked. With this plugins I was quickly able to implement my new Blog Entry Editor with MarkDown.

new Vue({  
    el: '#editorForm',
    filters: {
        marked: marked
    },
    methods: {
        onKeyUp: function (e) {
            fnUpdatePreview();
        }
    }
});

Quick and easy to implement. Try it out!