to:sync
This commit is contained in:
shaoyongjun
parent
95e072ab18
commit
e67eabd237
@ -7,70 +7,85 @@ define(function (require, exports, module) {
|
||||
function handle(event) {
|
||||
let utils = require("../../common/utils");
|
||||
let curS = utils.GetSelection();
|
||||
let curRange = curS.getRangeAt(0); //只考虑一个选区场景
|
||||
let curNode = utils.GetEventTarget(event);
|
||||
//只处理选择的是一个范围。
|
||||
if (curS.type !== "Range") {
|
||||
return;
|
||||
}
|
||||
//选区信息
|
||||
console.dir(curS)
|
||||
console.dir(curRange)
|
||||
|
||||
let curP = utils.GetEventTarget(event);
|
||||
let styleK = curP.getAttribute("data-k");
|
||||
let styleV = curP.getAttribute("data-v");
|
||||
//获取样式
|
||||
let styleK = curNode.getAttribute("data-k");
|
||||
let styleV = curNode.getAttribute("data-v");
|
||||
if (styleK === undefined || styleK === null) {
|
||||
styleK = curP.closest("span").getAttribute("data-k");
|
||||
styleV = curP.closest("span").getAttribute("data-v");
|
||||
// console.log("closest: ", curP, curP.closest("span"))
|
||||
styleK = curNode.closest("span").getAttribute("data-k");
|
||||
styleV = curNode.closest("span").getAttribute("data-v");
|
||||
// console.log("closest: ", curNode, curNode.closest("span"))
|
||||
}
|
||||
console.log("styleK: ", styleK, " styleV: ", styleV);
|
||||
|
||||
//获取开始结束的区域
|
||||
let curStartContainerEle = curRange.startContainer;
|
||||
let curEndContainerEle = curRange.endContainer;
|
||||
let taskMap = new Map;
|
||||
let start = curRange.startOffset;
|
||||
let end = curRange.endOffset;
|
||||
if (start > end) {
|
||||
let tmpS = start;
|
||||
start = end;
|
||||
end = tmpS;
|
||||
}
|
||||
|
||||
for (let i = 0; i < curS.rangeCount; i++) {
|
||||
let curRange = curS.getRangeAt(i);
|
||||
let curCommonEle = curRange.commonAncestorContainer;
|
||||
let curStartContainerEle = curRange.startContainer;
|
||||
let curEndContainerEle = curRange.endContainer;
|
||||
let taskMap = new Map;
|
||||
let start = curRange.startOffset;
|
||||
let end = curRange.endOffset;
|
||||
if (start > end) {
|
||||
let tmpS = start;
|
||||
start = end;
|
||||
end = tmpS;
|
||||
//处理选区数量
|
||||
let pStart = getSpanContentOfP(curStartContainerEle);
|
||||
let pEnd = getSpanContentOfP(curEndContainerEle);
|
||||
console.dir(curStartContainerEle)
|
||||
console.dir(curEndContainerEle)
|
||||
console.dir(pStart)
|
||||
console.dir(pEnd)
|
||||
if (pStart.getAttribute("id") === pEnd.getAttribute("id")) {
|
||||
taskMap.set(pStart.getAttribute("id"), pStart)
|
||||
} else {
|
||||
//修正顺序
|
||||
let tmp = pStart;
|
||||
if (parseInt(pStart.getAttribute("data-order")) > parseInt(pEnd.getAttribute("data-order"))) {
|
||||
pStart = pEnd;
|
||||
pEnd = tmp;
|
||||
}
|
||||
//fill p
|
||||
let nextTask = pStart;
|
||||
taskMap.set(nextTask.getAttribute("id"), nextTask)
|
||||
while (true) {
|
||||
nextTask = nextTask.nextSibling;
|
||||
taskMap.set(nextTask.getAttribute("id"), nextTask)
|
||||
if (nextTask.getAttribute("id") === pEnd.getAttribute("id")) {
|
||||
break
|
||||
}
|
||||
console.dir(nextTask)
|
||||
}
|
||||
}
|
||||
//选择单行还是多行
|
||||
let multiply = taskMap.size > 1;
|
||||
|
||||
let tmpStart = getSpanContent(curStartContainerEle);
|
||||
let tmpEnd = getSpanContent(curEndContainerEle);
|
||||
if (tmpStart.getAttribute("id") === tmpEnd.getAttribute("id")) {
|
||||
taskMap.set(tmpStart.getAttribute("id"), tmpStart)
|
||||
} else {
|
||||
let tmp = tmpStart;
|
||||
if (parseInt(tmpStart.getAttribute("data-order")) > parseInt(tmpEnd.getAttribute("data-order"))) {
|
||||
tmpStart = tmpEnd;
|
||||
tmpEnd = tmp;
|
||||
}
|
||||
taskMap.set(tmpStart.getAttribute("id"), tmpStart)
|
||||
while (true) {
|
||||
let nextTask = tmpStart.nextSibling;
|
||||
taskMap.set(nextTask.getAttribute("id"), nextTask);
|
||||
if (nextTask.getAttribute("id") === tmpEnd.getAttribute("id")) {
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
if (taskMap.size === 1 && start === end) {
|
||||
//遍历设置样式
|
||||
console.dir(taskMap)
|
||||
for (let [key, curP] of taskMap) {
|
||||
let curSpanContent = curP.querySelector("span[data-flag='span_content']");
|
||||
console.log("curP : ", curP, "\n", "\nkey:", key, "\ncurSpanContent: ", curSpanContent);
|
||||
if (curSpanContent.childNodes === undefined || curSpanContent.childNodes === null || curSpanContent.childNodes.length <= 0) {
|
||||
continue
|
||||
}
|
||||
|
||||
for (let [key, curSpanContent] of taskMap) {
|
||||
console.log("curSpanContent : ", curSpanContent, "\n", curCommonEle, "\nsize:", taskMap.size);
|
||||
console.dir(taskMap)
|
||||
console.dir(curS)
|
||||
console.dir(curRange)
|
||||
|
||||
if (curSpanContent.childNodes === undefined || curSpanContent.childNodes === null || curSpanContent.childNodes.length <= 0) {
|
||||
continue
|
||||
}
|
||||
let firstItem = curSpanContent.childNodes[0];
|
||||
console.log("curSpanContent : ", curSpanContent, curSpanContent.childNodes, firstItem.nodeName, firstItem.nodeType);
|
||||
let isEmptyStyle = curSpanContent.childNodes.length === 1 && firstItem.nodeName === "#text" && firstItem.nodeType === 3;
|
||||
if (isEmptyStyle) {
|
||||
let copySpan = curSpanContent.cloneNode();
|
||||
copySpan.innerHTML = "";
|
||||
for (let j = 0; j < curSpanContent.innerText.length; j++) {
|
||||
// console.log(curStartP.innerText.charAt(j))
|
||||
let firstItem = curSpanContent.childNodes[0];
|
||||
console.log("curSpanContent : ", curSpanContent, curSpanContent.childNodes.length, firstItem.nodeName, firstItem.nodeType);
|
||||
let isEmptyStyle = curSpanContent.childNodes.length === 1 && firstItem.nodeName === "#text" && firstItem.nodeType === 3;
|
||||
if (isEmptyStyle) {
|
||||
let copySpan = curSpanContent.cloneNode();
|
||||
copySpan.innerHTML = "";
|
||||
for (let j = 0; j < curSpanContent.innerText.length; j++) {
|
||||
if (!multiply) { //单选
|
||||
if (j >= start && j < end) {
|
||||
let tmpSpan = document.createElement("span");
|
||||
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
|
||||
@ -81,46 +96,75 @@ define(function (require, exports, module) {
|
||||
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
|
||||
copySpan.append(tmpSpan);
|
||||
}
|
||||
} else { //多选
|
||||
if (curP.getAttribute("id") === pStart.getAttribute("id")) { //首行
|
||||
if (j >= start) {
|
||||
let tmpSpan = document.createElement("span");
|
||||
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
|
||||
applySpanStyleKV(tmpSpan, styleK, styleV);
|
||||
copySpan.append(tmpSpan);
|
||||
} else {
|
||||
let tmpSpan = document.createElement("span");
|
||||
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
|
||||
copySpan.append(tmpSpan);
|
||||
}
|
||||
} else if (curP.getAttribute("id") === pEnd.getAttribute("id")) { //尾行
|
||||
if (j < end) {
|
||||
let tmpSpan = document.createElement("span");
|
||||
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
|
||||
applySpanStyleKV(tmpSpan, styleK, styleV);
|
||||
copySpan.append(tmpSpan);
|
||||
} else {
|
||||
let tmpSpan = document.createElement("span");
|
||||
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
|
||||
copySpan.append(tmpSpan);
|
||||
}
|
||||
} else {
|
||||
let tmpSpan = document.createElement("span");
|
||||
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
|
||||
applySpanStyleKV(tmpSpan, styleK, styleV);
|
||||
copySpan.append(tmpSpan);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
curSpanContent.innerHTML = copySpan.innerHTML;
|
||||
curSpanContent.innerHTML = copySpan.innerHTML;
|
||||
|
||||
//光标保持. for 单行
|
||||
if (taskMap.size === 1) {
|
||||
let s = window.getSelection();
|
||||
if (s.rangeCount > 0) s.removeAllRanges();
|
||||
let newR = document.createRange();
|
||||
//重新获取元素
|
||||
let tmpP = curSpanContent;
|
||||
let childrenSize = tmpP.childNodes.length;
|
||||
console.log("debug007: ", tmpP, start, end, childrenSize)
|
||||
newR.setStart(tmpP, start);
|
||||
newR.setEnd(tmpP, end);
|
||||
//区域 添加 到选区
|
||||
s.addRange(newR);
|
||||
//光标保持. for 单行
|
||||
if (taskMap.size === 1) {
|
||||
let s = window.getSelection();
|
||||
if (s.rangeCount > 0) s.removeAllRanges();
|
||||
let newR = document.createRange();
|
||||
//重新获取元素
|
||||
let tmpP = curSpanContent;
|
||||
let childrenSize = tmpP.childNodes.length;
|
||||
console.log("debug007: ", tmpP, start, end, childrenSize)
|
||||
newR.setStart(tmpP, start);
|
||||
newR.setEnd(tmpP, end);
|
||||
//区域 添加 到选区
|
||||
s.addRange(newR);
|
||||
}
|
||||
} else {
|
||||
let total = 0, effectNum = 0;
|
||||
for (let j = 0; j < curSpanContent.childNodes.length; j++) {
|
||||
let tmpSpan = curSpanContent.childNodes[j];
|
||||
if (curS.containsNode(tmpSpan, true)) {
|
||||
total++;
|
||||
if (spanContainsStyleKV(tmpSpan, styleK, styleV)) {
|
||||
console.dir(tmpSpan);
|
||||
} else {
|
||||
effectNum++;
|
||||
applySpanStyleKV(tmpSpan, styleK, styleV);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let total = 0, effectNum = 0;
|
||||
}
|
||||
|
||||
//如果没有设置任何一个 则取消
|
||||
if (effectNum === 0) {
|
||||
for (let j = 0; j < curSpanContent.childNodes.length; j++) {
|
||||
let tmpSpan = curSpanContent.childNodes[j];
|
||||
if (curS.containsNode(tmpSpan, true)) {
|
||||
total++;
|
||||
if (spanContainsStyleKV(tmpSpan, styleK, styleV)) {
|
||||
console.dir(tmpSpan);
|
||||
} else {
|
||||
effectNum++;
|
||||
applySpanStyleKV(tmpSpan, styleK, styleV);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//如果没有设置任何一个 则取消
|
||||
if (effectNum === 0) {
|
||||
for (let j = 0; j < curSpanContent.childNodes.length; j++) {
|
||||
let tmpSpan = curSpanContent.childNodes[j];
|
||||
if (curS.containsNode(tmpSpan, true)) {
|
||||
removeSpanStyleKV(tmpSpan, styleK, styleV);
|
||||
}
|
||||
removeSpanStyleKV(tmpSpan, styleK, styleV);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -160,12 +204,12 @@ define(function (require, exports, module) {
|
||||
}
|
||||
|
||||
|
||||
function getSpanContent(item) {
|
||||
function getSpanContentOfP(item) {
|
||||
let tmp = item;
|
||||
if (item.nodeName !== "SPAN" || item.getAttribute("data-flag") !== "span_content") {
|
||||
tmp = item.parentElement.closest("span[data-flag='span_content']");
|
||||
}
|
||||
return tmp
|
||||
return tmp.parentNode;
|
||||
}
|
||||
|
||||
//导出
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>📒</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, height=device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
content="width=device-width, height=device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
<!-- content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">-->
|
||||
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
|
||||
<link rel="stylesheet" type="text/css" href="./css/myEdit.css">
|
||||
@ -31,180 +31,192 @@
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<!-- 顶部 -->
|
||||
<div id="head_top" style="font-size: 16px">
|
||||
<div style="width:20%">测试</div>
|
||||
<div style="width: 60%"></div>
|
||||
<div style="width:20%">
|
||||
<span><button id="my_fontSize0">cls</button></span>
|
||||
<span>｜</span>
|
||||
<span><button id="my_fontSize+">+</button></span>
|
||||
<span>｜</span>
|
||||
<span><button id="my_fontSize-">-</button></span>
|
||||
</div>
|
||||
<header>
|
||||
<!-- 顶部 -->
|
||||
<div id="head_top" style="font-size: 16px">
|
||||
<div style="width:20%">测试</div>
|
||||
<div style="width: 60%"></div>
|
||||
<div style="width:20%">
|
||||
<span><button id="my_fontSize0">cls</button></span>
|
||||
<span>｜</span>
|
||||
<span><button id="my_fontSize+">+</button></span>
|
||||
<span>｜</span>
|
||||
<span><button id="my_fontSize-">-</button></span>
|
||||
</div>
|
||||
<div class="fixStylePosition" id="_style_utils">
|
||||
<div class="fixStyleOut">
|
||||
<div style="display: flex;margin: 0 0; ">
|
||||
<div style="display: flex; margin: 0 0;">
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="TextOutlined">
|
||||
<path
|
||||
</div>
|
||||
<div class="fixStylePosition" id="_style_utils">
|
||||
<div class="fixStyleOut">
|
||||
<div style="display: flex;margin: 0 0; ">
|
||||
<div style="display: flex; margin: 0 0;">
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="TextOutlined">
|
||||
<path
|
||||
d="M2 3a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V4h-7v16h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3V4H4v3a1 1 0 1 1-2 0V3Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
||||
<path
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
||||
<path
|
||||
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-divider-item"></div>
|
||||
</div>
|
||||
<div class="my-divider-item"></div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="TypographyOutlined">
|
||||
<path
|
||||
<div style="display: flex;">
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="TypographyOutlined">
|
||||
<path
|
||||
d="M2 4a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2H3Zm-1 5a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2H3Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
||||
<path
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
||||
<path
|
||||
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-divider-item"></div>
|
||||
<div style="display: flex;">
|
||||
<div class="my-divider-item"></div>
|
||||
<div style="display: flex;">
|
||||
<span class="fixStyleInnerSpan" data-k="font-weight" data-v="bold">
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="BoldOutlined">
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="BoldOutlined">
|
||||
<path
|
||||
d="M5 2.709C5 2.317 5.317 2 5.709 2h6.734a5.317 5.317 0 0 1 3.686 9.148 5.671 5.671 0 0 1-2.623 10.7H5.71a.709.709 0 0 1-.71-.707V2.71Zm2 7.798h5.443a3.19 3.19 0 0 0 3.19-3.19c0-1.762-1.428-3.317-3.19-3.317H7v6.507Zm0 2.126v7.09h6.507a3.544 3.544 0 0 0 0-7.09H7Z"
|
||||
fill="currentColor"></path>
|
||||
d="M5 2.709C5 2.317 5.317 2 5.709 2h6.734a5.317 5.317 0 0 1 3.686 9.148 5.671 5.671 0 0 1-2.623 10.7H5.71a.709.709 0 0 1-.71-.707V2.71Zm2 7.798h5.443a3.19 3.19 0 0 0 3.19-3.19c0-1.762-1.428-3.317-3.19-3.317H7v6.507Zm0 2.126v7.09h6.507a3.544 3.544 0 0 0 0-7.09H7Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="fixStyleInnerSpan" data-k="text-decoration" data-v="line-through">
|
||||
<span class="fixStyleInnerSpan" data-k="text-decoration" data-v="line-through">
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="HorizontalLineOutlined">
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="HorizontalLineOutlined">
|
||||
<path
|
||||
d="M5.49 7.226A5.107 5.107 0 0 1 6.9 3.831C8.017 2.636 9.718 2 11.819 2c2.142 0 3.779.57 4.867 1.689.4.392.869.958 1.26 1.595.443.723-.191 1.53-1.04 1.53-.606 0-1.039-.447-1.326-.981a2.864 2.864 0 0 0-.362-.517c-.735-.93-1.909-1.419-3.386-1.419-2.404 0-4.154 1.395-4.2 3.393-.02.846.337 1.58.995 2.043h-2.75c-.271-.621-.403-1.332-.385-2.107Zm8.906 6.024H4.038c-.518 0-.938-.38-.938-.897 0-.518.42-.978.938-.978h16.125c.518 0 .937.437.937.954 0 .518-.42.921-.937.921h-2.455c.542.806.96 1.954.934 3.055C18.563 19.82 15.87 22 11.572 22c-2.875 0-5.028-.964-6.13-2.745a6.884 6.884 0 0 1-.545-1.191c-.261-.72.318-1.432 1.084-1.432.574 0 1.034.416 1.24.952.17.445.4.794.733 1.142.805.858 2.104 1.305 3.766 1.305 2.845 0 4.696-1.39 4.747-3.61.024-1.072-.256-1.61-.897-2.42-.473-.598-1.174-.751-1.174-.751Z"
|
||||
fill="currentColor"></path>
|
||||
d="M5.49 7.226A5.107 5.107 0 0 1 6.9 3.831C8.017 2.636 9.718 2 11.819 2c2.142 0 3.779.57 4.867 1.689.4.392.869.958 1.26 1.595.443.723-.191 1.53-1.04 1.53-.606 0-1.039-.447-1.326-.981a2.864 2.864 0 0 0-.362-.517c-.735-.93-1.909-1.419-3.386-1.419-2.404 0-4.154 1.395-4.2 3.393-.02.846.337 1.58.995 2.043h-2.75c-.271-.621-.403-1.332-.385-2.107Zm8.906 6.024H4.038c-.518 0-.938-.38-.938-.897 0-.518.42-.978.938-.978h16.125c.518 0 .937.437.937.954 0 .518-.42.921-.937.921h-2.455c.542.806.96 1.954.934 3.055C18.563 19.82 15.87 22 11.572 22c-2.875 0-5.028-.964-6.13-2.745a6.884 6.884 0 0 1-.545-1.191c-.261-.72.318-1.432 1.084-1.432.574 0 1.034.416 1.24.952.17.445.4.794.733 1.142.805.858 2.104 1.305 3.766 1.305 2.845 0 4.696-1.39 4.747-3.61.024-1.072-.256-1.61-.897-2.42-.473-.598-1.174-.751-1.174-.751Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="fixStyleInnerSpan" data-k="font-style" data-v="italic">
|
||||
<span class="fixStyleInnerSpan" data-k="font-style" data-v="italic">
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="ItalicOutlined">
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="ItalicOutlined">
|
||||
<path
|
||||
d="M14.825 5.077 11.19 18.923h4.052a1.038 1.038 0 1 1 0 2.077H4.954a1.038 1.038 0 1 1 0-2.077h4.053l3.636-13.846H8.591A1.038 1.038 0 1 1 8.59 3h10.287a1.038 1.038 0 0 1 0 2.077h-4.053Z"
|
||||
fill="currentColor"></path>
|
||||
d="M14.825 5.077 11.19 18.923h4.052a1.038 1.038 0 1 1 0 2.077H4.954a1.038 1.038 0 1 1 0-2.077h4.053l3.636-13.846H8.591A1.038 1.038 0 1 1 8.59 3h10.287a1.038 1.038 0 0 1 0 2.077h-4.053Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="fixStyleInnerSpan" data-k="text-decoration,text-underline-offset"
|
||||
data-v="underline,30rem">
|
||||
<span class="fixStyleInnerSpan" data-k="text-decoration,text-underline-offset"
|
||||
data-v="underline,30rem">
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="UnderlineOutlined">
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="UnderlineOutlined">
|
||||
<path
|
||||
d="M7.361 3.052a.99.99 0 0 0-.989-.994.998.998 0 0 0-.999.994v5.765c0 4.205 2.601 7.29 6.627 7.29s6.627-3.085 6.627-7.29V3.052a.996.996 0 0 0-.996-.994.992.992 0 0 0-.992.994v5.765c0 3.003-1.763 5.302-4.639 5.302-2.876 0-4.639-2.299-4.639-5.302V3.052ZM3.054 19.42a.988.988 0 0 0-.994.988 1 1 0 0 0 .994 1h17.892a1 1 0 0 0 .994-1.002.987.987 0 0 0-.994-.986H3.054Z"
|
||||
fill="currentColor"></path>
|
||||
d="M7.361 3.052a.99.99 0 0 0-.989-.994.998.998 0 0 0-.999.994v5.765c0 4.205 2.601 7.29 6.627 7.29s6.627-3.085 6.627-7.29V3.052a.996.996 0 0 0-.996-.994.992.992 0 0 0-.992.994v5.765c0 3.003-1.763 5.302-4.639 5.302-2.876 0-4.639-2.299-4.639-5.302V3.052ZM3.054 19.42a.988.988 0 0 0-.994.988 1 1 0 0 0 .994 1h17.892a1 1 0 0 0 .994-1.002.987.987 0 0 0-.994-.986H3.054Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-divider-item"></div>
|
||||
<div>
|
||||
<div class="my-divider-item"></div>
|
||||
<div>
|
||||
<span class="fixStyleInnerSpan" data-k="color" data-v="blue">
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 240 240" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon/字体颜色" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(0.000000, 0.500000)">
|
||||
<g transform="translate(39.000000, 17.353553)">
|
||||
<path
|
||||
d="M11,201.146447 L167,201.146447 C173.075132,201.146447 178,206.071314 178,212.146447 C178,218.221579 173.075132,223.146447 167,223.146447 L11,223.146447 C4.92486775,223.146447 7.43989126e-16,218.221579 0,212.146447 C-7.43989126e-16,206.071314 4.92486775,201.146447 11,201.146447 Z"
|
||||
id="矩形" fill="#DF2A3F" fill-rule="evenodd"></path>
|
||||
d="M11,201.146447 L167,201.146447 C173.075132,201.146447 178,206.071314 178,212.146447 C178,218.221579 173.075132,223.146447 167,223.146447 L11,223.146447 C4.92486775,223.146447 7.43989126e-16,218.221579 0,212.146447 C-7.43989126e-16,206.071314 4.92486775,201.146447 11,201.146447 Z"
|
||||
id="矩形" fill="#DF2A3F" fill-rule="evenodd"></path>
|
||||
<path
|
||||
d="M72.3425855,16.8295583 C75.799482,7.50883712 86.1577877,2.75526801 95.4785089,6.21216449 C100.284516,7.99463061 104.096358,11.7387855 105.968745,16.4968188 L106.112518,16.8745422 L159.385152,161.694068 C161.291848,166.877345 158.635655,172.624903 153.452378,174.531599 C148.358469,176.405421 142.719567,173.872338 140.716873,168.864661 L140.614848,168.598825 L89.211,28.86 L37.3759214,168.623816 C35.4885354,173.712715 29.8981043,176.351047 24.7909589,174.617647 L24.5226307,174.522368 C19.4337312,172.634982 16.7953993,167.044551 18.5287999,161.937406 L18.6240786,161.669077 L72.3425855,16.8295583 Z"
|
||||
id="路径-21" fill="currentColor" fill-rule="nonzero"></path>
|
||||
d="M72.3425855,16.8295583 C75.799482,7.50883712 86.1577877,2.75526801 95.4785089,6.21216449 C100.284516,7.99463061 104.096358,11.7387855 105.968745,16.4968188 L106.112518,16.8745422 L159.385152,161.694068 C161.291848,166.877345 158.635655,172.624903 153.452378,174.531599 C148.358469,176.405421 142.719567,173.872338 140.716873,168.864661 L140.614848,168.598825 L89.211,28.86 L37.3759214,168.623816 C35.4885354,173.712715 29.8981043,176.351047 24.7909589,174.617647 L24.5226307,174.522368 C19.4337312,172.634982 16.7953993,167.044551 18.5287999,161.937406 L18.6240786,161.669077 L72.3425855,16.8295583 Z"
|
||||
id="路径-21" fill="currentColor" fill-rule="nonzero"></path>
|
||||
<path
|
||||
d="M121,103.146447 C126.522847,103.146447 131,107.623599 131,113.146447 C131,118.575687 126.673329,122.994378 121.279905,123.142605 L121,123.146447 L55,123.146447 C49.4771525,123.146447 45,118.669294 45,113.146447 C45,107.717207 49.3266708,103.298515 54.7200952,103.150288 L55,103.146447 L121,103.146447 Z"
|
||||
id="路径-22" fill="currentColor" fill-rule="nonzero"></path>
|
||||
d="M121,103.146447 C126.522847,103.146447 131,107.623599 131,113.146447 C131,118.575687 126.673329,122.994378 121.279905,123.142605 L121,123.146447 L55,123.146447 C49.4771525,123.146447 45,118.669294 45,113.146447 C45,107.717207 49.3266708,103.298515 54.7200952,103.150288 L55,103.146447 L121,103.146447 Z"
|
||||
id="路径-22" fill="currentColor" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
|
||||
<span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 256 256" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon/填充色" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="icon/背景颜色">
|
||||
<g id="编组" fill="currentColor">
|
||||
<g transform="translate(119.502295, 137.878331) rotate(-135.000000) translate(-119.502295, -137.878331) translate(48.002295, 31.757731)"
|
||||
id="矩形">
|
||||
id="矩形">
|
||||
<path
|
||||
d="M100.946943,60.8084699 L43.7469427,60.8084699 C37.2852111,60.8084699 32.0469427,66.0467383 32.0469427,72.5084699 L32.0469427,118.70847 C32.0469427,125.170201 37.2852111,130.40847 43.7469427,130.40847 L100.946943,130.40847 C107.408674,130.40847 112.646943,125.170201 112.646943,118.70847 L112.646943,72.5084699 C112.646943,66.0467383 107.408674,60.8084699 100.946943,60.8084699 Z M93.646,79.808 L93.646,111.408 L51.046,111.408 L51.046,79.808 L93.646,79.808 Z"
|
||||
fill-rule="nonzero"></path>
|
||||
d="M100.946943,60.8084699 L43.7469427,60.8084699 C37.2852111,60.8084699 32.0469427,66.0467383 32.0469427,72.5084699 L32.0469427,118.70847 C32.0469427,125.170201 37.2852111,130.40847 43.7469427,130.40847 L100.946943,130.40847 C107.408674,130.40847 112.646943,125.170201 112.646943,118.70847 L112.646943,72.5084699 C112.646943,66.0467383 107.408674,60.8084699 100.946943,60.8084699 Z M93.646,79.808 L93.646,111.408 L51.046,111.408 L51.046,79.808 L93.646,79.808 Z"
|
||||
fill-rule="nonzero"></path>
|
||||
<path
|
||||
d="M87.9366521,16.90916 L87.9194966,68.2000001 C87.9183543,69.4147389 86.9334998,70.399264 85.7187607,70.4 L56.9423078,70.4 C55.7272813,70.4 54.7423078,69.4150264 54.7423078,68.2 L54.7423078,39.4621057 C54.7423078,37.2523513 55.5736632,35.1234748 57.0711706,33.4985176 L76.4832996,12.4342613 C78.9534987,9.75382857 83.1289108,9.5834005 85.8093436,12.0535996 C87.1658473,13.303709 87.9372691,15.0644715 87.9366521,16.90916 Z"
|
||||
fill-rule="evenodd"></path>
|
||||
d="M87.9366521,16.90916 L87.9194966,68.2000001 C87.9183543,69.4147389 86.9334998,70.399264 85.7187607,70.4 L56.9423078,70.4 C55.7272813,70.4 54.7423078,69.4150264 54.7423078,68.2 L54.7423078,39.4621057 C54.7423078,37.2523513 55.5736632,35.1234748 57.0711706,33.4985176 L76.4832996,12.4342613 C78.9534987,9.75382857 83.1289108,9.5834005 85.8093436,12.0535996 C87.1658473,13.303709 87.9372691,15.0644715 87.9366521,16.90916 Z"
|
||||
fill-rule="evenodd"></path>
|
||||
<path
|
||||
d="M131.3,111.241199 L11.7,111.241199 C5.23826843,111.241199 0,116.479467 0,122.941199 L0,200.541199 C0,207.002931 5.23826843,212.241199 11.7,212.241199 L131.3,212.241199 C137.761732,212.241199 143,207.002931 143,200.541199 L143,122.941199 C143,116.479467 137.761732,111.241199 131.3,111.241199 Z M124,130.241 L124,193.241 L19,193.241 L19,130.241 L124,130.241 Z"
|
||||
fill-rule="nonzero"></path>
|
||||
d="M131.3,111.241199 L11.7,111.241199 C5.23826843,111.241199 0,116.479467 0,122.941199 L0,200.541199 C0,207.002931 5.23826843,212.241199 11.7,212.241199 L131.3,212.241199 C137.761732,212.241199 143,207.002931 143,200.541199 L143,122.941199 C143,116.479467 137.761732,111.241199 131.3,111.241199 Z M124,130.241 L124,193.241 L19,193.241 L19,130.241 L124,130.241 Z"
|
||||
fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
d="M51,218 L205,218 C211.075132,218 216,222.924868 216,229 C216,235.075132 211.075132,240 205,240 L51,240 C44.9248678,240 40,235.075132 40,229 C40,222.924868 44.9248678,218 51,218 Z"
|
||||
id="矩形" fill="#FBDE28"></path>
|
||||
d="M51,218 L205,218 C211.075132,218 216,222.924868 216,229 C216,235.075132 211.075132,240 205,240 L51,240 C44.9248678,240 40,235.075132 40,229 C40,222.924868 44.9248678,218 51,218 Z"
|
||||
id="矩形" fill="#FBDE28"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="my-divider-item"></div>
|
||||
<div>
|
||||
</div>
|
||||
<div class="my-divider-item"></div>
|
||||
<div>
|
||||
<span>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 18 18" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4.2 10.4A1.19 1.19 0 013 9.2 1.19 1.19 0 014.2 8c.23 0 .43.06.6.17.2.1.33.24.44.43.11.18.17.38.17.6 0 .23-.06.43-.17.6-.1.2-.25.34-.43.45-.18.1-.38.16-.6.16zm4.72 0a1.19 1.19 0 01-1.2-1.2A1.19 1.19 0 018.92 8c.22 0 .42.06.6.17.19.1.33.24.44.43.1.18.16.38.16.6a1.22 1.22 0 01-.6 1.04c-.18.11-.38.17-.6.17zm4.72 0a1.19 1.19 0 01-1.2-1.2 1.19 1.19 0 011.2-1.2c.22 0 .42.06.6.17.18.1.33.24.44.43.11.18.16.38.16.6 0 .23-.05.43-.16.6a1.18 1.18 0 01-1.04.6z"
|
||||
fill="#535353"></path>
|
||||
d="M4.2 10.4A1.19 1.19 0 013 9.2 1.19 1.19 0 014.2 8c.23 0 .43.06.6.17.2.1.33.24.44.43.11.18.17.38.17.6 0 .23-.06.43-.17.6-.1.2-.25.34-.43.45-.18.1-.38.16-.6.16zm4.72 0a1.19 1.19 0 01-1.2-1.2A1.19 1.19 0 018.92 8c.22 0 .42.06.6.17.19.1.33.24.44.43.1.18.16.38.16.6a1.22 1.22 0 01-.6 1.04c-.18.11-.38.17-.6.17zm4.72 0a1.19 1.19 0 01-1.2-1.2 1.19 1.19 0 011.2-1.2c.22 0 .42.06.6.17.18.1.33.24.44.43.11.18.16.38.16.6 0 .23-.05.43-.16.6a1.18 1.18 0 01-1.04.6z"
|
||||
fill="#535353"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="my-divider-item"></div>
|
||||
<div>
|
||||
<button onclick="info(this)" style="font-size: 18px">info</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="myEdit_main">
|
||||
<!-- 标题 -->
|
||||
<h3 contenteditable="true">
|
||||
测试编辑
|
||||
</h3>
|
||||
<!-- 内容 -->
|
||||
<div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
|
||||
</div>
|
||||
</main>
|
||||
<main id="myEdit_main">
|
||||
<!-- 标题 -->
|
||||
<h3 contenteditable="true">
|
||||
测试编辑
|
||||
</h3>
|
||||
<!-- 内容 -->
|
||||
<div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<div id="testDiv" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
|
||||
<div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
|
||||
</footer>
|
||||
<div id="testDiv" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
|
||||
<div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
function info() {
|
||||
let select = window.getSelection() || document.selection;
|
||||
let rangeAt = select.getRangeAt(0);
|
||||
console.dir(select)
|
||||
console.dir(rangeAt)
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user