From dab6f31d01d1548dd04586fba9a861e5317f4e5d Mon Sep 17 00:00:00 2001 From: Minho Date: Wed, 24 Jan 2018 19:41:59 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=AF=8C=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/css/markdown.css | 3 +- static/js/quill.js | 273 ++++++++++++++++++++++ static/quill/quill.icons.js | 5 + static/quill/quill.js | 3 + views/document/new_html_edit_template.tpl | 170 +++++--------- 5 files changed, 337 insertions(+), 117 deletions(-) create mode 100644 static/js/quill.js diff --git a/static/css/markdown.css b/static/css/markdown.css index fe24f160..782f9f05 100644 --- a/static/css/markdown.css +++ b/static/css/markdown.css @@ -33,13 +33,14 @@ body{ width: 280px; position: fixed; border-top: 1px solid #DDDDDD; - bottom: 0px; + bottom: 0; top: 40px; background-color: #FAFAFA; left: 0; right: 0; padding-bottom: 15px; overflow-y:auto; + z-index: 999; } .manual-category .manual-nav { font-size: 14px; diff --git a/static/js/quill.js b/static/js/quill.js new file mode 100644 index 00000000..1e46a3a0 --- /dev/null +++ b/static/js/quill.js @@ -0,0 +1,273 @@ +$(function () { + window.addDocumentModalFormHtml = $(this).find("form").html(); + window.menu_save = $("#markdown-save"); + window.uploader = null; + window.editor = new Quill('#docEditor', { + theme: 'snow', + modules : { + toolbar :"#editormd-tools" + } + }); + window.editor.on("editor-change",function () { + resetEditorChanged(true); + }); + window.menu_save.on("click",function () { + if($(this).hasClass('change')){ + saveDocument(); + } + }); + /** + * 设置编辑器变更状态 + * @param $is_change + */ + function resetEditorChanged($is_change) { + if ($is_change && !window.isLoad) { + $("#markdown-save").removeClass('disabled').addClass('change'); + } else { + $("#markdown-save").removeClass('change').addClass('disabled'); + } + window.isLoad = false; + } + + /*** + * 加载指定的文档到编辑器中 + * @param $node + */ + function loadDocument($node) { + var index = layer.load(1, { + shade: [0.1,'#fff'] //0.1透明度的白色背景 + }); + + $.get(window.editURL + $node.node.id ).done(function (res) { + layer.close(index); + + if(res.errcode === 0){ + window.isLoad = true; + window.editor.setContents([{ insert: res.data.content }]); + + // 将原始内容备份 + window.source = res.data.content; + 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}; + pushDocumentCategory(node); + window.selectNode = node; + + pushVueLists(res.data.attach); + + }else{ + layer.msg("文档加载失败"); + } + }).fail(function () { + layer.close(index); + layer.msg("文档加载失败"); + }); + } + + /** + * 保存文档到服务器 + * @param $is_cover 是否强制覆盖 + */ + function saveDocument($is_cover,callback) { + var index = null; + var node = window.selectNode; + + var html = window.editor.getContents(); + + var content = ""; + if($.trim(html) !== ""){ + content = toMarkdown(html, { gfm: true }); + } + var version = ""; + + if(!node){ + layer.msg("获取当前文档信息失败"); + return; + } + var doc_id = parseInt(node.id); + + for(var i in window.documentCategory){ + var item = window.documentCategory[i]; + + if(item.id === doc_id){ + version = item.version; + break; + } + } + $.ajax({ + beforeSend : function () { + index = layer.load(1, {shade: [0.1,'#fff'] }); + }, + url : window.editURL, + data : {"identify" : window.book.identify,"doc_id" : doc_id,"markdown" : content,"html" : html,"cover" : $is_cover ? "yes":"no","version": version}, + type :"post", + dataType :"json", + success : function (res) { + layer.close(index); + if(res.errcode === 0){ + for(var i in window.documentCategory){ + var item = window.documentCategory[i]; + + if(item.id === doc_id){ + window.documentCategory[i].version = res.data.version; + break; + } + } + // 更新内容备份 + window.source = res.data.content; + // 触发编辑器 onchange 回调函数 + window.editor.onchange(); + if(typeof callback === "function"){ + callback(); + } + }else if(res.errcode === 6005){ + var confirmIndex = layer.confirm('文档已被其他人修改确定覆盖已存在的文档吗？', { + btn: ['确定','取消'] //按钮 + }, function(){ + layer.close(confirmIndex); + saveDocument(true,callback); + }); + }else{ + layer.msg(res.message); + } + } + }); + } + + + /** + * 添加顶级文档 + */ + $("#addDocumentForm").ajaxForm({ + beforeSubmit : function () { + var doc_name = $.trim($("#documentName").val()); + if (doc_name === ""){ + return showError("目录名称不能为空","#add-error-message") + } + window.addDocumentFormIndex = layer.load(1, { shade: [0.1,'#fff'] }); + return true; + }, + success : function (res) { + if(res.errcode === 0){ + + 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}; + + var node = window.treeCatalog.get_node(data.id); + if(node){ + window.treeCatalog.rename_node({"id":data.id},data.text); + + }else { + window.treeCatalog.create_node(data.parent, data); + window.treeCatalog.deselect_all(); + window.treeCatalog.select_node(data); + } + pushDocumentCategory(data); + $("#markdown-save").removeClass('change').addClass('disabled'); + $("#addDocumentModal").modal('hide'); + }else{ + showError(res.message,"#add-error-message") + } + layer.close(window.addDocumentFormIndex); + } + }); + + /** + * 文档目录树 + */ + $("#sidebar").jstree({ + 'plugins': ["wholerow", "types", 'dnd', 'contextmenu'], + "types": { + "default": { + "icon": false // 删除默认图标 + } + }, + 'core': { + 'check_callback': true, + "multiple": false, + 'animation': 0, + "data": window.documentCategory + }, + "contextmenu": { + show_at_node: false, + select_node: false, + "items": { + "添加文档": { + "separator_before": false, + "separator_after": true, + "_disabled": false, + "label": "添加文档", + "icon": "fa fa-plus", + "action": function (data) { + + var inst = $.jstree.reference(data.reference), + node = inst.get_node(data.reference); + + openCreateCatalogDialog(node); + } + }, + "编辑": { + "separator_before": false, + "separator_after": true, + "_disabled": false, + "label": "编辑", + "icon": "fa fa-edit", + "action": function (data) { + var inst = $.jstree.reference(data.reference); + var node = inst.get_node(data.reference); + openEditCatalogDialog(node); + } + }, + "删除": { + "separator_before": false, + "separator_after": true, + "_disabled": false, + "label": "删除", + "icon": "fa fa-trash-o", + "action": function (data) { + var inst = $.jstree.reference(data.reference); + var node = inst.get_node(data.reference); + openDeleteDocumentDialog(node); + } + } + } + } + }).on('loaded.jstree', function () { + window.treeCatalog = $(this).jstree(); + }).on('select_node.jstree', function (node, selected, event) { + if(window.menu_save.hasClass('selected')) { + if(confirm("编辑内容未保存，需要保存吗？")){ + saveDocument(false,function () { + loadDocument(selected); + }); + return true; + } + } + loadDocument(selected); + + }).on("move_node.jstree", jstree_save); + + window.saveDocument = saveDocument; + + window.releaseBook = function () { + if(Object.prototype.toString.call(window.documentCategory) === '[object Array]' && window.documentCategory.length > 0){ + if(window.menu_save.hasClass('selected')) { + if(confirm("编辑内容未保存，需要保存吗？")) { + saveDocument(); + } + } + $.ajax({ + url : window.releaseURL, + data :{"identify" : window.book.identify }, + type : "post", + dataType : "json", + success : function (res) { + if(res.errcode === 0){ + layer.msg("发布任务已推送到任务队列，稍后将在后台执行。"); + }else{ + layer.msg(res.message); + } + } + }); + }else{ + layer.msg("没有需要发布的文档") + } + }; +}); \ No newline at end of file diff --git a/static/quill/quill.icons.js b/static/quill/quill.icons.js index 4d2b8e09..9e0d4ae2 100644 --- a/static/quill/quill.icons.js +++ b/static/quill/quill.icons.js @@ -12,4 +12,9 @@ icons.header[6] = '\n' + ' \n' + ''; + icons.font = '\n' + + ' \n' + + ' \n' + + ' \n' + + ''; })(); \ No newline at end of file diff --git a/static/quill/quill.js b/static/quill/quill.js index 0370f8b5..bdbf03e5 100644 --- a/static/quill/quill.js +++ b/static/quill/quill.js @@ -9654,6 +9654,9 @@ var Tooltip = function () { key: 'position', value: function position(reference) { var left = reference.left + reference.width / 2 - this.root.offsetWidth / 2; + if(left <= 0){ + left = 0; + } // root.scrollTop should be 0 if scrollContainer !== root var top = reference.bottom + this.quill.root.scrollTop; this.root.style.left = left + 'px'; diff --git a/views/document/new_html_edit_template.tpl b/views/document/new_html_edit_template.tpl index 0d8b1449..3faa9aaf 100644 --- a/views/document/new_html_edit_template.tpl +++ b/views/document/new_html_edit_template.tpl @@ -41,7 +41,15 @@