Netsyms/simplemde-markdown-editor
2
0
Fork 0
mirror of https://github.com/sparksuite/simplemde-markdown-editor.git synced 2025-07-31 13:54:28 -06:00
Code Issues Releases Wiki Activity

Simplified previewRender option

Browse Source
This commit is contained in:
Wes Cossick 2015-09-03 17:59:50 -05:00
parent 2737ab0808
commit 8dd6262274
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -32,7 +32,6 @@ And then load SimpleMDE on the first textarea on a page
```HTML ```HTML
<script> <script>
var simplemde = new SimpleMDE(); var simplemde = new SimpleMDE();
simplemde.render();
</script> </script>
``` ```
@ -43,7 +42,6 @@ Pure JavaScript method
```HTML ```HTML
<script> <script>
var simplemde = new SimpleMDE({ element: document.getElementById("MyID") }); var simplemde = new SimpleMDE({ element: document.getElementById("MyID") });
simplemde.render();
</script> </script>
``` ```
@ -52,7 +50,6 @@ jQuery method
```HTML ```HTML
<script> <script>
var simplemde = new SimpleMDE({ element: $("#MyID")[0] }); var simplemde = new SimpleMDE({ element: $("#MyID")[0] });
simplemde.render();
</script> </script>
``` ```
@ -103,9 +100,8 @@ var simplemde = new SimpleMDE({
unique_id: "MyUniqueID", unique_id: "MyUniqueID",
delay: 1000, delay: 1000,
}, },
previewRender: function(simplemde, preview) { previewRender: function(plainText) {
var plainText = simplemde.value(); return customMarkdownParser(plainText); // Returns HTML from a custom parser
preview.innerHTML = customParser(plainText); // Use a custom function for parsing Markdown
} }
}); });
``` ```

22
src/js/simplemde.js
View File

@ -331,11 +331,11 @@ function toggleSideBySide(editor) {
} }
// Start preview with the current text // Start preview with the current text
editor.options.previewRender(editor, preview); preview.innerHTML = editor.options.previewRender(editor.value());
// Updates preview // Updates preview
cm.on('update', function() { 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.className += ' active';
toolbar_div.className += ' disabled-for-preview'; 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 // Turn off side by side if needed
var sidebyside = cm.getWrapperElement().nextSibling; var sidebyside = cm.getWrapperElement().nextSibling;
@ -726,7 +726,11 @@ var toolbar = ["bold", "italic", "heading", "|", "quote", "unordered-list", "ord
*/ */
function SimpleMDE(options) { function SimpleMDE(options) {
options = options || {}; options = options || {};
// Used later to refer to it's parent
options.parent = this;
// Find the textarea to use
if(options.element) { if(options.element) {
this.element = options.element; this.element = options.element;
} else if(options.element === null) { } else if(options.element === null) {
@ -735,6 +739,7 @@ function SimpleMDE(options) {
return; return;
} }
// Handle toolbar and status bar
if(options.toolbar !== false) if(options.toolbar !== false)
options.toolbar = options.toolbar || SimpleMDE.toolbar; options.toolbar = options.toolbar || SimpleMDE.toolbar;
@ -742,17 +747,18 @@ function SimpleMDE(options) {
options.status = ['autosave', 'lines', 'words', 'cursor']; options.status = ['autosave', 'lines', 'words', 'cursor'];
} }
// Add default preview rendering function
if(!options.previewRender) { if(!options.previewRender) {
options.previewRender = function(simplemde, preview) { options.previewRender = function(plainText) {
var plainText = simplemde.value(); // Note: 'this' refers to the options object
preview.innerHTML = simplemde.markdown(plainText); return this.parent.markdown(plainText);
} }
} }
// Update this options
this.options = options; this.options = options;
// If user has passed an element, it should auto rendered // Auto render
this.render(); this.render();
// The codemirror component is only available after rendering // The codemirror component is only available after rendering