Add optional prompts for the number of columns and rows while inserting a table.

This commit is contained in:
Jonatan Kłosko 2016-07-08 14:10:08 +02:00
parent 5081e100a6
commit 9d9a3526e2
2 changed files with 28 additions and 3 deletions

View File

@ -94,6 +94,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.
- **promptTables**: If set to `true`, a JS alert window appears twice asking for the number of columns and rows to generate the table scheme. Defaults to `false`.
- **promptURLs**: If set to `true`, a JS alert window appears asking for the link or image URL. Defaults to `false`. - **promptURLs**: If set to `true`, a JS alert window appears asking for the link or image URL. 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).
- **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">`

View File

@ -651,7 +651,29 @@ function drawTable(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.table, options.insertTexts.table); if(options.promptTables) {
var columns = parseInt(prompt(options.promptTexts.tableColumns));
if(isNaN(columns) || columns <= 0) {
return false;
}
var rows = parseInt(prompt(options.promptTexts.tableRows));
if(isNaN(rows) || rows <= 0) {
return false;
}
// Build the table.
var tableString = "\n\n|";
for(var i = 1; i <= columns; ++i) {
tableString += " Column " + i + " |";
}
tableString += "\n|" + " --------------- |".repeat(columns);
var rowString = "\n|" + " Text |".repeat(columns);
tableString += rowString.repeat(rows);
tableString += "\n\n";
_replaceSelection(cm, stat.table, ["", tableString]);
} else {
_replaceSelection(cm, stat.table, options.insertTexts.table);
}
} }
/** /**
@ -1249,7 +1271,9 @@ var insertTexts = {
var promptTexts = { var promptTexts = {
link: "URL for the link:", link: "URL for the link:",
image: "URL of the image:" image: "URL of the image:",
tableColumns: "The number of columns:",
tableRows: "The number of rows:"
}; };
var blockStyles = { var blockStyles = {