quill.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  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. 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};
  119. if(res.data.is_lock){
  120. node.type = "lock";
  121. node.text = node.text + "<span class='lock-text'> [锁定]</span>";
  122. }else{
  123. node.type = "unlock";
  124. }
  125. // 将原始内容备份
  126. window.source = res.data.content;
  127. pushDocumentCategory(node);
  128. window.selectNode = node;
  129. window.isLoad = true;
  130. pushVueLists(res.data.attach);
  131. initHighlighting();
  132. }else{
  133. layer.msg("文档加载失败");
  134. }
  135. }).fail(function () {
  136. layer.close(index);
  137. layer.msg("文档加载失败");
  138. });
  139. }
  140. /**
  141. * 保存文档到服务器
  142. * @param $is_cover 是否强制覆盖
  143. * @param callback
  144. */
  145. function saveDocument($is_cover,callback) {
  146. var index = null;
  147. var node = window.selectNode;
  148. var html = window.editor.root.innerHTML;
  149. var content = "";
  150. if($.trim(html) !== ""){
  151. content = toMarkdown(html, { gfm: true });
  152. }
  153. var version = "";
  154. if(!node){
  155. layer.msg("获取当前文档信息失败");
  156. return;
  157. }
  158. var doc_id = parseInt(node.id);
  159. for(var i in window.documentCategory){
  160. var item = window.documentCategory[i];
  161. if(item.id === doc_id){
  162. version = item.version;
  163. break;
  164. }
  165. }
  166. $.ajax({
  167. beforeSend : function () {
  168. index = layer.load(1, {shade: [0.1,'#fff'] });
  169. },
  170. url : window.editURL,
  171. data : {"identify" : window.book.identify,"doc_id" : doc_id,"markdown" : content,"html" : html,"cover" : $is_cover ? "yes":"no","version": version},
  172. type :"post",
  173. dataType :"json",
  174. success : function (res) {
  175. layer.close(index);
  176. if(res.errcode === 0){
  177. for(var i in window.documentCategory){
  178. var item = window.documentCategory[i];
  179. if(item.id === doc_id){
  180. window.documentCategory[i].version = res.data.version;
  181. break;
  182. }
  183. }
  184. resetEditorChanged(false);
  185. // 更新内容备份
  186. window.source = res.data.content;
  187. if(typeof callback === "function"){
  188. callback();
  189. }
  190. }else if(res.errcode === 6005){
  191. var confirmIndex = layer.confirm('文档已被其他人修改确定覆盖已存在的文档吗?', {
  192. btn: ['确定','取消'] //按钮
  193. }, function(){
  194. layer.close(confirmIndex);
  195. saveDocument(true,callback);
  196. });
  197. }else{
  198. layer.msg(res.message);
  199. }
  200. }
  201. });
  202. }
  203. /**
  204. * 添加顶级文档
  205. */
  206. $("#addDocumentForm").ajaxForm({
  207. beforeSubmit : function () {
  208. var doc_name = $.trim($("#documentName").val());
  209. if (doc_name === ""){
  210. return showError("目录名称不能为空","#add-error-message")
  211. }
  212. window.addDocumentFormIndex = layer.load(1, { shade: [0.1,'#fff'] });
  213. return true;
  214. },
  215. success : function (res) {
  216. if(res.errcode === 0){
  217. 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};
  218. var node = window.treeCatalog.get_node(data.id);
  219. if(node){
  220. window.treeCatalog.rename_node({"id":data.id},data.text);
  221. }else {
  222. window.treeCatalog.create_node(data.parent, data);
  223. window.treeCatalog.deselect_all();
  224. window.treeCatalog.select_node(data);
  225. }
  226. pushDocumentCategory(data);
  227. $("#markdown-save").removeClass('change').addClass('disabled');
  228. $("#addDocumentModal").modal('hide');
  229. }else{
  230. showError(res.message,"#add-error-message")
  231. }
  232. layer.close(window.addDocumentFormIndex);
  233. }
  234. });
  235. /**
  236. * 文档目录树
  237. */
  238. $("#sidebar").jstree({
  239. 'plugins': ["wholerow", "types", 'dnd', 'contextmenu'],
  240. "types": {
  241. "default": {
  242. "icon": false // 删除默认图标
  243. }
  244. },
  245. 'core': {
  246. 'check_callback': true,
  247. "multiple": false,
  248. 'animation': 0,
  249. "data": window.documentCategory
  250. },
  251. "contextmenu": {
  252. show_at_node: false,
  253. select_node: false,
  254. "items": {
  255. "添加文档": {
  256. "separator_before": false,
  257. "separator_after": true,
  258. "_disabled": false,
  259. "label": "添加文档",
  260. "icon": "fa fa-plus",
  261. "action": function (data) {
  262. var inst = $.jstree.reference(data.reference),
  263. node = inst.get_node(data.reference);
  264. openCreateCatalogDialog(node);
  265. }
  266. },
  267. "编辑": {
  268. "separator_before": false,
  269. "separator_after": true,
  270. "_disabled": false,
  271. "label": "编辑",
  272. "icon": "fa fa-edit",
  273. "action": function (data) {
  274. var inst = $.jstree.reference(data.reference);
  275. var node = inst.get_node(data.reference);
  276. openEditCatalogDialog(node);
  277. }
  278. },
  279. "删除": {
  280. "separator_before": false,
  281. "separator_after": true,
  282. "_disabled": false,
  283. "label": "删除",
  284. "icon": "fa fa-trash-o",
  285. "action": function (data) {
  286. var inst = $.jstree.reference(data.reference);
  287. var node = inst.get_node(data.reference);
  288. openDeleteDocumentDialog(node);
  289. }
  290. }
  291. }
  292. }
  293. }).on('loaded.jstree', function () {
  294. window.treeCatalog = $(this).jstree();
  295. var $select_node_id = window.treeCatalog.get_selected();
  296. if ($select_node_id) {
  297. var $select_node = window.treeCatalog.get_node($select_node_id[0])
  298. if ($select_node) {
  299. $select_node.node = {
  300. id: $select_node.id
  301. };
  302. loadDocument($select_node);
  303. }
  304. }
  305. }).on('select_node.jstree', function (node, selected, event) {
  306. if(window.menu_save.hasClass('change')) {
  307. if(confirm("编辑内容未保存,需要保存吗?")){
  308. saveDocument(false,function () {
  309. loadDocument(selected);
  310. });
  311. return true;
  312. }
  313. }
  314. loadDocument(selected);
  315. }).on("move_node.jstree", jstree_save)
  316. .on("delete_node.jstree",function (node,parent) {
  317. window.isLoad = true;
  318. window.editor.root.innerHTML ='';
  319. });
  320. window.saveDocument = saveDocument;
  321. window.releaseBook = function () {
  322. if(Object.prototype.toString.call(window.documentCategory) === '[object Array]' && window.documentCategory.length > 0){
  323. if(window.menu_save.hasClass('selected')) {
  324. if(confirm("编辑内容未保存,需要保存吗?")) {
  325. saveDocument();
  326. }
  327. }
  328. $.ajax({
  329. url : window.releaseURL,
  330. data :{"identify" : window.book.identify },
  331. type : "post",
  332. dataType : "json",
  333. success : function (res) {
  334. if(res.errcode === 0){
  335. layer.msg("发布任务已推送到任务队列,稍后将在后台执行。");
  336. }else{
  337. layer.msg(res.message);
  338. }
  339. }
  340. });
  341. }else{
  342. layer.msg("没有需要发布的文档")
  343. }
  344. };
  345. });