mirror of https://github.com/mindoc-org/mindoc.git
实现wysiwyg编辑器二次开发
Minho
parent
b62de4ba5e
commit
908c6ec602
|
|
@ -25,9 +25,16 @@
|
|||
toolbarBtnSelector,
|
||||
updateToolbar = function () {
|
||||
if (options.activeToolbarClass) {
|
||||
var selection = window.getSelection();
|
||||
try {
|
||||
var tag = 'formatBlock ' + selection.focusNode.parentNode.nodeName.toLowerCase();
|
||||
}catch (e){
|
||||
console.log(e);
|
||||
tag = '';
|
||||
}
|
||||
$(options.toolbarSelector).find(toolbarBtnSelector).each(function () {
|
||||
var command = $(this).data(options.commandRole);
|
||||
if (document.queryCommandState(command)) {
|
||||
if (document.queryCommandState(command) || tag === command) {
|
||||
$(this).addClass(options.activeToolbarClass);
|
||||
} else {
|
||||
$(this).removeClass(options.activeToolbarClass);
|
||||
|
|
@ -48,19 +55,57 @@
|
|||
}else{
|
||||
args = '<' + args + '>';
|
||||
}
|
||||
}else if(command === 'enterAction'){
|
||||
|
||||
}
|
||||
// console.log(getCurrentRange())
|
||||
|
||||
document.execCommand(command, 0, args);
|
||||
updateToolbar();
|
||||
editor.change && editor.change();
|
||||
},
|
||||
insertEmpty = function ($selectionElem) {
|
||||
|
||||
insertHtml('\r\n');
|
||||
return true;
|
||||
},
|
||||
codeHandler = function () {
|
||||
var selection = window.getSelection();
|
||||
try{
|
||||
var nodeName = selection.parentNode.nodeName;
|
||||
console.log(nodeName)
|
||||
if(nodeName !== 'CODE' && nodeName !== 'PRE'){
|
||||
|
||||
}
|
||||
if (!document.queryCommandSupported('insertHTML')) {
|
||||
|
||||
}
|
||||
}catch (e){
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
enterKeyHandle = function (e) {
|
||||
var selection = getCurrentRange();
|
||||
try {
|
||||
var nodeName = selection.commonAncestorContainer.parentNode.nodeName;
|
||||
if(nodeName === 'CODE' || nodeName === 'PRE'){
|
||||
return insertEmpty(selection.parentNode);
|
||||
}
|
||||
}catch (e){
|
||||
console.log(selection)
|
||||
console.log("enterKeyHandle:" + e);
|
||||
}
|
||||
},
|
||||
bindHotkeys = function (hotKeys) {
|
||||
$.each(hotKeys, function (hotkey, command) {
|
||||
editor.keydown(hotkey, function (e) {
|
||||
if (editor.attr('contenteditable') && editor.is(':visible')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
// console.log(command)
|
||||
if(hotkey === 'return'){
|
||||
|
||||
return enterKeyHandle(e);
|
||||
}
|
||||
|
||||
execCommand(command);
|
||||
}
|
||||
}).keyup(hotkey, function (e) {
|
||||
|
|
@ -164,7 +209,27 @@
|
|||
insertFiles(dataTransfer.files);
|
||||
}
|
||||
});
|
||||
};
|
||||
},
|
||||
insertHtml = function (html) {
|
||||
if(!document.queryCommandSupported('insertHTML')){
|
||||
var range = window.getSelection().getRangeAt(0);
|
||||
|
||||
if (range.insertNode) {
|
||||
// IE
|
||||
range.deleteContents();
|
||||
range.insertNode($(args)[0]);
|
||||
updateToolbar();
|
||||
editor.change && editor.change();
|
||||
} else if (range.pasteHTML) {
|
||||
// IE <= 10
|
||||
range.pasteHTML(args);
|
||||
updateToolbar();
|
||||
editor.change && editor.change();
|
||||
}
|
||||
}else{
|
||||
execCommand('insertHTML',html);
|
||||
}
|
||||
};
|
||||
options = $.extend({}, $.fn.wysiwyg.defaults, userOptions);
|
||||
toolbarBtnSelector = 'a[data-' + options.commandRole + '],button[data-' + options.commandRole + '],input[type=button][data-' + options.commandRole + ']';
|
||||
bindHotkeys(options.hotKeys);
|
||||
|
|
@ -186,6 +251,14 @@
|
|||
updateToolbar();
|
||||
}
|
||||
});
|
||||
this.insertLink = function (linkUrl,linkTitle) {
|
||||
restoreSelection();
|
||||
editor.focus();
|
||||
var args = '<a href="'+linkUrl+'" target="_blank">'+linkTitle+'</a>';
|
||||
|
||||
insertHtml(args);
|
||||
saveSelection();
|
||||
};
|
||||
return this;
|
||||
};
|
||||
$.fn.wysiwyg.defaults = {
|
||||
|
|
@ -200,7 +273,8 @@
|
|||
'ctrl+e meta+e': 'justifycenter',
|
||||
'ctrl+j meta+j': 'justifyfull',
|
||||
'shift+tab': 'outdent',
|
||||
'tab': 'indent'
|
||||
'tab': 'indent',
|
||||
'return':'enterAction'
|
||||
},
|
||||
toolbarSelector: '[data-role=editor-toolbar]',
|
||||
commandRole: 'edit',
|
||||
|
|
|
|||
|
|
@ -73,10 +73,10 @@
|
|||
<div class="editormd-group">
|
||||
<a href="javascript:;" data-toggle="tooltip" data-title="无序列表" data-edit="insertunorderedlist"><i class="fa fa-list-ul first" name="list-ul" unselectable="on"></i></a>
|
||||
<a href="javascript:;" data-toggle="tooltip" data-title="有序列表" data-edit="insertorderedlist"><i class="fa fa-list-ol item" name="list-ol" unselectable="on"></i></a>
|
||||
<a href="javascript:;" data-toggle="tooltip" data-title="横线"><i class="fa fa-minus last" name="hr" unselectable="on"></i></a>
|
||||
<a href="javascript:;" data-toggle="tooltip" data-title="横线" data-edit="insertHorizontalRule"><i class="fa fa-minus last" name="hr" unselectable="on"></i></a>
|
||||
</div>
|
||||
<div class="editormd-group">
|
||||
<a href="javascript:;" data-toggle="tooltip" data-title="链接"><i class="fa fa-link first" name="link" unselectable="on"></i></a>
|
||||
<a href="javascript:;" data-toggle="tooltip" data-title="链接" id="createLinkToolbar"><i class="fa fa-link first" name="link" unselectable="on"></i></a>
|
||||
<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>
|
||||
|
|
@ -127,6 +127,11 @@
|
|||
开发缘起是公司IT部门需要一款简单实用的项目接口文档管理和分享的系统。其功能和界面源于 kancloud 。
|
||||
|
||||
可以用来储存日常接口文档，数据库字典，手册说明等文档。内置项目管理，用户管理，权限管理等功能，能够满足大部分中小团队的文档管理需求。
|
||||
<pre>
|
||||
<code>
|
||||
f
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="manual-editor-status">
|
||||
|
|
@ -136,6 +141,37 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
<!--创建链接的模态窗-->
|
||||
<div class="modal fade" id="createLinkToolbarModal" 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">×</span></button>
|
||||
<h4 class="modal-title">创建链接</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label for="linkUrl" class="control-label col-sm-2">链接地址</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" id="linkUrl" value="http://" data-url="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="linkTitle" class="control-label col-sm-2">链接标题</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" value="" id="linkTitle" data-title="">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" id="btnCreateLinkToolbar">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加文档 -->
|
||||
<div class="modal fade" id="addDocumentModal" tabindex="-1" role="dialog" aria-labelledby="addDocumentModalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
|
|
@ -306,9 +342,33 @@
|
|||
<script src="/static/js/editor.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$("#docEditor").wysiwyg();
|
||||
window.wysiwyg = $("#docEditor").wysiwyg();
|
||||
|
||||
$(function () {
|
||||
//弹出创建链接的对话框
|
||||
$("#createLinkToolbar").on("click",function () {
|
||||
$("#createLinkToolbarModal").modal("show");
|
||||
});
|
||||
/**
|
||||
* 当点击创建链接按钮后
|
||||
*/
|
||||
$("#btnCreateLinkToolbar").on("click",function () {
|
||||
|
||||
var $then = $("#createLinkToolbarModal");
|
||||
var link = $then.find("input[data-url]").val();
|
||||
var title = $then.find("input[data-title]").val();
|
||||
if(link === ""){
|
||||
alert("链接地址不能为空");
|
||||
return false;
|
||||
}else if(title === ""){
|
||||
alert("链接标题不能为空");
|
||||
return false;
|
||||
}
|
||||
|
||||
$then.modal("hide");
|
||||
window.wysiwyg.insertLink(link,title);
|
||||
});
|
||||
|
||||
$("#attachInfo").on("click",function () {
|
||||
$("#uploadAttachModal").modal("show");
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue