tianyunperfect
/
web-base--


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本编辑器示例</title>
    <!-- 引入Quill样式 -->
    <link rel="stylesheet" href="css/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="https://web.tianyunperfect.cn/simple/js/lodash.min.js"></script>
    <script src="https://do.tianyunperfect.cn/js/axios.min.js"></script>
    <script src="js/util.js"></script>
    <script src="https://map.tianyunperfect.cn/common-page.js"></script>
</head>
<body>
<!-- 创建一个用于编辑的容器 -->
<div id="editor"></div>

<!-- 引入Quill库 -->
<script src="js/quill.js"></script>
<script>
    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'],
            ]
        }
    });


    let all_data = {};
    let pageManager = new PageManager();
    pageManager.type='html';
    const updateData = _.debounce(pageManager.updateData, 1000)
    pageManager.init().then(res => {
        all_data = res;
        console.log(res)
        if (res && res.content) {
            // 初始化数据
            let showContent = res.content;
            if (pageManager.isBackup){
                // 如果是备份
                showContent = res.content_back;
            }
            quill.setContents(quill.clipboard.convert(showContent));
        }

        if (pageManager.isReadOnly()) {
            // 备份页面或分享页面，设置为只读
            quill.enable(false);
        }
    });

    pageManager.setNameCallBack(() => {
        let title = localStorage.getItem("title");
        document.title = title + " - 问答";
        all_data.title = title;
    })

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

        if (pageManager.isReadOnly()) {
            // 处理只读的情况  todo
            return;
        }
        all_data.content = quill.root.innerHTML;
        updateData(all_data);
    });

</script>

</body>
</html>