maxjhandsome
/
aieditor
mirror of https://gitee.com/aieditor-team/aieditor.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: optimize styles

This commit is contained in:
开源海哥 2023-11-14 19:47:40 +08:00
parent c11310b959
commit 7446ec8c67
4 changed files with 67 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demos/layui/index.html
View File

@ -7,6 +7,7 @@
<link type="text/css" rel="stylesheet" href="./aieditor/style.css">
<script type="module">
import {AiEditor} from './aieditor/index.es.js'
new AiEditor({
element: "#aiEditor",
placeholder: "点击输入内容...",
@ -33,6 +34,7 @@
<script>
let isDark = false;
function dark() {
if (!isDark) {
document.body.style.background = "#1a1b1e"
@ -56,7 +58,6 @@
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>

64
demos/vanilla-ts/index.html
View File

@ -1,41 +1,45 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<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;
}
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>AiEditor Demo</title>
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>
<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 || [];
(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>
<div style="padding: 10px 20px;font-size: 30px" id="title">
AiEditor，一个面向 AI 的下一代富文本编辑器。 <button onclick="dark()">切换主题</button> <br />
开源网址：<a href="https://gitee.com/aieditor-team/aieditor" target="_blank">https://gitee.com/aieditor-team/aieditor</a>
AiEditor，一个面向 AI 的下一代富文本编辑器。
<button onclick="dark()">切换主题</button>
<br/>
开源网址：<a href="https://gitee.com/aieditor-team/aieditor"
target="_blank">https://gitee.com/aieditor-team/aieditor</a>
</div>

57
index.html
View File

@ -4,42 +4,45 @@
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<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");
<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;
}
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>
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>
<div style="padding: 10px 20px;font-size: 30px" id="title">
AiEditor，一个面向 AI 的下一代富文本编辑器。 <button onclick="dark()">切换主题</button> <br />
开源网址：<a href="https://gitee.com/aieditor-team/aieditor" target="_blank">https://gitee.com/aieditor-team/aieditor</a>
AiEditor，一个面向 AI 的下一代富文本编辑器。
<button onclick="dark()">切换主题</button>
<br/>
开源网址：<a href="https://gitee.com/aieditor-team/aieditor"
target="_blank">https://gitee.com/aieditor-team/aieditor</a>
</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>
</body>
</html>

2
src/components/Footer.ts
View File

@ -59,7 +59,7 @@ export class Footer extends HTMLElement implements AiEditorEvent {
this.innerHTML = `
<div style="display: flex">
<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>
</div>
</div>