preformatted-text-dialog.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. /*!
  2. * Preformatted text dialog plugin for Editor.md
  3. *
  4. * @file preformatted-text-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 = "preformatted-text-dialog";
  15. exports.fn.preformattedTextDialog = function() {
  16. var _this = this;
  17. var cm = this.cm;
  18. var lang = this.lang;
  19. var editor = this.editor;
  20. var settings = this.settings;
  21. var cursor = cm.getCursor();
  22. var selection = cm.getSelection();
  23. var classPrefix = this.classPrefix;
  24. var dialogLang = lang.dialog.preformattedText;
  25. var dialogName = classPrefix + pluginName, dialog;
  26. cm.focus();
  27. if (editor.find("." + dialogName).length > 0)
  28. {
  29. dialog = editor.find("." + dialogName);
  30. dialog.find("textarea").val(selection);
  31. this.dialogShowMask(dialog);
  32. this.dialogLockScreen();
  33. dialog.show();
  34. }
  35. else
  36. {
  37. var dialogContent = "<textarea placeholder=\"coding now....\" style=\"display:none;\">" + selection + "</textarea>";
  38. dialog = this.createDialog({
  39. name : dialogName,
  40. title : dialogLang.title,
  41. width : 780,
  42. height : 540,
  43. mask : settings.dialogShowMask,
  44. drag : settings.dialogDraggable,
  45. content : dialogContent,
  46. lockScreen : settings.dialogLockScreen,
  47. maskStyle : {
  48. opacity : settings.dialogMaskOpacity,
  49. backgroundColor : settings.dialogMaskBgColor
  50. },
  51. buttons : {
  52. enter : [lang.buttons.enter, function() {
  53. var codeTexts = this.find("textarea").val();
  54. if (codeTexts === "")
  55. {
  56. alert(dialogLang.emptyAlert);
  57. return false;
  58. }
  59. codeTexts = codeTexts.split("\n");
  60. for (var i in codeTexts)
  61. {
  62. codeTexts[i] = " " + codeTexts[i];
  63. }
  64. codeTexts = codeTexts.join("\n");
  65. if (cursor.ch !== 0) {
  66. codeTexts = "\r\n\r\n" + codeTexts;
  67. }
  68. cm.replaceSelection(codeTexts);
  69. this.hide().lockScreen(false).hideMask();
  70. return false;
  71. }],
  72. cancel : [lang.buttons.cancel, function() {
  73. this.hide().lockScreen(false).hideMask();
  74. return false;
  75. }]
  76. }
  77. });
  78. }
  79. var cmConfig = {
  80. mode : "text/html",
  81. theme : settings.theme,
  82. tabSize : 4,
  83. autofocus : true,
  84. autoCloseTags : true,
  85. indentUnit : 4,
  86. lineNumbers : true,
  87. lineWrapping : true,
  88. extraKeys : {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
  89. foldGutter : true,
  90. gutters : ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
  91. matchBrackets : true,
  92. indentWithTabs : true,
  93. styleActiveLine : true,
  94. styleSelectedText : true,
  95. autoCloseBrackets : true,
  96. showTrailingSpace : true,
  97. highlightSelectionMatches : true
  98. };
  99. var textarea = dialog.find("textarea");
  100. var cmObj = dialog.find(".CodeMirror");
  101. if (dialog.find(".CodeMirror").length < 1)
  102. {
  103. cmEditor = exports.$CodeMirror.fromTextArea(textarea[0], cmConfig);
  104. cmObj = dialog.find(".CodeMirror");
  105. cmObj.css({
  106. "float" : "none",
  107. margin : "0 0 5px",
  108. border : "1px solid #ddd",
  109. fontSize : settings.fontSize,
  110. width : "100%",
  111. height : "410px"
  112. });
  113. cmEditor.on("change", function(cm) {
  114. textarea.val(cm.getValue());
  115. });
  116. }
  117. else
  118. {
  119. cmEditor.setValue(cm.getSelection());
  120. }
  121. };
  122. };
  123. // CommonJS/Node.js
  124. if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
  125. {
  126. module.exports = factory;
  127. }
  128. else if (typeof define === "function") // AMD/CMD/Sea.js
  129. {
  130. if (define.amd) { // for Require.js
  131. define(["editormd"], function(editormd) {
  132. factory(editormd);
  133. });
  134. } else { // for Sea.js
  135. define(function(require) {
  136. var editormd = require("./../../editormd");
  137. factory(editormd);
  138. });
  139. }
  140. }
  141. else
  142. {
  143. factory(window.editormd);
  144. }
  145. })();