style: optimize styles
This commit is contained in:
开源海哥
parent
c11310b959
commit
7446ec8c67
|
|
@ -7,6 +7,7 @@
|
||||||
<link type="text/css" rel="stylesheet" href="./aieditor/style.css">
|
<link type="text/css" rel="stylesheet" href="./aieditor/style.css">
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import {AiEditor} from './aieditor/index.es.js'
|
import {AiEditor} from './aieditor/index.es.js'
|
||||||
|
|
||||||
new AiEditor({
|
new AiEditor({
|
||||||
element: "#aiEditor",
|
element: "#aiEditor",
|
||||||
placeholder: "点击输入内容...",
|
placeholder: "点击输入内容...",
|
||||||
|
|
@ -33,6 +34,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
let isDark = false;
|
let isDark = false;
|
||||||
|
|
||||||
function dark() {
|
function dark() {
|
||||||
if (!isDark) {
|
if (!isDark) {
|
||||||
document.body.style.background = "#1a1b1e"
|
document.body.style.background = "#1a1b1e"
|
||||||
|
|
@ -56,7 +58,6 @@
|
||||||
s.parentNode.insertBefore(hm, s);
|
s.parentNode.insertBefore(hm, s);
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,45 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>AiEditor Demo</title>
|
<title>AiEditor Demo</title>
|
||||||
</head>
|
|
||||||
<script>
|
|
||||||
let isDark = false;
|
|
||||||
function dark(){
|
|
||||||
if (!isDark){
|
|
||||||
document.body.style.background="#1a1b1e"
|
|
||||||
document.querySelector("#title").style.color="#eee"
|
|
||||||
document.querySelector("#aiEditor").classList.remove("aie-theme-light");
|
|
||||||
document.querySelector("#aiEditor").classList.add("aie-theme-dark");
|
|
||||||
}else {
|
|
||||||
document.body.style.background=""
|
|
||||||
document.querySelector("#title").style.color=""
|
|
||||||
document.querySelector("#aiEditor").classList.remove("aie-theme-dark");
|
|
||||||
document.querySelector("#aiEditor").classList.add("aie-theme-light");
|
|
||||||
}
|
|
||||||
isDark = !isDark;
|
|
||||||
}
|
|
||||||
|
|
||||||
var _hmt = _hmt || [];
|
<script>
|
||||||
(function() {
|
let isDark = false;
|
||||||
var hm = document.createElement("script");
|
function dark() {
|
||||||
hm.src = "https://hm.baidu.com/hm.js?9fd447a0f9e62a84d1b752a2cacb2c6b";
|
if (!isDark) {
|
||||||
var s = document.getElementsByTagName("script")[0];
|
document.body.style.background = "#1a1b1e"
|
||||||
s.parentNode.insertBefore(hm, s);
|
document.querySelector("#title").style.color = "#eee"
|
||||||
})();
|
document.querySelector("#aiEditor").classList.remove("aie-theme-light");
|
||||||
</script>
|
document.querySelector("#aiEditor").classList.add("aie-theme-dark");
|
||||||
|
} else {
|
||||||
|
document.body.style.background = ""
|
||||||
|
document.querySelector("#title").style.color = ""
|
||||||
|
document.querySelector("#aiEditor").classList.remove("aie-theme-dark");
|
||||||
|
document.querySelector("#aiEditor").classList.add("aie-theme-light");
|
||||||
|
}
|
||||||
|
isDark = !isDark;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _hmt = _hmt || [];
|
||||||
|
(function () {
|
||||||
|
var hm = document.createElement("script");
|
||||||
|
hm.src = "https://hm.baidu.com/hm.js?9fd447a0f9e62a84d1b752a2cacb2c6b";
|
||||||
|
var s = document.getElementsByTagName("script")[0];
|
||||||
|
s.parentNode.insertBefore(hm, s);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
||||||
<div style="padding: 10px 20px;font-size: 30px" id="title">
|
<div style="padding: 10px 20px;font-size: 30px" id="title">
|
||||||
AiEditor，一个面向 AI 的下一代富文本编辑器。 <button onclick="dark()">切换主题</button> <br />
|
AiEditor，一个面向 AI 的下一代富文本编辑器。
|
||||||
开源网址：<a href="https://gitee.com/aieditor-team/aieditor" target="_blank">https://gitee.com/aieditor-team/aieditor</a>
|
<button onclick="dark()">切换主题</button>
|
||||||
|
<br/>
|
||||||
|
开源网址：<a href="https://gitee.com/aieditor-team/aieditor"
|
||||||
|
target="_blank">https://gitee.com/aieditor-team/aieditor</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
57
index.html
57
index.html
|
|
@ -4,42 +4,45 @@
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>AiEditor Demo</title>
|
<title>AiEditor Demo</title>
|
||||||
</head>
|
<script>
|
||||||
<script>
|
let isDark = false;
|
||||||
let isDark = false;
|
function dark() {
|
||||||
function dark(){
|
if (!isDark) {
|
||||||
if (!isDark){
|
document.body.style.background = "#1a1b1e"
|
||||||
document.body.style.background="#1a1b1e"
|
document.querySelector("#title").style.color = "#eee"
|
||||||
document.querySelector("#title").style.color="#eee"
|
document.querySelector("#aiEditor").classList.remove("aie-theme-light");
|
||||||
document.querySelector("#aiEditor").classList.remove("aie-theme-light");
|
document.querySelector("#aiEditor").classList.add("aie-theme-dark");
|
||||||
document.querySelector("#aiEditor").classList.add("aie-theme-dark");
|
} else {
|
||||||
}else {
|
document.body.style.background = ""
|
||||||
document.body.style.background=""
|
document.querySelector("#title").style.color = ""
|
||||||
document.querySelector("#title").style.color=""
|
document.querySelector("#aiEditor").classList.remove("aie-theme-dark");
|
||||||
document.querySelector("#aiEditor").classList.remove("aie-theme-dark");
|
document.querySelector("#aiEditor").classList.add("aie-theme-light");
|
||||||
document.querySelector("#aiEditor").classList.add("aie-theme-light");
|
}
|
||||||
|
isDark = !isDark;
|
||||||
}
|
}
|
||||||
isDark = !isDark;
|
|
||||||
}
|
|
||||||
|
|
||||||
var _hmt = _hmt || [];
|
var _hmt = _hmt || [];
|
||||||
(function() {
|
(function () {
|
||||||
var hm = document.createElement("script");
|
var hm = document.createElement("script");
|
||||||
hm.src = "https://hm.baidu.com/hm.js?9fd447a0f9e62a84d1b752a2cacb2c6b";
|
hm.src = "https://hm.baidu.com/hm.js?9fd447a0f9e62a84d1b752a2cacb2c6b";
|
||||||
var s = document.getElementsByTagName("script")[0];
|
var s = document.getElementsByTagName("script")[0];
|
||||||
s.parentNode.insertBefore(hm, s);
|
s.parentNode.insertBefore(hm, s);
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
||||||
<div style="padding: 10px 20px;font-size: 30px" id="title">
|
<div style="padding: 10px 20px;font-size: 30px" id="title">
|
||||||
AiEditor，一个面向 AI 的下一代富文本编辑器。 <button onclick="dark()">切换主题</button> <br />
|
AiEditor，一个面向 AI 的下一代富文本编辑器。
|
||||||
开源网址：<a href="https://gitee.com/aieditor-team/aieditor" target="_blank">https://gitee.com/aieditor-team/aieditor</a>
|
<button onclick="dark()">切换主题</button>
|
||||||
|
<br/>
|
||||||
|
开源网址：<a href="https://gitee.com/aieditor-team/aieditor"
|
||||||
|
target="_blank">https://gitee.com/aieditor-team/aieditor</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="aiEditor" style="height: 550px; margin: 20px"></div>
|
<div id="aiEditor" style="height: 450px; margin: 20px"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,7 @@ export class Footer extends HTMLElement implements AiEditorEvent {
|
||||||
this.innerHTML = `
|
this.innerHTML = `
|
||||||
<div style="display: flex">
|
<div style="display: flex">
|
||||||
<span> Powered by AiEditor, Characters: ${this.count} </span>
|
<span> Powered by AiEditor, Characters: ${this.count} </span>
|
||||||
<div style="width: 20px;height: 20px">
|
<div style="width: 20px;height: 20px;overflow: hidden">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 16L6 10H18L12 16Z"></path></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 16L6 10H18L12 16Z"></path></svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue