From 8dd626227476e7213ec1ec24be468d55f9089adf Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Thu, 3 Sep 2015 17:59:50 -0500 Subject: [PATCH] Simplified previewRender option --- README.md | 8 ++------ src/js/simplemde.js | 22 ++++++++++++++-------- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 7cc8bfe..a80c4d2 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,6 @@ And then load SimpleMDE on the first textarea on a page ```HTML ``` @@ -43,7 +42,6 @@ Pure JavaScript method ```HTML ``` @@ -52,7 +50,6 @@ jQuery method ```HTML ``` @@ -103,9 +100,8 @@ var simplemde = new SimpleMDE({ unique_id: "MyUniqueID", delay: 1000, }, - previewRender: function(simplemde, preview) { - var plainText = simplemde.value(); - preview.innerHTML = customParser(plainText); // Use a custom function for parsing Markdown + previewRender: function(plainText) { + return customMarkdownParser(plainText); // Returns HTML from a custom parser } }); ``` diff --git a/src/js/simplemde.js b/src/js/simplemde.js index e2c422a..9a3b3bd 100644 --- a/src/js/simplemde.js +++ b/src/js/simplemde.js @@ -331,11 +331,11 @@ function toggleSideBySide(editor) { } // Start preview with the current text - editor.options.previewRender(editor, preview); + preview.innerHTML = editor.options.previewRender(editor.value()); // Updates preview cm.on('update', function() { - editor.options.previewRender(editor, preview); + preview.innerHTML = editor.options.previewRender(editor.value()); }); } @@ -371,7 +371,7 @@ function togglePreview(editor) { toolbar.className += ' active'; toolbar_div.className += ' disabled-for-preview'; } - editor.options.previewRender(editor, preview); + preview.innerHTML = editor.options.previewRender(editor.value()); // Turn off side by side if needed var sidebyside = cm.getWrapperElement().nextSibling; @@ -726,7 +726,11 @@ var toolbar = ["bold", "italic", "heading", "|", "quote", "unordered-list", "ord */ function SimpleMDE(options) { options = options || {}; + + // Used later to refer to it's parent + options.parent = this; + // Find the textarea to use if(options.element) { this.element = options.element; } else if(options.element === null) { @@ -735,6 +739,7 @@ function SimpleMDE(options) { return; } + // Handle toolbar and status bar if(options.toolbar !== false) options.toolbar = options.toolbar || SimpleMDE.toolbar; @@ -742,17 +747,18 @@ function SimpleMDE(options) { options.status = ['autosave', 'lines', 'words', 'cursor']; } + // Add default preview rendering function if(!options.previewRender) { - options.previewRender = function(simplemde, preview) { - var plainText = simplemde.value(); - preview.innerHTML = simplemde.markdown(plainText); + options.previewRender = function(plainText) { + // Note: 'this' refers to the options object + return this.parent.markdown(plainText); } } - + // Update this options this.options = options; - // If user has passed an element, it should auto rendered + // Auto render this.render(); // The codemirror component is only available after rendering