tianyunperfect
/
web-base--


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
							<!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 - 20px); /* 假设其他元素的高度是100px */
        }

        .ql-editor ol, .ql-editor ul {
            padding-left: 0em;
        }

        .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
            padding-left: 3.5em;
        }

        .ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
            padding-left: 5em;
        }

        .ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
            padding-left: 6.5em;
        }

        .ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
            padding-left: 8em;
        }

        .ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
            padding-left: 9.5em;
        }

        .ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
            padding-left: 11em;
        }

        .ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
            padding-left: 12.5em;
        }

        .ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
            padding-left: 14em;
        }

        .ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
            padding-left: 15.5em;
        }

        .ql-editor li.ql-indent-10:not(.ql-direction-rtl) {
            padding-left: 17em;
        }

    </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>
    function isSharePage() {
        // 有share_id参数，没有id参数
        return getQueryString("share_id") && !getQueryString("id");
    }

    function getShareId() {
        return getQueryString("share_id").split("#")[0];
    }

    function setContent(content) {
        document.getElementById("editor").innerHTML = content;
    }

    function getDataByShareId(id) {
        let res = requestUtil.sync("https://web_history.tianyunperfect.cn/content/selectByShareId?id=" + id, "get");
        if (res.code === 200) {
            if (res.res.length > 0) {
                setContent(res.res[0].content)
                sharePageSet();
            }
        }
    }

    // 获取当前时间戳 减去 2024年1月1日的时间戳
    let timestamp = getTimeStamp();

    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) {
                setContent(res.res[0].content);
                showTextOnTopRight("✅");

                if (isSharePage()) {
                    sharePageSet();
                }
            }
        }
    } else if (isSharePage()) {
        getDataByShareId(getShareId())
    } else {
        let share_id = timestamp * 10000 + Math.floor(Math.random() * 10000 + 1);
        // 重定向
        location.href = requestUtil.buildUrl(location.href, {"id": timestamp, share_id: share_id})
    }

    const quill = new Quill('#editor', {
        theme: 'snow', // 指定使用的主题
        modules: {
            // toolbar: false
            toolbar: [
                [{'header': [1, 2, false]}, 'bold', 'italic', 'blockquote', 'code-block', 'link'],
                [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}, 'image', 'video'],
            ]
        }
    });

    // 获取编辑器内容
    function getContent() {
        const content = quill.root.innerHTML;
        console.log(content);
    }

    function sharePageSet() {
        showTextOnTopRight("分享页面，只读");
    }

    function sysncContent() {
        let content = quill.root.innerHTML;
        let res = requestUtil.sync("https://web_history.tianyunperfect.cn/content/updateOrInsert", "post", {
            "id": id,
            "type": "html",
            "content": content,
            "share_id": getShareId()
        });
        if (res.code == 200) {
            console.log("同步成功");
            showTextOnTopRight("✅");
        }
    }

    let debounce1 = debounce(sysncContent, 1000);
    // 监听编辑器内容变化
    quill.on('text-change', function (delta, oldDelta, source) {
        // delta - 表示变化的内容
        // oldDelta - 表示变化前的内容
        // source - 表示触发变化的原因，如'user'（用户输入）或'silent'（编程方式修改）

        // 在这里执行你想要的操作，比如更新数据或执行其他逻辑
        if (isSharePage()) {
            sharePageSet();
            return;
        }
        console.log("内容发生变化");
        showTextOnTopRight("待同步");
        // 防抖 1秒内同步一次
        debounce1();
    });

    function showTextOnTopRight(text) {
        let id1 = "showTextOnTopRight";
        // 删除之前的
        let oldDiv = document.getElementById(id1);
        if (oldDiv) {
            document.body.removeChild(oldDiv);
        }
        // 在屏幕右上角显示一个文本
        let div = document.createElement("div");
        // 设置id
        div.id = id1;
        div.style.position = "fixed";
        div.style.top = "8px";
        div.style.right = "8px";
        div.style.padding = "5px";
        div.style.backgroundColor = "#fff";
        div.style.border = "1px solid #ccc";
        div.style.borderRadius = "5px";
        div.style.zIndex = "9999";
        // 字体大小
        div.style.fontSize = "12px";
        div.innerHTML = text;
        document.body.appendChild(div);
    }

</script>

</body>
</html>