diff --git a/zyplayer-doc-ui/wiki-ui/src/components/editor/MgEditor.vue b/zyplayer-doc-ui/wiki-ui/src/components/editor/MgEditor.vue index 8ff70363..21a101d6 100644 --- a/zyplayer-doc-ui/wiki-ui/src/components/editor/MgEditor.vue +++ b/zyplayer-doc-ui/wiki-ui/src/components/editor/MgEditor.vue @@ -9,12 +9,12 @@
- - - + + + - - + + @@ -30,9 +30,12 @@ import "./css/MgEditorIconfont.css"; import utilPast from './util/past'; import utilBase from './util/util'; + import utilSelection from './util/selection'; import toolbarHn from "./toolbar/hn"; import toolbarCommon from './toolbar/common'; import toolbarCodeList from "./toolbar/inlineCodeList"; + import toolbarBorder from "./toolbar/border"; + import toolbarStrikeThrough from "./toolbar/strikeThrough"; const $ = require("jquery"); @@ -121,7 +124,7 @@ let domInnerText = handleClassDom.innerText; let selectRange = window.getSelection().getRangeAt(0); // 光标在行的最后才执行此操作,否则用系统默认的 - if (selectRange.startOffset == selectRange.endOffset && selectRange.endOffset == domInnerText.length) { + if (utilSelection.isSelectionEmpty() && selectRange.endOffset == domInnerText.length) { e.preventDefault(); let newEle = $(`

`)[0]; $(handleClassDom).after(newEle); @@ -139,7 +142,7 @@ let nowContainer = window.getSelection().getRangeAt(0).commonAncestorContainer; let lineText = nowContainer.data; if (lineText == '```') { - toolbarCodeList.createCodeListBlock(); + toolbarCodeList.handleCodeList(); } // 判断是否是在最后一行输入,如果是就再在最后加一行 let locate = this.findParentClassDom(nowContainer, 'locate'); @@ -176,9 +179,14 @@ domHaveClass(container, cls) { return container && container.classList && container.classList.contains(cls); }, + handleToolbarBorder() { + toolbarBorder.handleBorder(); + }, + handleToolbarStrikeThrough() { + toolbarStrikeThrough.handleStrikeThrough(); + }, handleToolbarHn(hn) { - toolbarHn.toolbarHn(hn); - this.selectionInfo.haveSelect = false; + toolbarHn.handleHn(hn); }, getMgEditorToolbarStyle(selectionInfo) { let style = {}; diff --git a/zyplayer-doc-ui/wiki-ui/src/components/editor/css/MgEditor.css b/zyplayer-doc-ui/wiki-ui/src/components/editor/css/MgEditor.css index 910240fd..60407669 100644 --- a/zyplayer-doc-ui/wiki-ui/src/components/editor/css/MgEditor.css +++ b/zyplayer-doc-ui/wiki-ui/src/components/editor/css/MgEditor.css @@ -145,3 +145,11 @@ } /*Hn样式-E-*/ + +.mg-editor .border { + font-weight: bold; +} + +.mg-editor .strikethrough { + text-decoration: line-through; +} diff --git a/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/border.js b/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/border.js new file mode 100644 index 00000000..8acc402a --- /dev/null +++ b/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/border.js @@ -0,0 +1,12 @@ + + +import toolbarCommon from './common'; + +const $ = require("jquery"); + +export default { + handleBorder() { + toolbarCommon.selectionAddClass("border"); + } +} + diff --git a/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/common.js b/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/common.js index 9f63acb3..e04480d8 100644 --- a/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/common.js +++ b/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/common.js @@ -1,3 +1,5 @@ +import utilSelection from "../util/selection"; + export default { getSelectionContainer(judgeRoot) { let container = window.getSelection().getRangeAt(0).commonAncestorContainer; @@ -9,11 +11,85 @@ export default { } return container; }, + getRootDom(nowDom) { + let newDom = this.getRealElem(nowDom); + if (!newDom || this.isRootBox(nowDom)) return null; + if (this.isRootBox(newDom.parentNode)) return newDom; + return this.getRootDom(newDom.parentNode); + }, + getRealElem: function (elem) { + return !elem || elem.nodeType === 1 ? elem : elem.parentNode; + }, isRootBox(container) { return this.domHaveClass(container, "mg-editor"); }, domHaveClass(container, cls) { return container && container.classList && container.classList.contains(cls); }, + selectionAddClass(cls) { + let range = window.getSelection().getRangeAt(0); + let nowContainer = range.startContainer; + let newDomArr = [], innerText, newDom, haveEndDom = false; + + while (nowContainer != null) { + innerText = nowContainer.data || nowContainer.innerText; + if (nowContainer == range.startContainer && nowContainer == range.endContainer) { + innerText = innerText.substring(range.startOffset, range.endOffset); + } else if (nowContainer == range.startContainer) { + innerText = innerText.substring(range.startOffset, innerText.length); + } else if (nowContainer == range.endContainer || nowContainer.firstChild == range.endContainer) { + innerText = innerText.substring(0, range.endOffset); + } + newDom = document.createElement("span"); + var classList = utilSelection.getRealElem(nowContainer).classList; + if (classList) { + newDom.classList = classList; + } + newDom.classList.add(cls); + newDom.innerText = innerText; + newDomArr.push(newDom); + if (nowContainer == range.endContainer || nowContainer.firstChild == range.endContainer) { + haveEndDom = true; + break; + } + nowContainer = nowContainer.nextSibling || utilSelection.getRealElem(nowContainer).nextSibling; + } + if (!haveEndDom) { + nowContainer = range.endContainer; + innerText = nowContainer.data || nowContainer.innerText; + innerText = innerText.substring(0, range.endOffset); + newDom = document.createElement("span"); + if (nowContainer.classList) { + newDom.classList = nowContainer.classList; + } + newDom.classList.add(cls); + newDom.innerText = innerText; + newDomArr.push(newDom); + } + let appendHtml = ''; + for (let i = 0; i < newDomArr.length; i++) { + var item = newDomArr[i]; + if (i + 1 < newDomArr.length) { + var itemNext = newDomArr[i + 1]; + if (itemNext.classList.value == item.classList.value) { + i++; + item.innerText += itemNext.innerText; + } + } + let removeCls = []; + item.classList.forEach(cls => { + if (cls.startsWith("head-") || cls == 'head') { + removeCls.push(cls); + } + }); + for (let j = 0; j < removeCls.length; j++) { + item.classList.remove(removeCls[j]); + } + appendHtml += item.outerHTML; + } + document.execCommand('styleWithCSS', false, false); + document.execCommand('insertHTML', false, appendHtml); + }, + } diff --git a/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/hn.js b/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/hn.js index 6ef9e619..97774c8f 100644 --- a/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/hn.js +++ b/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/hn.js @@ -1,20 +1,38 @@ import toolbarCommon from './common'; +import utilSelection from "../util/selection"; const $ = require("jquery"); export default { - toolbarHn(hn) { + handleHn(hn) { // 找到内容,生成div把每一行包住 - let container = toolbarCommon.getSelectionContainer(true); - if (container == null) return; - let innerTextArr = container.innerText.split("\n"); - if (innerTextArr.length >= 1) { - innerTextArr.filter(item => !!item).forEach(item => { - $(container).before(`
${item}
`); + // let container = toolbarCommon.getSelectionContainer(true); + // if (container == null) return; + // let innerTextArr = container.innerText.split("\n"); + // if (innerTextArr.length >= 1) { + // innerTextArr.filter(item => !!item).forEach(item => { + // $(container).before(`
${item}
`); + // }); + // } + // // 最后把当前行移出掉 + // container.remove(); + let range = window.getSelection().getRangeAt(0); + let nowContainer = range.startContainer; + while (nowContainer != null) { + let rootDom = toolbarCommon.getRootDom(nowContainer); + if (rootDom == null) return; + rootDom.classList.forEach(cls => { + if (cls.startsWith("head-")) { + rootDom.classList.remove(cls); + } }); + rootDom.classList.add('head', 'head-' + hn); + if (nowContainer == range.endContainer || nowContainer.firstChild == range.endContainer) { + break; + } + nowContainer = nowContainer.nextSibling || utilSelection.getRealElem(nowContainer).nextSibling; } - // 最后把当前行移出掉 - container.remove(); + document.execCommand('styleWithCSS', false, false); } } diff --git a/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/inlineCodeList.js b/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/inlineCodeList.js index 94ac036f..1819fbe3 100644 --- a/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/inlineCodeList.js +++ b/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/inlineCodeList.js @@ -4,7 +4,7 @@ import utilBase from '../util/util'; const $ = require("jquery"); export default { - createCodeListBlock() { + handleCodeList() { let containerNow = window.getSelection().getRangeAt(0).commonAncestorContainer; let divEle = this.findRootDomOnNotCode(containerNow); if (divEle == null) return; diff --git a/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/strikeThrough.js b/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/strikeThrough.js new file mode 100644 index 00000000..21c0c640 --- /dev/null +++ b/zyplayer-doc-ui/wiki-ui/src/components/editor/toolbar/strikeThrough.js @@ -0,0 +1,8 @@ +import toolbarCommon from "./common"; + +export default { + handleStrikeThrough() { + toolbarCommon.selectionAddClass("strikethrough"); + } +} + diff --git a/zyplayer-doc-ui/wiki-ui/src/components/editor/util/selection.js b/zyplayer-doc-ui/wiki-ui/src/components/editor/util/selection.js new file mode 100644 index 00000000..018bb366 --- /dev/null +++ b/zyplayer-doc-ui/wiki-ui/src/components/editor/util/selection.js @@ -0,0 +1,22 @@ +/** + * 本文件内容拷贝自:https://github.com/wangfupeng1988/wangEditor + * zyplayer-doc在此基础上有稍作修改 + */ + +export default { + // 选区是否为空 + isSelectionEmpty: function () { + let range = window.getSelection().getRangeAt(0); + if (range && range.startContainer) { + if (range.startContainer === range.endContainer) { + if (range.startOffset === range.endOffset) { + return true; + } + } + } + return false; + }, + getRealElem: function (elem) { + return !elem || elem.nodeType === 1 ? elem : elem.parentNode; + }, +} diff --git a/zyplayer-doc-ui/wiki-ui/src/components/editor/util/undoQueue.js b/zyplayer-doc-ui/wiki-ui/src/components/editor/util/undoQueue.js new file mode 100644 index 00000000..3dc85831 --- /dev/null +++ b/zyplayer-doc-ui/wiki-ui/src/components/editor/util/undoQueue.js @@ -0,0 +1,12 @@ +/** + * 本文件内容拷贝自:https://github.com/wangfupeng1988/wangEditor + * zyplayer-doc在此基础上有稍作修改 + */ + +import utilBase from './util' + +export default { + // 获取粘贴的纯文本 + getPasteText(e) { + }, +}