tianyunperfect
/
web-base--


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
							<!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>