230 lines
15 KiB
HTML
230 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<!-- https://quilljs.com/docs/customization/registries -->
|
||
<meta charset="UTF-8">
|
||
<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, 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">
|
||
<script src="./js/lib/sea.js"></script>
|
||
<script>
|
||
seajs.config({
|
||
// base:'path',
|
||
// alias:{
|
||
// 'app':'path/app/'
|
||
// },
|
||
charset: 'utf-8',
|
||
// 下载文件最大时长。单位毫秒
|
||
timeout: 20000,
|
||
debug: false
|
||
})
|
||
seajs.use('./js/index.js');
|
||
</script>
|
||
|
||
<!-- <script src="./js/index.js" data-main="./init"></script>-->
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<header>
|
||
<!-- 顶部 -->
|
||
<div id="head_top" style="font-size: 12rem">
|
||
<div >测试</div>
|
||
<div ></div>
|
||
<div >
|
||
<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>
|
||
<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="10rem" height="10rem" 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="10rem" height="10rem" 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>
|
||
</div>
|
||
</div>
|
||
<div class="my-divider-item"></div>
|
||
|
||
<div style="display: flex;">
|
||
<div>
|
||
<svg width="10rem" height="10rem" 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="10rem" height="10rem" 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>
|
||
</div>
|
||
|
||
<div class="my-divider-item"></div>
|
||
<div style="display: flex;">
|
||
<span class="fixStyleInnerSpan" data-k="font-weight" data-v="bold">
|
||
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
||
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>
|
||
</svg>
|
||
</span>
|
||
<span class="fixStyleInnerSpan" data-k="text-decoration" data-v="line-through">
|
||
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
||
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>
|
||
</svg>
|
||
</span>
|
||
<span class="fixStyleInnerSpan" data-k="font-style" data-v="italic">
|
||
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
||
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>
|
||
</svg>
|
||
</span>
|
||
<span class="fixStyleInnerSpan" data-k="text-decoration,text-underline-offset"
|
||
data-v="underline,30rem">
|
||
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
||
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>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="my-divider-item"></div>
|
||
<div>
|
||
<span class="fixStyleInnerSpan" data-k="color" data-v="blue">
|
||
<svg width="10rem" height="10rem" viewBox="0 0 240 240" version="1.1"
|
||
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>
|
||
<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>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</span>
|
||
<span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
|
||
<svg width="10rem" height="10rem" viewBox="0 0 256 256" version="1.1"
|
||
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="矩形">
|
||
<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>
|
||
<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>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
<!-- <div class="my-divider-item"></div>-->
|
||
<!-- <div>-->
|
||
<!-- <span>-->
|
||
<!-- <svg width="10rem" height="10rem" viewBox="0 0 18 18" fill="none"-->
|
||
<!-- 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>-->
|
||
<!-- </svg>-->
|
||
<!-- </span>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="my-divider-item"></div>-->
|
||
<!-- <div>-->
|
||
<!-- <button onclick="info(this)" style="font-size: 16px">info</button>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="myEdit_main">
|
||
<!-- 标题 -->
|
||
<h3 contenteditable="true">
|
||
测试编辑
|
||
</h3>
|
||
<!-- 内容 -->
|
||
<div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
|
||
</footer>
|
||
<div id="testDiv" style="font-size: 14px; width: 300px;margin-left: 10%; display: block"></div>
|
||
<div id="testDevice" style="font-size: 14px; 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)
|
||
|
||
let spanContent = rangeAt.commonAncestorContainer.parentElement.querySelector("span[data-flag='span_content']");
|
||
console.dir(spanContent)
|
||
for (const child of spanContent.children) {
|
||
console.log(child, select.containsNode(child, false), select.containsNode(child, true))
|
||
}
|
||
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
</html> |