tianyunperfect
/
web-base--


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<!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: 150px;
        }
    </style>
</head>
<body>
<!-- 创建一个用于编辑的容器 -->
<div id="editor"></div>

<!-- 添加多选按钮 -->
<input type="checkbox" id="diary" name="category" value="日记">
<label for="diary">日记</label>
<input type="checkbox" id="dream" name="category" value="梦记">
<label for="dream">梦记</label>
<input type="checkbox" id="daily" name="category" value="日常">
<label for="daily">日常</label>

<!-- 添加发送按钮 -->
<button onclick="sendData()">发送</button>

<!-- 引入Quill库 -->
<script src="./js/cdn.quilljs.com_1.3.6_quill.js"></script>
<script src="https://web.tianyunperfect.cn/simple/js/util.js"></script>
<!--异步请求示例：requestUtil.sync('https://jsonplaceholder.typicode.com/posts/1', 'post', data, headers) .then(data => console.log(data))-->
<script>
    const quill = new Quill('#editor', {
        theme: 'snow', // 指定使用的主题
        modules: {
            toolbar: [
                [{'header': [1, 2, false]}, 'bold', 'italic', 'blockquote', 'code-block', 'link'],
                [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}, 'image', 'video'],
            ]
        }
    });

    /**
     * 获取 markdown 格式的内容
     * @param delta
     * @returns {string}
     */
    function deltaToMarkdown(delta) {
        let markdown = '';
        delta.forEach(function(op) {
            if (op.insert) {
                if (typeof op.insert === 'string') {
                    markdown += op.insert;
                } else if (typeof op.insert === 'object' && op.insert.image) {
                    markdown += '![' + op.insert.alt + '](' + op.insert.image + ')';
                }
            }
        });
        return markdown;
    }

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

    // 发送数据
    function sendData() {
        const content = deltaToMarkdown(quill.getContents());
        const categories = getSelectedCategories();

        // 添加多选按钮选择的分类到内容前面
        const updatedContent = `${content} #${categories.join(' ')}`;

        // 调用数据备份接口
        const data = {
            content: updatedContent
        };

        // 发送异步请求
        requestUtil.async('https://memos.tianyunperfect.cn/api/memo?openId=043a086f-e0a3-4711-aa79-5c3cbe89f97c', 'post', data, {
            'Content-type': 'application/json'
        }).then(res => {
            if (res['data']) {
                showMsg("发送成功", 1);
            }
        });
    }

    // 获取选择的分类
    function getSelectedCategories() {
        const checkboxes = document.querySelectorAll('input[name="category"]:checked');
        const categories = [];

        checkboxes.forEach(checkbox => {
            categories.push(checkbox.value);
        });

        return categories;
    }
</script>

</body>
</html>