mindoc-org
/
mindoc
mirror of https://github.com/mindoc-org/mindoc.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

实现富文本编辑器

pull/219/head
Minho 2018-01-20 15:57:09 +08:00
parent 908c6ec602
commit 4d87ef8544
2 changed files with 74 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
static/bootstrap/plugins/bootstrap-wysiwyg/bootstrap-wysiwyg.js
View File

@ -89,7 +89,10 @@
var nodeName = selection.commonAncestorContainer.parentNode.nodeName;
if(nodeName === 'CODE' || nodeName === 'PRE'){
return insertEmpty(selection.parentNode);
}
}else if(nodeName === "DIV" || nodeName === "P"){
return insertHtml('<br/>');
}
console.log(nodeName);
}catch (e){
console.log(selection)
console.log("enterKeyHandle:" + e);
@ -227,6 +230,7 @@
editor.change && editor.change();
}
}else{
console.log(html)
execCommand('insertHTML',html);
}
};
@ -259,6 +263,7 @@
insertHtml(args);
saveSelection();
};
this.insertHtml = insertHtml;
return this;
};
$.fn.wysiwyg.defaults = {
@ -274,7 +279,7 @@
'ctrl+j meta+j': 'justifyfull',
'shift+tab': 'outdent',
'tab': 'indent',
'return':'enterAction'
'return':'enterAction'
},
toolbarSelector: '[data-role=editor-toolbar]',
commandRole: 'edit',

73
views/document/new_html_edit_template.tpl
View File

@ -41,6 +41,19 @@
#docEditor {overflow:auto;border: 1px solid #ddd; height: 100%;outline:none;padding: 5px;}
.btn-info{background-color: #ffffff !important;}
.btn-info>i{background-color: #cacbcd !important; color: #393939 !important; box-shadow: inset 0 0 0 1px transparent,inset 0 0 0 0 rgba(34,36,38,.15);}
.editor-wrapper>pre{padding: 0;}
.editor-wrapper .editor-code{
font-size: 13px;
line-height: 1.8em;
color: #dcdcdc;
border-radius: 3px;
display: block;
overflow-x: auto;
padding: 0.5em;
background: #3f3f3f;
}
.editor-wrapper-selected .editor-code{border: 1px solid #1e88e5;}
</style>
</head>
<body>
@ -80,7 +93,7 @@
<a href="javascript:;" data-toggle="tooltip" data-title="引用链接"><i class="fa fa-anchor item" name="reference-link" unselectable="on"></i></a>
<a href="javascript:;" data-toggle="tooltip" data-title="添加图片"><i class="fa fa-picture-o item" name="image" unselectable="on"></i></a>
<a href="javascript:;" data-toggle="tooltip" data-title="行内代码"><i class="fa fa-code item" name="code" unselectable="on"></i></a>
<a href="javascript:;" data-toggle="tooltip" data-title="代码块" unselectable="on"><i class="fa fa-file-code-o item" name="code-block" unselectable="on"></i></a>
<a href="javascript:;" data-toggle="tooltip" data-title="代码块" id="createCodeToolbar"><i class="fa fa-file-code-o item" name="code-block" unselectable="on"></i></a>
<a href="javascript:;" data-toggle="tooltip" data-title="添加表格"><i class="fa fa-table item" name="table" unselectable="on"></i></a>
<a href="javascript:;" data-toggle="tooltip" data-title="引用"><i class="fa fa-quote-right item" name="quote" unselectable="on"></i></a>
<a href="javascript:;" data-toggle="tooltip" data-title="GFM 任务列表"><i class="fa fa-tasks item" name="tasks" aria-hidden="true"></i></a>
@ -127,11 +140,8 @@
开发缘起是公司IT部门需要一款简单实用的项目接口文档管理和分享的系统。其功能和界面源于 kancloud 。
可以用来储存日常接口文档，数据库字典，手册说明等文档。内置项目管理，用户管理，权限管理等功能，能够满足大部分中小团队的文档管理需求。
<pre>
<code>
f
</code>
</pre>
<div contenteditable="false" class="editor-wrapper"><pre><code class="editor-code">f</code></pre></div>
<div><br/></div>
</div>
</div>
<div class="manual-editor-status">
@ -141,6 +151,25 @@
</div>
</div>
<!--创建代码块的模态窗-->
<div class="modal fade" id="createCodeToolbarModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">创建链接</h4>
</div>
<div class="modal-body">
<textarea></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="btnCreateCodeToolbar">确定</button>
</div>
</div>
</div>
</div>
<!--创建链接的模态窗-->
<div class="modal fade" id="createLinkToolbarModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog" role="document">
@ -172,6 +201,7 @@
</div>
</div>
</div>
<!-- 添加文档 -->
<div class="modal fade" id="addDocumentModal" tabindex="-1" role="dialog" aria-labelledby="addDocumentModalLabel">
<div class="modal-dialog" role="document">
@ -368,6 +398,37 @@
$then.modal("hide");
window.wysiwyg.insertLink(link,title);
});
/**
* 创建代码块弹窗
*/
$("#createCodeToolbar").on("click",function () {
$("#createCodeToolbarModal").modal("show");
});
/**
* 插入代码块
*/
$("#btnCreateCodeToolbar").on("click",function () {
var $then = $("#createCodeToolbarModal");
var code = $then.find("textarea").val();
console.log(code)
var codeHtml = '<div contenteditable="false" class="editor-wrapper"><code class="editor-code">' + code + '</code></div><p></p>';
$then.modal("hide");
window.wysiwyg.insertHtml(codeHtml);
});
$(".editor-code").on("dblclick",function () {
var code = $(this).html();
$("#createCodeToolbarModal").find("textarea").val(code);
$("#createCodeToolbarModal").modal("show");
}).on("click",function (e) {
e.preventDefault();
e.stopPropagation();
console.log($(this).parents(".editor-wrapper").html())
$(this).parents(".editor-wrapper").addClass("editor-wrapper-selected");
});
$("body").on("click",function () {
console.log("a")
$("#docEditor").find(".editor-wrapper").removeClass("editor-wrapper-selected");
});
$("#attachInfo").on("click",function () {
$("#uploadAttachModal").modal("show");