<!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, 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">-->
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
<link rel="stylesheet" type="text/css" href="./css/myEdit.css">
<script type="module" src="./js/lib/main.js"></script>
</head>
<body>
<header>
<!-- 顶部 -->
<div class="fixStylePosition" id="_style_utils">
<div class="fixStyleOut">
<div style="display: flex;">
<div style="display: flex;">
<div>
<svg width="90rem" height="90rem" 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="90rem" height="90rem" 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="90rem" height="90rem" 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="90rem" height="90rem" 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-value="b">
<svg width="90rem" height="90rem" 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-value="del">
<svg width="90rem" height="90rem"
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-value="i">
<svg width="90rem" height="90rem" 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-value="u">
<svg width="90rem" height="90rem" 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>
<svg width="90rem" height="90rem" 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)">info</button>-->
<!-- </div>-->
</div>
</div>
</header>
<main id="myEdit_main">
<!-- æ ‡é¢˜ -->
<h3>
测试编辑
</h3>
<!-- 内容 -->
<div id="noteshare" contenteditable="true" spellcheck="false" translate="no">
</div>
</main>
<footer>
</footer>
<div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%;"></div>
<p style="font-size: 16px;">
<span><button onclick="plusPx()">+</button></span>
<span><button onclick="reducePx()">-</button></span>
</p>
</body>
<script>
function plusPx() {
window.myEdit.ctx.editFrontSize += 1;
window.myEdit.utils.RefreshEditFrontSize();
}
function reducePx() {
window.myEdit.ctx.editFrontSize += -1;
window.myEdit.utils.RefreshEditFrontSize();
}
</script>
</html>