|
|
@@ -0,0 +1,80 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>文本编辑器示例</title>
|
|
|
+ <!-- 引入Quill样式 -->
|
|
|
+ <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css">
|
|
|
+ <style>
|
|
|
+ #editor {
|
|
|
+ height: calc(100vh - 70px); /* 假设其他元素的高度是100px */
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <script src="js/axios.min.js"></script>
|
|
|
+ <script src="js/util.js"></script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<!-- 创建一个用于编辑的容器 -->
|
|
|
+<div id="editor"></div>
|
|
|
+
|
|
|
+<!-- 引入Quill库 -->
|
|
|
+<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
|
|
|
+<script>
|
|
|
+ // 获取当前时间戳 减去 2024年1月1日的时间戳
|
|
|
+ var timestamp = Date.parse(new Date()) - Date.parse(new Date('2024-01-01 00:00:00'));
|
|
|
+ timestamp = timestamp / 1000;
|
|
|
+
|
|
|
+ let id = getQueryString("id");
|
|
|
+ // 获取编辑器内容
|
|
|
+ if (id) {
|
|
|
+ let res = requestUtil.sync("https://web_history.tianyunperfect.cn/content/select?id=" + id, "get");
|
|
|
+ if (res.code == 200) {
|
|
|
+ if (res.res.length > 0) {
|
|
|
+ document.getElementById("editor").innerHTML = res.res[0].content;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 重定向
|
|
|
+ location.href = requestUtil.buildUrl(location.href, {"id": timestamp})
|
|
|
+ }
|
|
|
+
|
|
|
+ const quill = new Quill('#editor', {
|
|
|
+ theme: 'snow', // 指定使用的主题
|
|
|
+ modules: {
|
|
|
+ toolbar: false
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 获取编辑器内容
|
|
|
+ function getContent() {
|
|
|
+ const content = quill.root.innerHTML;
|
|
|
+ console.log(content);
|
|
|
+ }
|
|
|
+
|
|
|
+ function sysncContent() {
|
|
|
+ let content = quill.root.innerHTML;
|
|
|
+ let res = requestUtil.sync("https://web_history.tianyunperfect.cn/content/updateOrInsert", "post", {
|
|
|
+ "id": id,
|
|
|
+ "content": content
|
|
|
+ });
|
|
|
+ if (res.code == 200) {
|
|
|
+ console.log("同步成功");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let debounce1 = debounce(sysncContent, 1000);
|
|
|
+ // 监听编辑器内容变化
|
|
|
+ quill.on('text-change', function (delta, oldDelta, source) {
|
|
|
+ // delta - 表示变化的内容
|
|
|
+ // oldDelta - 表示变化前的内容
|
|
|
+ // source - 表示触发变化的原因，如'user'（用户输入）或'silent'（编程方式修改）
|
|
|
+
|
|
|
+ // 在这里执行你想要的操作，比如更新数据或执行其他逻辑
|
|
|
+ console.log("内容发生变化");
|
|
|
+ // 防抖 1秒内同步一次
|
|
|
+ debounce1();
|
|
|
+ });
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
tianyun