You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

237 lines
7.8 KiB

3 years ago
  1. /*!
  2. * Code block dialog plugin for Editor.md
  3. *
  4. * @file code-block-dialog.js
  5. * @author pandao
  6. * @version 1.2.0
  7. * @updateTime 2015-03-07
  8. * {@link https://github.com/pandao/editor.md}
  9. * @license MIT
  10. */
  11. (function() {
  12. var factory = function (exports) {
  13. var cmEditor;
  14. var pluginName = "code-block-dialog";
  15. // for CodeBlock dialog select
  16. var codeLanguages = exports.codeLanguages = {
  17. asp : ["ASP", "vbscript"],
  18. actionscript : ["ActionScript(3.0)/Flash/Flex", "clike"],
  19. bash : ["Bash/Bat", "shell"],
  20. css : ["CSS", "css"],
  21. c : ["C", "clike"],
  22. cpp : ["C++", "clike"],
  23. csharp : ["C#", "clike"],
  24. coffeescript : ["CoffeeScript", "coffeescript"],
  25. d : ["D", "d"],
  26. dart : ["Dart", "dart"],
  27. delphi : ["Delphi/Pascal", "pascal"],
  28. erlang : ["Erlang", "erlang"],
  29. go : ["Golang", "go"],
  30. groovy : ["Groovy", "groovy"],
  31. html : ["HTML", "text/html"],
  32. java : ["Java", "clike"],
  33. json : ["JSON", "text/json"],
  34. javascript : ["Javascript", "javascript"],
  35. lua : ["Lua", "lua"],
  36. less : ["LESS", "css"],
  37. markdown : ["Markdown", "gfm"],
  38. "objective-c" : ["Objective-C", "clike"],
  39. php : ["PHP", "php"],
  40. perl : ["Perl", "perl"],
  41. python : ["Python", "python"],
  42. r : ["R", "r"],
  43. rst : ["reStructedText", "rst"],
  44. ruby : ["Ruby", "ruby"],
  45. sql : ["SQL", "sql"],
  46. sass : ["SASS/SCSS", "sass"],
  47. shell : ["Shell", "shell"],
  48. scala : ["Scala", "clike"],
  49. swift : ["Swift", "clike"],
  50. vb : ["VB/VBScript", "vb"],
  51. xml : ["XML", "text/xml"],
  52. yaml : ["YAML", "yaml"]
  53. };
  54. exports.fn.codeBlockDialog = function() {
  55. var _this = this;
  56. var cm = this.cm;
  57. var lang = this.lang;
  58. var editor = this.editor;
  59. var settings = this.settings;
  60. var cursor = cm.getCursor();
  61. var selection = cm.getSelection();
  62. var classPrefix = this.classPrefix;
  63. var dialogName = classPrefix + pluginName, dialog;
  64. var dialogLang = lang.dialog.codeBlock;
  65. cm.focus();
  66. if (editor.find("." + dialogName).length > 0)
  67. {
  68. dialog = editor.find("." + dialogName);
  69. dialog.find("option:first").attr("selected", "selected");
  70. dialog.find("textarea").val(selection);
  71. this.dialogShowMask(dialog);
  72. this.dialogLockScreen();
  73. dialog.show();
  74. }
  75. else
  76. {
  77. var dialogHTML = "<div class=\"" + classPrefix + "code-toolbar\">" +
  78. dialogLang.selectLabel + "<select><option selected=\"selected\" value=\"\">" + dialogLang.selectDefaultText + "</option></select>" +
  79. "</div>" +
  80. "<textarea placeholder=\"coding now....\" style=\"display:none;\">" + selection + "</textarea>";
  81. dialog = this.createDialog({
  82. name : dialogName,
  83. title : dialogLang.title,
  84. width : 780,
  85. height : 565,
  86. mask : settings.dialogShowMask,
  87. drag : settings.dialogDraggable,
  88. content : dialogHTML,
  89. lockScreen : settings.dialogLockScreen,
  90. maskStyle : {
  91. opacity : settings.dialogMaskOpacity,
  92. backgroundColor : settings.dialogMaskBgColor
  93. },
  94. buttons : {
  95. enter : [lang.buttons.enter, function() {
  96. var codeTexts = this.find("textarea").val();
  97. var langName = this.find("select").val();
  98. if (langName === "")
  99. {
  100. alert(lang.dialog.codeBlock.unselectedLanguageAlert);
  101. return false;
  102. }
  103. if (codeTexts === "")
  104. {
  105. alert(lang.dialog.codeBlock.codeEmptyAlert);
  106. return false;
  107. }
  108. langName = (langName === "other") ? "" : langName;
  109. cm.replaceSelection(["```" + langName, codeTexts, "```"].join("\n"));
  110. if (langName === "") {
  111. cm.setCursor(cursor.line, cursor.ch + 3);
  112. }
  113. this.hide().lockScreen(false).hideMask();
  114. return false;
  115. }],
  116. cancel : [lang.buttons.cancel, function() {
  117. this.hide().lockScreen(false).hideMask();
  118. return false;
  119. }]
  120. }
  121. });
  122. }
  123. var langSelect = dialog.find("select");
  124. if (langSelect.find("option").length === 1)
  125. {
  126. for (var key in codeLanguages)
  127. {
  128. var codeLang = codeLanguages[key];
  129. langSelect.append("<option value=\"" + key + "\" mode=\"" + codeLang[1] + "\">" + codeLang[0] + "</option>");
  130. }
  131. langSelect.append("<option value=\"other\">" + dialogLang.otherLanguage + "</option>");
  132. }
  133. var mode = langSelect.find("option:selected").attr("mode");
  134. var cmConfig = {
  135. mode : (mode) ? mode : "text/html",
  136. theme : settings.theme,
  137. tabSize : 4,
  138. autofocus : true,
  139. autoCloseTags : true,
  140. indentUnit : 4,
  141. lineNumbers : true,
  142. lineWrapping : true,
  143. extraKeys : {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
  144. foldGutter : true,
  145. gutters : ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
  146. matchBrackets : true,
  147. indentWithTabs : true,
  148. styleActiveLine : true,
  149. styleSelectedText : true,
  150. autoCloseBrackets : true,
  151. showTrailingSpace : true,
  152. highlightSelectionMatches : true
  153. };
  154. var textarea = dialog.find("textarea");
  155. var cmObj = dialog.find(".CodeMirror");
  156. if (dialog.find(".CodeMirror").length < 1)
  157. {
  158. cmEditor = exports.$CodeMirror.fromTextArea(textarea[0], cmConfig);
  159. cmObj = dialog.find(".CodeMirror");
  160. cmObj.css({
  161. "float" : "none",
  162. margin : "8px 0",
  163. border : "1px solid #ddd",
  164. fontSize : settings.fontSize,
  165. width : "100%",
  166. height : "390px"
  167. });
  168. cmEditor.on("change", function(cm) {
  169. textarea.val(cm.getValue());
  170. });
  171. }
  172. else
  173. {
  174. cmEditor.setValue(cm.getSelection());
  175. }
  176. langSelect.change(function(){
  177. var _mode = $(this).find("option:selected").attr("mode");
  178. cmEditor.setOption("mode", _mode);
  179. });
  180. };
  181. };
  182. // CommonJS/Node.js
  183. if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
  184. {
  185. module.exports = factory;
  186. }
  187. else if (typeof define === "function") // AMD/CMD/Sea.js
  188. {
  189. if (define.amd) { // for Require.js
  190. define(["editormd"], function(editormd) {
  191. factory(editormd);
  192. });
  193. } else { // for Sea.js
  194. define(function(require) {
  195. var editormd = require("./../../editormd");
  196. factory(editormd);
  197. });
  198. }
  199. }
  200. else
  201. {
  202. factory(window.editormd);
  203. }
  204. })();