How to set the value of GhostDown Markdown editor

Question

I'm working on a simple note taking application and using GhostDown Markdown editor. It's pretty nice, I like it, but I am stuck trying to set it's value programatically.

I can get values out pretty easily. $('.entry-markdown-content textarea').val()

Setting it however is another story... :(

Prototype of what I'm working on can be seen at http://potusnotes.com

Answer 1

For the editor part, Ghost-Markdown-Editor uses CodeMirror editor. So, to set value programmatically, we would call CodeMirror's instance and do

editor.setValue(txt);

But how to get that CM instance? It was created by the widget with which Ghost-Markdown-Editor was created. See jquery.ghostdown.js file:

$.widget( "b4m.ghostDown", {
    editor: null,
    // ...
    _create: function() {
        // ...
        this.editor = CodeMirror.fromTextArea(this.element.find('textarea')[0], {
            mode: 'markdown',
            tabMode: 'indent',
            lineWrapping: true
        });
    }

}

As the widget was made with jQuery Widget factory, a widget instance is kept inside .data("plugin-name") element of the object it was used on.

Thus we can access widget instance and set editor value like this:

var ghostdown = $(".editor").data("b4m-ghostDown");
ghostdown.editor.setValue("# Hello, SO");

Or simply

$(".editor").data("b4m-ghostDown").editor.setValue("# Hello, SO");