blog.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. $(function () {
  2. editormd.katexURL = {
  3. js : window.katex.js,
  4. css : window.katex.css
  5. };
  6. window.editor = editormd("docEditor", {
  7. width: "100%",
  8. height: "100%",
  9. path: window.editormdLib,
  10. toolbar: true,
  11. placeholder: "本编辑器支持 Markdown 编辑,左边编写,右边预览。",
  12. imageUpload: true,
  13. imageFormats: ["jpg", "jpeg", "gif", "png", "JPG", "JPEG", "GIF", "PNG"],
  14. imageUploadURL: window.imageUploadURL,
  15. toolbarModes: "full",
  16. fileUpload: true,
  17. fileUploadURL: window.fileUploadURL,
  18. taskList: true,
  19. flowChart: true,
  20. htmlDecode: "style,script,iframe,title,onmouseover,onmouseout,style",
  21. lineNumbers: false,
  22. sequenceDiagram: true,
  23. highlightStyle: window.highlightStyle ? window.highlightStyle : "github",
  24. tocStartLevel: 1,
  25. tocm: true,
  26. tex:true,
  27. saveHTMLToTextarea: true,
  28. onload: function() {
  29. this.hideToolbar();
  30. var keyMap = {
  31. "Ctrl-S": function(cm) {
  32. saveBlog(false);
  33. },
  34. "Cmd-S": function(cm){
  35. saveBlog(false);
  36. },
  37. "Ctrl-A": function(cm) {
  38. cm.execCommand("selectAll");
  39. }
  40. };
  41. this.addKeyMap(keyMap);
  42. uploadImage("docEditor", function ($state, $res) {
  43. if ($state === "before") {
  44. return layer.load(1, {
  45. shade: [0.1, '#fff'] // 0.1 透明度的白色背景
  46. });
  47. } else if ($state === "success") {
  48. if ($res.errcode === 0) {
  49. var value = '![](' + $res.url + ')';
  50. window.editor.insertValue(value);
  51. }
  52. }
  53. });
  54. },
  55. onchange: function () {
  56. resetEditorChanged(true);
  57. }
  58. });
  59. /**
  60. * 实现标题栏操作
  61. */
  62. $("#editormd-tools").on("click", "a[class!='disabled']", function () {
  63. var name = $(this).find("i").attr("name");
  64. if (name === "attachment") {
  65. $("#uploadAttachModal").modal("show");
  66. }else if (name === "save") {
  67. saveBlog(false);
  68. } else if (name === "template") {
  69. $("#documentTemplateModal").modal("show");
  70. } else if (name === "tasks") {
  71. // 插入 GFM 任务列表
  72. var cm = window.editor.cm;
  73. var selection = cm.getSelection();
  74. if (selection === "") {
  75. cm.replaceSelection("- [x] " + selection);
  76. } else {
  77. var selectionText = selection.split("\n");
  78. for (var i = 0, len = selectionText.length; i < len; i++) {
  79. selectionText[i] = (selectionText[i] === "") ? "" : "- [x] " + selectionText[i];
  80. }
  81. cm.replaceSelection(selectionText.join("\n"));
  82. }
  83. } else {
  84. var action = window.editor.toolbarHandlers[name];
  85. if (action !== "undefined") {
  86. $.proxy(action, window.editor)();
  87. window.editor.focus();
  88. }
  89. }
  90. }) ;
  91. /**
  92. * 保存文章
  93. * @param $is_cover
  94. */
  95. function saveBlog($is_cover) {
  96. var content = window.editor.getMarkdown();
  97. var html = window.editor.getPreviewedHTML();
  98. $.ajax({
  99. beforeSend: function () {
  100. index = layer.load(1, { shade: [0.1, '#fff'] });
  101. },
  102. url: window.editURL,
  103. data: { "blogId": window.blogId,"content": content,"htmlContent": html, "cover": $is_cover ? "yes" : "no","version" : window.blogVersion},
  104. type: "post",
  105. timeout : 30000,
  106. dataType: "json",
  107. success: function ($res) {
  108. layer.close(index);
  109. if ($res.errcode === 0) {
  110. resetEditorChanged(false);
  111. window.blogVersion = $res.data.version;
  112. console.log(window.blogVersion);
  113. } else if($res.errcode === 6005) {
  114. var confirmIndex = layer.confirm('文档已被其他人修改确定覆盖已存在的文档吗?', {
  115. btn: ['确定', '取消'] // 按钮
  116. }, function() {
  117. layer.close(confirmIndex);
  118. saveBlog(true);
  119. });
  120. } else {
  121. layer.msg(res.message);
  122. }
  123. },
  124. error : function (XMLHttpRequest, textStatus, errorThrown) {
  125. layer.close(index);
  126. layer.msg("服务器错误:" + errorThrown);
  127. }
  128. });
  129. }
  130. /**
  131. * 设置编辑器变更状态
  132. * @param $is_change
  133. */
  134. function resetEditorChanged($is_change) {
  135. if ($is_change && !window.isLoad) {
  136. $("#markdown-save").removeClass('disabled').addClass('change');
  137. } else {
  138. $("#markdown-save").removeClass('change').addClass('disabled');
  139. }
  140. window.isLoad = false;
  141. }
  142. /**
  143. * 打开文档模板
  144. */
  145. $("#documentTemplateModal").on("click", ".section>a[data-type]", function () {
  146. var $this = $(this).attr("data-type");
  147. var body = $("#template-" + $this).html();
  148. if (body) {
  149. window.isLoad = true;
  150. window.editor.clear();
  151. window.editor.insertValue(body);
  152. window.editor.setCursor({ line: 0, ch: 0 });
  153. resetEditorChanged(true);
  154. }
  155. $("#documentTemplateModal").modal('hide');
  156. });
  157. });