quill.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  1. $(function () {
  2. window.addDocumentModalFormHtml = $(this).find("form").html();
  3. window.menu_save = $("#markdown-save");
  4. window.uploader = null;
  5. window.editor = new Quill('#docEditor', {
  6. theme: 'snow',
  7. syntax: true,
  8. modules : {
  9. toolbar :"#editormd-tools"
  10. }
  11. });
  12. window.editor.on("text-change",function () {
  13. resetEditorChanged(true);
  14. });
  15. var $editorEle = $("#editormd-tools");
  16. $editorEle.find(".ql-undo").on("click",function () {
  17. window.editor.history.undo();
  18. });
  19. $editorEle.find(".ql-redo").on("click",function () {
  20. window.editor.history.redo();
  21. });
  22. uploadImage("docEditor", function ($state, $res) {
  23. if ($state === "before") {
  24. return layer.load(1, {
  25. shade: [0.1, '#fff'] // 0.1 透明度的白色背景
  26. });
  27. } else if ($state === "success") {
  28. if ($res.errcode === 0) {
  29. var range = window.editor.getSelection();
  30. window.editor.insertEmbed(range.index, 'image', $res.url);
  31. }
  32. }
  33. });
  34. $("#btnRelease").on("click",function () {
  35. if (Object.prototype.toString.call(window.documentCategory) === '[object Array]' && window.documentCategory.length > 0) {
  36. if ($("#markdown-save").hasClass('change')) {
  37. var comfirm_result = confirm("编辑内容未保存,需要保存吗?")
  38. if (comfirm_result) {
  39. saveDocument(false, releaseBook);
  40. return;
  41. }
  42. }
  43. releaseBook();
  44. } else {
  45. layer.msg("没有需要发布的文档")
  46. }
  47. });
  48. /**
  49. * 实现自定义图片上传
  50. */
  51. window.editor.getModule('toolbar').addHandler('image',function () {
  52. var input = document.createElement('input');
  53. input.setAttribute('type', 'file');
  54. input.click();
  55. // Listen upload local image and save to server
  56. input.onchange = function () {
  57. var file = input.files[0];
  58. // file type is only image.
  59. if (/^image\//.test(file.type)) {
  60. var form = new FormData();
  61. form.append('editormd-image-file', file, file.name);
  62. var layerIndex = 0;
  63. $.ajax({
  64. url: window.imageUploadURL,
  65. type: "POST",
  66. dataType: "json",
  67. data: form,
  68. processData: false,
  69. contentType: false,
  70. error: function() {
  71. layer.close(layerIndex);
  72. layer.msg("图片上传失败");
  73. },
  74. success: function(data) {
  75. layer.close(layerIndex);
  76. if(data.errcode !== 0){
  77. layer.msg(data.message);
  78. }else{
  79. var range = window.editor.getSelection();
  80. window.editor.insertEmbed(range.index, 'image', data.url);
  81. }
  82. }
  83. });
  84. } else {
  85. console.warn('You could only upload images.');
  86. }
  87. };
  88. });
  89. /**
  90. * 实现保存
  91. */
  92. window.menu_save.on("click",function () {if($(this).hasClass('change')){saveDocument();}});
  93. /**
  94. * 设置编辑器变更状态
  95. * @param $is_change
  96. */
  97. function resetEditorChanged($is_change) {
  98. if ($is_change && !window.isLoad) {
  99. $("#markdown-save").removeClass('disabled').addClass('change');
  100. } else {
  101. $("#markdown-save").removeClass('change').addClass('disabled');
  102. }
  103. window.isLoad = false;
  104. }
  105. /***
  106. * 加载指定的文档到编辑器中
  107. * @param $node
  108. */
  109. function loadDocument($node) {
  110. var index = layer.load(1, {
  111. shade: [0.1,'#fff'] //0.1透明度的白色背景
  112. });
  113. $.get(window.editURL + $node.node.id ).done(function (res) {
  114. layer.close(index);
  115. if(res.errcode === 0){
  116. window.isLoad = true;
  117. window.editor.root.innerHTML = res.data.content;
  118. // 将原始内容备份
  119. window.source = res.data.content;
  120. var node = { "id" : res.data.doc_id,'parent' : res.data.parent_id === 0 ? '#' : res.data.parent_id ,"text" : res.data.doc_name,"identify" : res.data.identify,"version" : res.data.version};
  121. pushDocumentCategory(node);
  122. window.selectNode = node;
  123. window.isLoad = true;
  124. pushVueLists(res.data.attach);
  125. initHighlighting();
  126. }else{
  127. layer.msg("文档加载失败");
  128. }
  129. }).fail(function () {
  130. layer.close(index);
  131. layer.msg("文档加载失败");
  132. });
  133. }
  134. /**
  135. * 保存文档到服务器
  136. * @param $is_cover 是否强制覆盖
  137. * @param callback
  138. */
  139. function saveDocument($is_cover,callback) {
  140. var index = null;
  141. var node = window.selectNode;
  142. var html = window.editor.root.innerHTML;
  143. var content = "";
  144. if($.trim(html) !== ""){
  145. content = toMarkdown(html, { gfm: true });
  146. }
  147. var version = "";
  148. if(!node){
  149. layer.msg("获取当前文档信息失败");
  150. return;
  151. }
  152. var doc_id = parseInt(node.id);
  153. for(var i in window.documentCategory){
  154. var item = window.documentCategory[i];
  155. if(item.id === doc_id){
  156. version = item.version;
  157. break;
  158. }
  159. }
  160. $.ajax({
  161. beforeSend : function () {
  162. index = layer.load(1, {shade: [0.1,'#fff'] });
  163. },
  164. url : window.editURL,
  165. data : {"identify" : window.book.identify,"doc_id" : doc_id,"markdown" : content,"html" : html,"cover" : $is_cover ? "yes":"no","version": version},
  166. type :"post",
  167. dataType :"json",
  168. success : function (res) {
  169. layer.close(index);
  170. if(res.errcode === 0){
  171. for(var i in window.documentCategory){
  172. var item = window.documentCategory[i];
  173. if(item.id === doc_id){
  174. window.documentCategory[i].version = res.data.version;
  175. break;
  176. }
  177. }
  178. resetEditorChanged(false);
  179. // 更新内容备份
  180. window.source = res.data.content;
  181. if(typeof callback === "function"){
  182. callback();
  183. }
  184. }else if(res.errcode === 6005){
  185. var confirmIndex = layer.confirm('文档已被其他人修改确定覆盖已存在的文档吗?', {
  186. btn: ['确定','取消'] //按钮
  187. }, function(){
  188. layer.close(confirmIndex);
  189. saveDocument(true,callback);
  190. });
  191. }else{
  192. layer.msg(res.message);
  193. }
  194. }
  195. });
  196. }
  197. /**
  198. * 添加顶级文档
  199. */
  200. $("#addDocumentForm").ajaxForm({
  201. beforeSubmit : function () {
  202. var doc_name = $.trim($("#documentName").val());
  203. if (doc_name === ""){
  204. return showError("目录名称不能为空","#add-error-message")
  205. }
  206. window.addDocumentFormIndex = layer.load(1, { shade: [0.1,'#fff'] });
  207. return true;
  208. },
  209. success : function (res) {
  210. if(res.errcode === 0){
  211. var data = { "id" : res.data.doc_id,'parent' : res.data.parent_id === 0 ? '#' : res.data.parent_id ,"text" : res.data.doc_name,"identify" : res.data.identify,"version" : res.data.version};
  212. var node = window.treeCatalog.get_node(data.id);
  213. if(node){
  214. window.treeCatalog.rename_node({"id":data.id},data.text);
  215. }else {
  216. window.treeCatalog.create_node(data.parent, data);
  217. window.treeCatalog.deselect_all();
  218. window.treeCatalog.select_node(data);
  219. }
  220. pushDocumentCategory(data);
  221. $("#markdown-save").removeClass('change').addClass('disabled');
  222. $("#addDocumentModal").modal('hide');
  223. }else{
  224. showError(res.message,"#add-error-message")
  225. }
  226. layer.close(window.addDocumentFormIndex);
  227. }
  228. });
  229. /**
  230. * 文档目录树
  231. */
  232. $("#sidebar").jstree({
  233. 'plugins': ["wholerow", "types", 'dnd', 'contextmenu'],
  234. "types": {
  235. "default": {
  236. "icon": false // 删除默认图标
  237. }
  238. },
  239. 'core': {
  240. 'check_callback': true,
  241. "multiple": false,
  242. 'animation': 0,
  243. "data": window.documentCategory
  244. },
  245. "contextmenu": {
  246. show_at_node: false,
  247. select_node: false,
  248. "items": {
  249. "添加文档": {
  250. "separator_before": false,
  251. "separator_after": true,
  252. "_disabled": false,
  253. "label": "添加文档",
  254. "icon": "fa fa-plus",
  255. "action": function (data) {
  256. var inst = $.jstree.reference(data.reference),
  257. node = inst.get_node(data.reference);
  258. openCreateCatalogDialog(node);
  259. }
  260. },
  261. "编辑": {
  262. "separator_before": false,
  263. "separator_after": true,
  264. "_disabled": false,
  265. "label": "编辑",
  266. "icon": "fa fa-edit",
  267. "action": function (data) {
  268. var inst = $.jstree.reference(data.reference);
  269. var node = inst.get_node(data.reference);
  270. openEditCatalogDialog(node);
  271. }
  272. },
  273. "删除": {
  274. "separator_before": false,
  275. "separator_after": true,
  276. "_disabled": false,
  277. "label": "删除",
  278. "icon": "fa fa-trash-o",
  279. "action": function (data) {
  280. var inst = $.jstree.reference(data.reference);
  281. var node = inst.get_node(data.reference);
  282. openDeleteDocumentDialog(node);
  283. }
  284. }
  285. }
  286. }
  287. }).on('loaded.jstree', function () {
  288. window.treeCatalog = $(this).jstree();
  289. var $select_node_id = window.treeCatalog.get_selected();
  290. if ($select_node_id) {
  291. var $select_node = window.treeCatalog.get_node($select_node_id[0])
  292. if ($select_node) {
  293. $select_node.node = {
  294. id: $select_node.id
  295. };
  296. loadDocument($select_node);
  297. }
  298. }
  299. }).on('select_node.jstree', function (node, selected, event) {
  300. if(window.menu_save.hasClass('change')) {
  301. if(confirm("编辑内容未保存,需要保存吗?")){
  302. saveDocument(false,function () {
  303. loadDocument(selected);
  304. });
  305. return true;
  306. }
  307. }
  308. loadDocument(selected);
  309. }).on("move_node.jstree", jstree_save)
  310. .on("delete_node.jstree",function (node,parent) {
  311. window.isLoad = true;
  312. window.editor.root.innerHTML ='';
  313. });
  314. window.saveDocument = saveDocument;
  315. window.releaseBook = function () {
  316. if(Object.prototype.toString.call(window.documentCategory) === '[object Array]' && window.documentCategory.length > 0){
  317. if(window.menu_save.hasClass('selected')) {
  318. if(confirm("编辑内容未保存,需要保存吗?")) {
  319. saveDocument();
  320. }
  321. }
  322. $.ajax({
  323. url : window.releaseURL,
  324. data :{"identify" : window.book.identify },
  325. type : "post",
  326. dataType : "json",
  327. success : function (res) {
  328. if(res.errcode === 0){
  329. layer.msg("发布任务已推送到任务队列,稍后将在后台执行。");
  330. }else{
  331. layer.msg(res.message);
  332. }
  333. }
  334. });
  335. }else{
  336. layer.msg("没有需要发布的文档")
  337. }
  338. };
  339. });