329 lines
12 KiB
JavaScript
329 lines
12 KiB
JavaScript
/** * 样式 */
|
||
(function (utils) {
|
||
function inputHandle(e) {
|
||
if (!utils.inCompositionEvent) {
|
||
updateText(e)
|
||
}
|
||
}
|
||
|
||
function compositionstartHandle(e) {
|
||
// console.log("compositionstart")
|
||
utils.inCompositionEvent = true
|
||
}
|
||
|
||
function compositionendHandle(e) {
|
||
// console.log("compositionend")
|
||
updateText(e)
|
||
utils.inCompositionEvent = false
|
||
}
|
||
|
||
|
||
/**
|
||
* 鼠标按下事件
|
||
*/
|
||
function windowsCtrZHandle(e) {
|
||
const event = e || window.event //标准化事件处理
|
||
const keyCode = event.keyCode || event.which || event.charCode
|
||
const metaKey = event.metaKey
|
||
// console.log("windows键盘事件 ", event, keyCombination, metaKey, keyCode)
|
||
|
||
//撤销
|
||
if (metaKey && keyCode === 90) {
|
||
console.log('触发ctrl + Z 事件', e.target)
|
||
if (utils.latestOpDoc !== undefined && utils.latestOpDoc !== null) {
|
||
// //
|
||
// let cNo = parseInt(utils.latestOpDoc.getAttribute("data-order"))
|
||
// console.log("恢复", utils.latestOpDoc, cNo)
|
||
// if (cNo > 1) {
|
||
// let qq = "#noteshare p[data-order='" + (cNo - 1) + "']"
|
||
// // console.log("qq: ", qq)
|
||
// utils.insertAfter(utils.latestOpDoc, document.querySelector(qq))
|
||
// } else {
|
||
// //添加元素到首位
|
||
// yanxuelu.insertBefore(utils.latestOpDoc, utils.MyRoot.children[0])
|
||
// }
|
||
// utils.MyDocMap.get(cNo).setHidden(false)
|
||
|
||
//恢复
|
||
utils.latestOpDoc.recovery();
|
||
|
||
// utils.MyDocMap.get(cNo).setSource(latestOpDoc.innerText)
|
||
//
|
||
showTestText()
|
||
|
||
event.preventDefault()
|
||
event.returnValue = false
|
||
}
|
||
|
||
utils.latestOpDoc = null
|
||
}
|
||
|
||
}
|
||
|
||
/**
|
||
* 鼠标按下事件 & 键盘组合事件
|
||
* @param {*} e
|
||
*/
|
||
function onkeydownHandle(e) {
|
||
const event = e || window.event //标准化事件处理
|
||
// window.event 等价于 event参数
|
||
// 有些浏览器除了通过keyCode获取输入键code，还可以通过which，charCode获取，这么写是出于浏览器兼容性考虑
|
||
const keyCode = event.keyCode || event.which || event.charCode
|
||
const keyCombination = event.ctrlKey
|
||
const metaKey = event.metaKey
|
||
// console.log("键盘事件 ", event, keyCombination, metaKey, keyCode)
|
||
|
||
// ctrl + c 复制
|
||
if (keyCombination && keyCode === 67) {
|
||
// 阻止默认事件
|
||
event.preventDefault()
|
||
event.returnValue = false
|
||
console.log('触发ctrl + c 事件', e.target)
|
||
}
|
||
|
||
//撤销
|
||
if (metaKey && keyCode === 90) {
|
||
// console.log('触发ctrl + Z 事件', e.target)
|
||
if (utils.latestOpDoc !== undefined && utils.latestOpDoc !== null) {
|
||
// console.log(utils.latestOpDoc)
|
||
//恢复
|
||
utils.latestOpDoc.recovery();
|
||
//
|
||
// console.log(MyDocMap.get(cNo))
|
||
let cNo = parseInt(utils.latestOpDoc.getData().getAttribute("data-order"))
|
||
utils.MyDocMap.get(cNo).setHidden(false)
|
||
// utils.MyDocMap.get(cNo).setSource(latestOpDoc.innerText)
|
||
//
|
||
showTestText()
|
||
|
||
//阻止事件
|
||
event.preventDefault()
|
||
event.returnValue = false
|
||
}
|
||
|
||
utils.latestOpDoc = null
|
||
}
|
||
|
||
//删除
|
||
if (keyCode === 46 || keyCode === 8) {
|
||
let curP = event.target
|
||
let cNo = parseInt(curP.getAttribute("data-order"))
|
||
|
||
//维护最近一次编辑的内容
|
||
if (utils.latestOpDoc === undefined || utils.latestOpDoc === null || utils.latestOpDoc.getData().getAttribute("data-id") !== curP.getAttribute("data-id")) {
|
||
utils.latestOpDoc = new utils.MyRecovery(curP.cloneNode(true), function () {
|
||
let cNo = parseInt(this.data.getAttribute("data-order"))
|
||
console.log("恢复", this.data, cNo)
|
||
if (cNo > 1) {
|
||
utils.insertAfter(this.data, document.querySelector("#noteshare p[data-order='" + (cNo - 1) + "']"))
|
||
} else {
|
||
//添加元素到首位
|
||
utils.MyRoot.insertBefore(this.data, utils.MyRoot.children[0])
|
||
}
|
||
|
||
// 恢复该元素展示
|
||
utils.MyDocMap.get(cNo).setHidden(false)
|
||
})
|
||
}
|
||
|
||
|
||
//如果是第一行
|
||
let previousSibling = curP.previousSibling
|
||
// console.log(curP, previousSibling == undefined ,previousSibling.id == undefined)
|
||
if (previousSibling === undefined || previousSibling.id === undefined) {
|
||
//显示用户的输入内容
|
||
showTestText()
|
||
return
|
||
}
|
||
|
||
|
||
// console.log('触发删除', curP.innerHTML, cNo, utils.num, utils.MyDocMap.get(cNo + 1))
|
||
let curS = window.getSelection()
|
||
// console.log("当前内容: ", curP.innerHTML, " 当前选区 ：", curS)
|
||
//处理前面没有内容，后面还有内容需要拼接到上层的场景
|
||
if ((curS.isCollapsed && curS.anchorOffset === 0) || curP.innerHTML === '<br>') {
|
||
let curNodeRetainHtml = curP.innerHTML
|
||
|
||
//异步修正顺序(第一行删除不掉)
|
||
// if (curP.innerHTML === '<br>' ) {
|
||
// console.log("删除当前行。选取信息: ", curS)
|
||
//阻止事件传递
|
||
event.preventDefault()
|
||
event.returnValue = false
|
||
|
||
//设置该元素隐藏
|
||
utils.MyDocMap.get(cNo).setHidden(true)
|
||
//删除当前元素
|
||
curP.remove()
|
||
//拼接
|
||
if (curNodeRetainHtml !== '<br>') {
|
||
previousSibling.innerHTML = previousSibling.innerHTML + curNodeRetainHtml
|
||
}
|
||
|
||
//收起选区到一个点，光标落在一个可编辑元素上
|
||
window.getSelection().setPosition(previousSibling, 1);
|
||
}
|
||
|
||
//显示用户的输入内容
|
||
showTestText();
|
||
}
|
||
|
||
//回车事件
|
||
if (keyCode === 13 /* && currentNode === key.lastElementChild */) {
|
||
event.preventDefault()
|
||
let uuid = utils.uuid()
|
||
let curOrder = ++(utils.num)
|
||
var newParagraph = document.createElement("p")
|
||
newParagraph.setAttribute("contenteditable", "true")
|
||
newParagraph.setAttribute("data-id", uuid)
|
||
newParagraph.setAttribute("id", uuid)
|
||
newParagraph.setAttribute("data-order", curOrder)
|
||
newParagraph.onkeydown = onkeydownHandle
|
||
newParagraph.focus()
|
||
newParagraph.innerHTML = "<br>"
|
||
utils.MyRoot.appendChild(newParagraph)
|
||
utils.MyDocMap.set(curOrder, new utils.MyNode(uuid))
|
||
|
||
//收起选区到一个点，光标落在一个可编辑元素上
|
||
window.getSelection().setPosition(newParagraph, 0)
|
||
}
|
||
}
|
||
|
||
|
||
/**
|
||
*
|
||
*/
|
||
function showTestText() {
|
||
//显示用户的输入内容
|
||
const obj = {};
|
||
for ([k, v] of utils.MyDocMap.entries()) {
|
||
if (v.getHidden() && v.getHidden() === true) {
|
||
continue
|
||
}
|
||
obj[k] = v
|
||
}
|
||
|
||
// console.log("当前文档结构数: ",obj);
|
||
|
||
// var userInput = document.getElementById("testInput")
|
||
// userInput.value = JSON.stringify(obj)
|
||
}
|
||
|
||
/**
|
||
* 更新文档
|
||
* @param {*} e
|
||
*/
|
||
function updateText(e) {
|
||
let curP = e.target
|
||
|
||
//是否需要变更元素类型
|
||
utils.firstCmd(curP, onkeydownHandle)
|
||
|
||
|
||
let cNo = parseInt(curP.getAttribute("data-order"))
|
||
let cp = utils.MyDocMap.get(cNo)
|
||
|
||
//内容不变则不处理
|
||
let h5CurLen = curP.innerText.length
|
||
let myDocNodeLen = (cp && cp.getSource()) ? cp.getSource().length : 0
|
||
if (h5CurLen === myDocNodeLen) {
|
||
return
|
||
}
|
||
|
||
cp.setSource(curP.innerText)
|
||
// console.log("curPTx: ", curP.innerText, "MyDocMap : ", utils.MyDocMap)
|
||
|
||
//显示用户的输入内容
|
||
showTestText()
|
||
}
|
||
|
||
|
||
function surroundContentsByStyle() {
|
||
let curS = utils.getSelection()
|
||
let curSec = curS.getRangeAt(0)
|
||
let styleName = this.getAttribute("data-value");
|
||
let className = utils.parseStyleName2ClassName(styleName)
|
||
//todo 只对 nodeType = p 执行
|
||
// console.log("当前光标信息: ", curS, " 当前选区信息 : ", curSec)
|
||
|
||
for (let i = 0; i < curS.rangeCount; i++) {
|
||
let curSec = curS.getRangeAt(i)
|
||
|
||
let curEleSize = curSec.commonAncestorContainer.childNodes.length
|
||
|
||
let curStartP = curSec.startContainer.parentElement
|
||
//todo 先支持 一行。
|
||
let start = curSec.startOffset;
|
||
let end = curSec.endOffset;
|
||
// console.log(curStartP.cloneNode(true), styleName, start, end, " curEleSize: ", curEleSize)
|
||
|
||
let curPEle = null;
|
||
//第一次选择的时候将整行转换成<p><span></span></p>
|
||
if (curEleSize === 0) {
|
||
//没选择，则退出
|
||
if (start === end) {
|
||
return
|
||
}
|
||
// console.log("debug1: ", curSec.commonAncestorContainer)
|
||
//维护最近一次编辑的内容（暂时只支持恢复最近一次编辑）
|
||
utils.latestOpDoc = new utils.MyRecovery(curStartP.cloneNode(true), function () {
|
||
console.log("恢复上一步样式1", this.innerHTML)
|
||
let curEl = document.getElementById(this.data.getAttribute("id"));
|
||
curEl.innerHTML = this.data.innerHTML;
|
||
|
||
//文本映射 直接覆盖 map 中的 childrenStyle
|
||
utils.syncOnePInfo(this.data);
|
||
})
|
||
|
||
let curHtml = ""
|
||
for (let j = 0; j < curStartP.innerText.length; j++) {
|
||
// console.log(curStartP.innerText.charAt(j))
|
||
if (j >= start && j < end) {
|
||
curHtml += '<span contenteditable="true" class=' + className + '>' + curStartP.innerText.charAt(j) + '</span>';
|
||
} else {
|
||
curHtml += '<span>' + curStartP.innerText.charAt(j) + '</span>';
|
||
}
|
||
}
|
||
curStartP.innerHTML = curHtml;
|
||
|
||
curPEle = curStartP;
|
||
} else {
|
||
// console.log("debug2: ", curSec.commonAncestorContainer)
|
||
//维护最近一次编辑的内容（暂时只支持恢复最近一次编辑）
|
||
utils.latestOpDoc = new utils.MyRecovery(curSec.commonAncestorContainer.cloneNode(true), function () {
|
||
console.log("恢复上一步样式1", this.data)
|
||
let curEl = document.getElementById(this.data.getAttribute("id"));
|
||
curEl.innerHTML = this.data.innerHTML;
|
||
//文本映射 直接覆盖 map 中的 childrenStyle
|
||
utils.syncOnePInfo(this.data);
|
||
})
|
||
|
||
let myChildren = curSec.commonAncestorContainer.children
|
||
for (let j = 0; j < curEleSize; j++) {
|
||
let curEle = myChildren[j]
|
||
if (curS.containsNode(curEle, true)) {
|
||
curEle.classList.remove(className);
|
||
curEle.classList.add(className);
|
||
}
|
||
}
|
||
|
||
curPEle = curSec.commonAncestorContainer;
|
||
}
|
||
|
||
|
||
//文本映射 直接覆盖 map 中的 childrenStyle
|
||
utils.syncOnePInfo(curPEle)
|
||
}
|
||
}
|
||
|
||
window.styleCmd = {
|
||
inputHandle, compositionstartHandle, compositionendHandle,
|
||
onkeydownHandle, windowsCtrZHandle,
|
||
surroundContentsByStyle,
|
||
|
||
showTestText,
|
||
updateText,
|
||
|
||
}
|
||
|
||
})(utils) |