From 908c6ec6020cdb720a54d463ea7777979c575516 Mon Sep 17 00:00:00 2001 From: Minho Date: Sat, 20 Jan 2018 13:59:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0wysiwyg=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=99=A8=E4=BA=8C=E6=AC=A1=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bootstrap-wysiwyg/bootstrap-wysiwyg.js | 84 +++++++++++++++++-- views/document/new_html_edit_template.tpl | 66 ++++++++++++++- 2 files changed, 142 insertions(+), 8 deletions(-) diff --git a/static/bootstrap/plugins/bootstrap-wysiwyg/bootstrap-wysiwyg.js b/static/bootstrap/plugins/bootstrap-wysiwyg/bootstrap-wysiwyg.js index 0728223c..bdd2c0f9 100644 --- a/static/bootstrap/plugins/bootstrap-wysiwyg/bootstrap-wysiwyg.js +++ b/static/bootstrap/plugins/bootstrap-wysiwyg/bootstrap-wysiwyg.js @@ -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 = ''+linkTitle+''; + + 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', diff --git a/views/document/new_html_edit_template.tpl b/views/document/new_html_edit_template.tpl index 36d93bd4..9549e27e 100644 --- a/views/document/new_html_edit_template.tpl +++ b/views/document/new_html_edit_template.tpl @@ -73,10 +73,10 @@
- +
- + @@ -127,6 +127,11 @@ 开发缘起是公司IT部门需要一款简单实用的项目接口文档管理和分享的系统。其功能和界面源于 kancloud 。 可以用来储存日常接口文档，数据库字典，手册说明等文档。内置项目管理，用户管理，权限管理等功能，能够满足大部分中小团队的文档管理需求。 + 
+                        
+                            f
+                        
+
@@ -136,6 +141,37 @@
+ +