mirror of
https://github.com/sparksuite/simplemde-markdown-editor.git
synced 2024-06-28 10:20:05 +02:00
Merge pull request #82 from brondsem/pluggable_preview_func
Make preview rendering be customizable
This commit is contained in:
commit
eec0f55969
|
@ -81,6 +81,7 @@ simplemde.value();
|
||||||
- **enabled**: If set to `true`, autosave the text. Defaults to `false`.
|
- **enabled**: If set to `true`, autosave the text. Defaults to `false`.
|
||||||
- **unique_id**: You must set a unique identifier so that SimpleMDE can autosave. Something that separates this from other textareas.
|
- **unique_id**: You must set a unique identifier so that SimpleMDE can autosave. Something that separates this from other textareas.
|
||||||
- **delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s).
|
- **delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s).
|
||||||
|
- **preview_render**: A custom function to render the preview mode contents.
|
||||||
|
|
||||||
```JavaScript
|
```JavaScript
|
||||||
var simplemde = new SimpleMDE({
|
var simplemde = new SimpleMDE({
|
||||||
|
@ -102,6 +103,7 @@ var simplemde = new SimpleMDE({
|
||||||
unique_id: "MyUniqueID",
|
unique_id: "MyUniqueID",
|
||||||
delay: 1000,
|
delay: 1000,
|
||||||
},
|
},
|
||||||
|
preview_render: my_custom_preview_function,
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -331,12 +331,11 @@ function toggleSideBySide(editor) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Start preview with the current text
|
// Start preview with the current text
|
||||||
var parse = editor.constructor.markdown;
|
editor.options.preview_render(editor, preview);
|
||||||
preview.innerHTML = parse(cm.getValue());
|
|
||||||
|
|
||||||
// Updates preview
|
// Updates preview
|
||||||
cm.on('update', function() {
|
cm.on('update', function() {
|
||||||
preview.innerHTML = parse(cm.getValue());
|
editor.options.preview_render(editor, preview);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -349,7 +348,6 @@ function togglePreview(editor) {
|
||||||
var wrapper = cm.getWrapperElement();
|
var wrapper = cm.getWrapperElement();
|
||||||
var toolbar_div = wrapper.previousSibling;
|
var toolbar_div = wrapper.previousSibling;
|
||||||
var toolbar = editor.toolbarElements.preview;
|
var toolbar = editor.toolbarElements.preview;
|
||||||
var parse = editor.constructor.markdown;
|
|
||||||
var preview = wrapper.lastChild;
|
var preview = wrapper.lastChild;
|
||||||
if(!/editor-preview/.test(preview.className)) {
|
if(!/editor-preview/.test(preview.className)) {
|
||||||
preview = document.createElement('div');
|
preview = document.createElement('div');
|
||||||
|
@ -373,8 +371,7 @@ function togglePreview(editor) {
|
||||||
toolbar.className += ' active';
|
toolbar.className += ' active';
|
||||||
toolbar_div.className += ' disabled-for-preview';
|
toolbar_div.className += ' disabled-for-preview';
|
||||||
}
|
}
|
||||||
var text = cm.getValue();
|
editor.options.preview_render(editor, preview);
|
||||||
preview.innerHTML = parse(text);
|
|
||||||
|
|
||||||
// Turn off side by side if needed
|
// Turn off side by side if needed
|
||||||
var sidebyside = cm.getWrapperElement().nextSibling;
|
var sidebyside = cm.getWrapperElement().nextSibling;
|
||||||
|
@ -745,6 +742,14 @@ function SimpleMDE(options) {
|
||||||
options.status = ['autosave', 'lines', 'words', 'cursor'];
|
options.status = ['autosave', 'lines', 'words', 'cursor'];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(!options.preview_render) {
|
||||||
|
options.preview_render = function(editor, preview) {
|
||||||
|
var text = editor.codemirror.getValue();
|
||||||
|
preview.innerHTML = editor.markdown(text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
this.options = options;
|
this.options = options;
|
||||||
|
|
||||||
// If user has passed an element, it should auto rendered
|
// If user has passed an element, it should auto rendered
|
||||||
|
@ -766,7 +771,7 @@ SimpleMDE.toolbar = toolbar;
|
||||||
/**
|
/**
|
||||||
* Default markdown render.
|
* Default markdown render.
|
||||||
*/
|
*/
|
||||||
SimpleMDE.markdown = function(text) {
|
SimpleMDE.prototype.markdown = function(text) {
|
||||||
if(window.marked) {
|
if(window.marked) {
|
||||||
// Update options
|
// Update options
|
||||||
if(this.options.singleLineBreaks !== false) {
|
if(this.options.singleLineBreaks !== false) {
|
||||||
|
|
Loading…
Reference in a new issue