mirror of
https://github.com/sparksuite/simplemde-markdown-editor.git
synced 2024-06-28 18:30:14 +02:00
Merge pull request #242 from moczolaszlo/development
Optional prompt windows to Link and Image
This commit is contained in:
commit
8618543fab
|
@ -93,6 +93,7 @@ simplemde.value("This text will appear in the editor");
|
||||||
- **underscoresBreakWords**: If set to `true`, let underscores be a delimiter for separating words. Defaults to `false`.
|
- **underscoresBreakWords**: If set to `true`, let underscores be a delimiter for separating words. Defaults to `false`.
|
||||||
- **placeholder**: Custom placeholder that should be displayed
|
- **placeholder**: Custom placeholder that should be displayed
|
||||||
- **previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
|
- **previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
|
||||||
|
- **promptURLs**: If set to `true`, a prompt window come if you insert link or image. Defaults to `false`.
|
||||||
- **renderingConfig**: Adjust settings for parsing the Markdown during previewing (not editing).
|
- **renderingConfig**: Adjust settings for parsing the Markdown during previewing (not editing).
|
||||||
- **singleLineBreaks**: If set to `false`, disable parsing GFM single line breaks. Defaults to `true`.
|
- **singleLineBreaks**: If set to `false`, disable parsing GFM single line breaks. Defaults to `true`.
|
||||||
- **codeSyntaxHighlighting**: If set to `true`, will highlight using [highlight.js](https://github.com/isagalaev/highlight.js). Defaults to `false`. To use this feature you must include highlight.js on your page. For example, include the script and the CSS files like:<br>`<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>`<br>`<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">`
|
- **codeSyntaxHighlighting**: If set to `true`, will highlight using [highlight.js](https://github.com/isagalaev/highlight.js). Defaults to `false`. To use this feature you must include highlight.js on your page. For example, include the script and the CSS files like:<br>`<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>`<br>`<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">`
|
||||||
|
@ -145,6 +146,7 @@ var simplemde = new SimpleMDE({
|
||||||
|
|
||||||
return "Loading...";
|
return "Loading...";
|
||||||
},
|
},
|
||||||
|
promptURLs: true, // Show a prompt window to insert URL for link or image
|
||||||
renderingConfig: {
|
renderingConfig: {
|
||||||
singleLineBreaks: false,
|
singleLineBreaks: false,
|
||||||
codeSyntaxHighlighting: true,
|
codeSyntaxHighlighting: true,
|
||||||
|
|
|
@ -171,7 +171,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The fake, visible scrollbars. Used to force redraw during scrolling
|
/* The fake, visible scrollbars. Used to force redraw during scrolling
|
||||||
before actuall scrolling happens, thus preventing shaking and
|
before actual scrolling happens, thus preventing shaking and
|
||||||
flickering artifacts. */
|
flickering artifacts. */
|
||||||
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
2
dist/simplemde.min.css
vendored
2
dist/simplemde.min.css
vendored
File diff suppressed because one or more lines are too long
16
dist/simplemde.min.js
vendored
16
dist/simplemde.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -616,7 +616,14 @@ function drawLink(editor) {
|
||||||
var cm = editor.codemirror;
|
var cm = editor.codemirror;
|
||||||
var stat = getState(cm);
|
var stat = getState(cm);
|
||||||
var options = editor.options;
|
var options = editor.options;
|
||||||
_replaceSelection(cm, stat.link, options.insertTexts.link);
|
var url = "http://";
|
||||||
|
if(options.promptURLs) {
|
||||||
|
url = prompt(options.promptTexts.link);
|
||||||
|
if(!url) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
_replaceSelection(cm, stat.link, options.insertTexts.link, url);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -626,7 +633,14 @@ function drawImage(editor) {
|
||||||
var cm = editor.codemirror;
|
var cm = editor.codemirror;
|
||||||
var stat = getState(cm);
|
var stat = getState(cm);
|
||||||
var options = editor.options;
|
var options = editor.options;
|
||||||
_replaceSelection(cm, stat.image, options.insertTexts.image);
|
var url = "http://";
|
||||||
|
if(options.promptURLs) {
|
||||||
|
url = prompt(options.promptTexts.image);
|
||||||
|
if(!url) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
_replaceSelection(cm, stat.image, options.insertTexts.image, url);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -770,7 +784,7 @@ function togglePreview(editor) {
|
||||||
toggleSideBySide(editor);
|
toggleSideBySide(editor);
|
||||||
}
|
}
|
||||||
|
|
||||||
function _replaceSelection(cm, active, startEnd) {
|
function _replaceSelection(cm, active, startEnd, url) {
|
||||||
if(/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
|
if(/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
|
||||||
return;
|
return;
|
||||||
|
|
||||||
|
@ -779,6 +793,9 @@ function _replaceSelection(cm, active, startEnd) {
|
||||||
var end = startEnd[1];
|
var end = startEnd[1];
|
||||||
var startPoint = cm.getCursor("start");
|
var startPoint = cm.getCursor("start");
|
||||||
var endPoint = cm.getCursor("end");
|
var endPoint = cm.getCursor("end");
|
||||||
|
if(url) {
|
||||||
|
end = end.replace("#url#", url);
|
||||||
|
}
|
||||||
if(active) {
|
if(active) {
|
||||||
text = cm.getLine(startPoint.line);
|
text = cm.getLine(startPoint.line);
|
||||||
start = text.slice(0, startPoint.ch);
|
start = text.slice(0, startPoint.ch);
|
||||||
|
@ -1220,12 +1237,17 @@ var toolbarBuiltInButtons = {
|
||||||
};
|
};
|
||||||
|
|
||||||
var insertTexts = {
|
var insertTexts = {
|
||||||
link: ["[", "](http://)"],
|
link: ["[", "](#url#)"],
|
||||||
image: ["![](http://", ")"],
|
image: ["![", "](#url#)"],
|
||||||
table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"],
|
table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"],
|
||||||
horizontalRule: ["", "\n\n-----\n\n"]
|
horizontalRule: ["", "\n\n-----\n\n"]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var promptTexts = {
|
||||||
|
link: "URL for the link:",
|
||||||
|
image: "URL of the image:"
|
||||||
|
};
|
||||||
|
|
||||||
var blockStyles = {
|
var blockStyles = {
|
||||||
"bold": "**",
|
"bold": "**",
|
||||||
"code": "```",
|
"code": "```",
|
||||||
|
@ -1327,6 +1349,10 @@ function SimpleMDE(options) {
|
||||||
options.insertTexts = extend({}, insertTexts, options.insertTexts || {});
|
options.insertTexts = extend({}, insertTexts, options.insertTexts || {});
|
||||||
|
|
||||||
|
|
||||||
|
// Merging the promptTexts, with the given options
|
||||||
|
options.promptTexts = promptTexts;
|
||||||
|
|
||||||
|
|
||||||
// Merging the blockStyles, with the given options
|
// Merging the blockStyles, with the given options
|
||||||
options.blockStyles = extend({}, blockStyles, options.blockStyles || {});
|
options.blockStyles = extend({}, blockStyles, options.blockStyles || {});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue