lsm/mindoc
1
0
Fork 0
mirror of https://github.com/mindoc-org/mindoc.git synced 2026-02-27 17:03:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

实现文档编辑

Browse Source
This commit is contained in:
Minho
2017-04-27 18:19:37 +08:00
parent 8c85227c30
commit ca1b1a4b83
18 changed files with 1095 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
static/css/jstree.css Normal file
View File

@@ -0,0 +1,196 @@
.jstree-contextmenu{
z-index: 999999;
}
.jstree-contextmenu {
z-index: 3000
}
.jstree-contextmenu.jstree-default-contextmenu {
border: 1px solid #d6d6d6;
box-shadow: 0 0 8px rgba(99,99,99,.3);
background-color: #f6f6f6;
padding: 0
}
.jstree-contextmenu.jstree-default-contextmenu li {
display: block
}
.jstree-contextmenu.jstree-default-contextmenu .vakata-context-separator {
display: none
}
.jstree-contextmenu.jstree-default-contextmenu .vakata-contextmenu-sep {
display: none
}
.jstree-contextmenu.jstree-default-contextmenu li a {
border-bottom: 0;
height: 30px;
line-height: 24px;
padding-top: 3px;
padding-bottom: 3px
}
.jstree-contextmenu.jstree-default-contextmenu li.vakata-context-hover a {
text-shadow: none;
background: #116cd6;
box-shadow: none;
color: #fff
}
.jstree-contextmenu.jstree-default-contextmenu li>a>i:empty {
width: 24px;
height: 24px;
line-height: 24px;
vertical-align: middle
}
.jstree .jstree-node .jstree-anchor {
padding-right: 36px;
color: #666
}
.jstree .jstree-node .m-tree-operate {
position: absolute;
right: 6px;
z-index: 100;
display: block
}
.jstree .jstree-node .m-tree-operate .operate-show {
font-size: 20px;
color: #999;
display: none
}
.jstree .jstree-node .m-tree-operate .operate-show i {
height: 24px;
line-height: 24px;
vertical-align: top;
margin-top: 1px;
display: inline-block;
font-size: 18px;
transition-property: transform;
transition-duration: .3s;
transition-timing-function: .3s;
transition-delay: 0s;
-moz-transition-property: transform;
-moz-transition-duration: .3s;
-moz-transition-timing-function: .3s;
-moz-transition-delay: 0s;
-webkit-transition-property: transform;
-webkit-transition-duration: .3s;
-webkit-transition-timing-function: .3s;
-webkit-transition-delay: 0s;
-o-transition-property: transform;
-o-transition-duration: .3s;
-o-transition-timing-function: .3s;
-o-transition-delay: 0s
}
.jstree .jstree-node .m-tree-operate .operate-hide {
width: 0;
right: 100%;
top: 2px;
position: absolute;
overflow: hidden;
transition-property: width;
transition-duration: .3s;
transition-timing-function: linear;
transition-delay: 0s;
-moz-transition-property: width;
-moz-transition-duration: .3s;
-moz-transition-timing-function: linear;
-moz-transition-delay: 0s;
-webkit-transition-property: width;
-webkit-transition-duration: .3s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-property: width;
-o-transition-duration: .3s;
-o-transition-timing-function: linear;
-o-transition-delay: 0s
}
.jstree .jstree-node .m-tree-operate .operate-hide b {
font-size: 12px;
display: inline-block;
margin: 3px 2px 0;
vertical-align: top;
width: 18px;
height: 18px;
text-align: center;
line-height: 18px;
border-radius: 9px;
color: #fff;
cursor: pointer
}
.jstree .jstree-node .m-tree-operate .operate-hide b.add {
background-color: #39f
}
.jstree .jstree-node .m-tree-operate .operate-hide b.del {
background-color: #c00
}
.jstree .jstree-node .m-tree-operate .operate-hide b.edit {
background-color: #e5b120
}
.jstree .jstree-node .m-tree-operate .operate-hide b.up {
background-color: #3e8a2a;
font-size: 18px
}
.jstree .jstree-node .m-tree-operate .operate-hide b.down {
background-color: #3e8a2a;
font-size: 18px
}
.jstree .jstree-node .m-tree-operate:hover .operate-hide {
width: 108px
}
.jstree .jstree-node .m-tree-operate:hover .operate-show i {
color: #333;
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg)
}
.jstree .jstree-node .jstree-anchor.jstree-clicked ,.jstree .jstree-hovered{
color: #ffffff !important;
}
.jstree .jstree-node .m-tree-operate.operate-hover .operate-hide {
width: 108px
}
.jstree-default .jstree-wholerow-clicked {
background: #10af88;
background: -webkit-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
background: linear-gradient(to bottom, #10af88 0%, #10af88 100%);
color: #ffffff;
}
.jstree-default .jstree-wholerow {
height: 30px;
}
.jstree-default .jstree-node {
min-height: 30px;
line-height: 30px;
margin-left: 30px;
min-width: 30px;
}
.jstree-default .jstree-node {
min-height: 30px;
line-height: 30px;
margin-left: 30px;
min-width: 30px;
}
.jstree-default .jstree-anchor {
line-height: 30px;
height: 30px;
}

62
static/css/markdown.css
View File

@@ -4,9 +4,10 @@ body{
left: 0;
right: 0;
bottom: 0;
color: #FAFAFA;
}
.error-message{
color: red;
}
.manual-head{
padding: 5px 5px 5px 5px;
position: fixed;
@@ -18,6 +19,46 @@ body{
border-top: 1px solid #DDDDDD;
bottom: 0;
top: 40px;
background-color: #FAFAFA;
}
.manual-category .manual-nav {
font-size: 14px;
color: #333333;
font-weight: 200;
zoom:1;
border-bottom: 1px solid #ddd
}
.manual-category .manual-tree{
margin-top: 10px;
}
.manual-category .manual-nav .nav-item{
font-size: 14px;
padding: 0 9px;
cursor: pointer;
float: left;
height: 30px;
line-height: 30px;
color: #666;
}
.manual-category .manual-nav .nav-plus {
color: #999;
cursor: pointer;
height: 24px;
width: 24px;
line-height: 24px;
display: inline-block;
margin-top: 4px
}
.manual-category .manual-nav .nav-plus:hover{
color: #333333;
}
.manual-category .manual-nav .nav-item.active{
border-bottom: 1px solid #fafafa;
margin-bottom: -1px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
padding-left: 8px;
padding-right: 8px;
}
.manual-editor-container{
position: absolute;
@@ -26,6 +67,11 @@ body{
right: 0;
bottom: 0;
overflow: hidden;
border-top: 1px solid #DDDDDD;
}
.manual-editor-container .manual-editormd{
position: absolute;
bottom: 15px;
}
.editormd-group{
float: left;
@@ -76,4 +122,16 @@ body{
text-align: center;
font-family: icomoon,Helvetica,Arial,sans-serif;
font-style: normal;
}
.manual-editor-status{
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 30px;
overflow: hidden;
border-left: 1px solid #DDDDDD;
color: #555;
background-color: #FAFAFA;
}

214
static/editor.md/plugins/file-dialog/file-dialog.js Normal file
View File

@@ -0,0 +1,214 @@
/*!
* File (upload) dialog plugin for Editor.md
*
* @file file-dialog.js
* @author minho
* @version 0.1.0
* @updateTime 2017-01-06
* {@link https://github.com/lifei6671/SmartWiki}
* @license MIT
*/
(function() {
var factory = function (exports) {
var pluginName = "file-dialog";
exports.fn.fileDialog = function() {
var _this = this;
var cm = this.cm;
var lang = this.lang;
var editor = this.editor;
var settings = this.settings;
var cursor = cm.getCursor();
var selection = cm.getSelection();
var fileLang = lang.dialog.file;
var classPrefix = this.classPrefix;
var iframeName = classPrefix + "file-iframe";
var dialogName = classPrefix + pluginName, dialog;
cm.focus();
var loading = function(show) {
var _loading = dialog.find("." + classPrefix + "dialog-mask");
_loading[(show) ? "show" : "hide"]();
};
if (editor.find("." + dialogName).length < 1)
{
var guid = (new Date).getTime();
var action = settings.fileUploadURL + (settings.fileUploadURL.indexOf("?") >= 0 ? "&" : "?") + "guid=" + guid;
if (settings.crossDomainUpload)
{
action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-file-dialog-" + guid;
}
var dialogContent = ( (settings.fileUpload) ? "<form action=\"" + action +"\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">" ) +
( (settings.fileUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "" ) +
"<label>文件地址</label>" +
"<input type=\"text\" data-url />" + (function(){
return (settings.fileUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
"<input type=\"file\" name=\"" + classPrefix + "file-file\" />" +
"<input type=\"submit\" value=\"本地上传\" />" +
"</div>" : "";
})() +
"<br/>" +
"<label>文件说明</label>" +
"<input type=\"text\" value=\"" + selection + "\" data-alt />" +
"<br/>" +
"<input type='hidden' data-icon>"+
( (settings.fileUpload) ? "</form>" : "</div>");
//var imageFooterHTML = "<button class=\"" + classPrefix + "btn " + classPrefix + "image-manager-btn\" style=\"float:left;\">" + fileLang.managerButton + "</button>";
dialog = this.createDialog({
title : "文件上传",
width : (settings.fileUpload) ? 465 : 380,
height : 254,
name : dialogName,
content : dialogContent,
mask : settings.dialogShowMask,
drag : settings.dialogDraggable,
lockScreen : settings.dialogLockScreen,
maskStyle : {
opacity : settings.dialogMaskOpacity,
backgroundColor : settings.dialogMaskBgColor
},
buttons : {
enter : [lang.buttons.enter, function() {
var url = this.find("[data-url]").val();
var alt = this.find("[data-alt]").val();
var icon = this.find("[data-icon]").val();
if (url === "")
{
alert(fileLang.fileURLEmpty);
return false;
}
var altAttr = (alt !== "") ? " \"" + alt + "\"" : "";
if (icon === "" || !icon)
{
cm.replaceSelection("[" + alt + "](" + url + altAttr + ")");
}
else
{
cm.replaceSelection("[![" + alt + "](" + icon + ")"+ alt +"](" + url + altAttr + ")");
}
if (alt === "") {
cm.setCursor(cursor.line, cursor.ch + 2);
}
this.hide().lockScreen(false).hideMask();
return false;
}],
cancel : [lang.buttons.cancel, function() {
this.hide().lockScreen(false).hideMask();
return false;
}]
}
});
dialog.attr("id", classPrefix + "file-dialog-" + guid);
if (!settings.fileUpload) {
return ;
}
var fileInput = dialog.find("[name=\"" + classPrefix + "file-file\"]");
fileInput.bind("change", function() {
var fileName = fileInput.val();
if (fileName === "")
{
alert(fileLang.uploadFileEmpty);
return false;
}
loading(true);
var submitHandler = function() {
var uploadIframe = document.getElementById(iframeName);
uploadIframe.onload = function() {
loading(false);
var body = (uploadIframe.contentWindow ? uploadIframe.contentWindow : uploadIframe.contentDocument).document.body;
var json = (body.innerText) ? body.innerText : ( (body.textContent) ? body.textContent : null);
json = (typeof JSON.parse !== "undefined") ? JSON.parse(json) : eval("(" + json + ")");
if(!settings.crossDomainUpload)
{
if (json.success === 1)
{
dialog.find("[data-url]").val(json.url);
json.alt && dialog.find("[data-alt]").val(json.alt);
}
else
{
alert(json.message);
}
}
return false;
};
};
dialog.find("[type=\"submit\"]").bind("click", submitHandler).trigger("click");
});
}
dialog = editor.find("." + dialogName);
dialog.find("[type=\"text\"]").val("");
dialog.find("[type=\"file\"]").val("");
this.dialogShowMask(dialog);
this.dialogLockScreen();
dialog.show();
};
};
// CommonJS/Node.js
if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
{
module.exports = factory;
}
else if (typeof define === "function") // AMD/CMD/Sea.js
{
if (define.amd) { // for Require.js
define(["editormd"], function(editormd) {
factory(editormd);
});
} else { // for Sea.js
define(function(require) {
var editormd = require("./../../editormd");
factory(editormd);
});
}
}
else
{
factory(window.editormd);
}
})();

97
static/editor.md/plugins/video-dialog/video-dialog.js
View File

@@ -1,97 +0,0 @@
/**
* 插入视频插件，编辑器必须开启html识别
*
* @file video-dialog.js
* @author Minho
* @version 0.1
* @licence MIT
*/
(function() {
var factory = function (exports) {
var $ = jQuery;
var pluginName = "video-dialog";
exports.fn.videoDialog = function () {
var _this = this;
var lang = this.lang;
var editor = this.editor;
var settings = this.settings;
var path = settings.pluginPath + pluginName + "/";
var classPrefix = this.classPrefix;
var dialogName = classPrefix + pluginName, dialog;
var dialogLang = lang.dialog.help;
if (editor.find("." + dialogName).length < 1) {
var dialogContent = "";
dialog = this.createDialog({
name: dialogName,
title: dialogLang.title,
width: 840,
height: 540,
mask: settings.dialogShowMask,
drag: settings.dialogDraggable,
content: dialogContent,
lockScreen: settings.dialogLockScreen,
maskStyle: {
opacity: settings.dialogMaskOpacity,
backgroundColor: settings.dialogMaskBgColor
},
buttons: {
close: [lang.buttons.close, function () {
this.hide().lockScreen(false).hideMask();
return false;
}]
}
});
}
dialog = editor.find("." + dialogName);
this.dialogShowMask(dialog);
this.dialogLockScreen();
dialog.show();
var videoContent = dialog.find(".markdown-body");
if (videoContent.html() === "") {
$.get(path + "help.md", function (text) {
var md = exports.$marked(text);
videoContent.html(md);
videoContent.find("a").attr("target", "_blank");
});
}
};
};
// CommonJS/Node.js
if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
{
module.exports = factory;
}
else if (typeof define === "function") // AMD/CMD/Sea.js
{
if (define.amd) { // for Require.js
define(["editormd"], function(editormd) {
factory(editormd);
});
} else { // for Sea.js
define(function(require) {
var editormd = require("./../../editormd");
factory(editormd);
});
}
}
else
{
factory(window.editormd);
}
})();

198
static/js/markdown.js
View File

@@ -1,3 +1,19 @@
function showError($msg,$id) {
if(!$id){
$id = "#form-error-message"
}
$($id).addClass("error-message").removeClass("success-message").text($msg);
return false;
}
function showSuccess($msg,$id) {
if(!$id){
$id = "#form-error-message"
}
$($id).addClass("success-message").removeClass("error-message").text($msg);
return true;
}
$(function () {
window.editor = editormd("docEditor", {
width : "100%",
@@ -7,33 +23,31 @@ $(function () {
placeholder: "本编辑器支持Markdown编辑，左边编写，右边预览",
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "JPG", "JPEG", "GIF", "PNG"],
imageUploadURL: "/upload",
imageUploadURL: window.imageUploadURL ,
toolbarModes : "full",
fileUpload: true,
fileUploadURL : window.fileUploadURL,
taskList : true,
flowChart : true,
htmlDecode : "style,script,iframe,title,onmouseover,onmouseout,style",
lineNumbers : false,
fileUploadURL : '/upload',
tocStartLevel : 1,
tocm : true,
saveHTMLToTextarea : true,
onload : function() {
this.hideToolbar();
// this.videoDialog();
//this.executePlugin("video-dialog","video-dialog/video-dialog");
}
});
editormd.loadPlugin("/static/editor.md/plugins/file-dialog/file-dialog");
editormd.loadPlugin("/static/editor.md/plugins/video-dialog/video-dialog", function(){
//editormd.videoDialog();
});
/**
* 实现标题栏操作
*/
$("#editormd-tools").on("click","a[class!='disabled']",function () {
var name = $(this).find("i").attr("name");
if(name === "attachment"){
window.editor.fileDialog();
}else if(name === "history"){
}else if(name === "sidebar"){
@@ -67,9 +81,6 @@ $(function () {
}
cm.replaceSelection(selectionText.join("\n"));
}
}else if(name === "video"){
//插入视频
window.editor.videoDialog();
}else {
var action = window.editor.toolbarHandlers[name];
@@ -79,4 +90,165 @@ $(function () {
}
}
}) ;
//实现小提示
$("[data-toggle='tooltip']").hover(function () {
var title = $(this).attr('data-title');
var direction = $(this).attr("data-direction");
var tips = 3;
if(direction === "top"){
tips = 1;
}else if(direction === "right"){
tips = 2;
}else if(direction === "bottom"){
tips = 3;
}else if(direction === "left"){
tips = 4;
}
index = layer.tips(title, this, {
tips: tips
});
}, function () {
layer.close(index);
});
$("#btnAddDocument").on("click",function () {
$("#addDocumentModal").modal("show");
});
$("#addDocumentModal").on("show.bs.modal",function () {
window.addDocumentModalFormHtml = $(this).find("form").html();
}).on("hidden.bs.modal",function () {
$(this).find("form").html(window.addDocumentModalFormHtml);
});
function loadDocument($node) {
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
$.get("/docs/"+ window.book.identify +"/" + $node.node.id ).done(function (data) {
win.isEditorChange = true;
layer.close(index);
$("#documentId").val(selected.node.id);
window.editor.clear();
if(data.errcode === 0 && data.data.doc.content){
window.editor.insertValue(data.data.doc.content);
window.editor.setCursor({line:0, ch:0});
}else if(data.errcode !== 0){
layer.msg("文档加载失败");
}
}).fail(function () {
layer.close(index);
layer.msg("文档加载失败");
});
}
/**
* 添加文档
*/
$("#addDocumentForm").ajaxForm({
beforeSubmit : function () {
var doc_name = $.trim($("#documentName").val());
if (doc_name === ""){
return showError("目录名称不能为空","#add-error-message")
}
return true;
},
success : function (res) {
if(res.errcode === 0){
var data = { "id" : res.data.doc_id,'parent' : res.data.parent_id,"text" : res.data.doc_name};
var node = window.treeCatalog.get_node(data.id);
if(node){
window.treeCatalog.rename_node({"id":data.id},data.text);
}else {
var result = window.treeCatalog.create_node(res.data.parent_id, data, 'last');
window.treeCatalog.deselect_all();
window.treeCatalog.select_node(data);
window.editor.clear();
}
$("#markdown-save").removeClass('change').addClass('disabled');
$("#addDocumentModal").modal('hide');
}else{
showError(res.message,"#add-error-message")
}
},
error :function () {
}
});
/**
* 文档目录树
*/
$("#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);
editDocumentDialog(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);
deleteDocumentDialog(node);
}
}
}
}
}).on('loaded.jstree', function () {
window.treeCatalog = $(this).jstree();
var $select_node_id = window.treeCatalog.get_selected();
if($select_node_id) {
var $select_node = window.treeCatalog.get_node($select_node_id[0])
if ($select_node) {
$select_node.node = {
id: $select_node.id
};
loadDocument($select_node);
}
}
});
});