tianyunperfect
/
web-base--


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>memos记录</title>
    <!-- 引入Quill样式 -->
    <link rel="stylesheet" href="./js/quill.snow.css">
    <script src="js/util.js"></script>
    <style>
        #editor {
            height: 150px;
        }
    </style>
</head>
<body>
<a href="https://memos.tianyunperfect.cn/">memos主页</a><br><br>

<div></div>
<!-- 创建一个用于编辑的容器 -->
<div id="editor"></div>

<!-- 添加多选按钮 -->
<div id="tags"></div>
<!--<input type="checkbox" id="todo" name="category" value="todo" checked> <label for="todo">todo</label>-->

<!--<input type="checkbox" id="work" name="category" value="工作">-->
<!--<label for="work">工作</label>-->
<!--<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>-->

<br>
<br>
<!-- 添加发送按钮 -->
<button id="log" style="float: right; height: 100px;width: 200px; font-size: 40px" onclick="sendData()">记录</button>

<!-- 引入Quill库 -->
<script src="./js/cdn.quilljs.com_1.3.6_quill.js"></script>
<!--异步请求示例：requestUtil.sync('https://jsonplaceholder.typicode.com/posts/1', 'post', data, headers) .then(data => console.log(data))-->
<script>
    let authStr = "bearer eyJhbGciOiJIUzI1NiIsImtpZCI6InYxIiwidHlwIjoiSldUIn0.eyJuYW1lIjoidGlhbnl1bnBlcmZlY3QiLCJpc3MiOiJtZW1vcyIsInN1YiI6IjEiLCJhdWQiOlsidXNlci5hY2Nlc3MtdG9rZW4iXSwiaWF0IjoxNzA5MTc5NTUyfQ.LFxWB4efya1sL7VoJ42xpXxbAip-udT_Kx2OwZ8Y3-E";
    let myHeaders = {
        'Content-type': 'application/json',
        'Authorization': authStr
    };
    // console.log(location.href)
    // console.log(location.href.indexOf(tag))
    // 设置多选按钮 标签
    requestUtil.async('https://memos.tianyunperfect.cn/api/v1/tag', 'get', null, {'Authorization': authStr}).then(res => {
        // console.log(res); ['tag1','tag2']
        // 在 id tags  里面拼接res数组 ，示例todo标签 <input type="checkbox" id="todo" name="category" value="todo" checked> <label for="todo">todo</label>
        let tags = document.getElementById('tags');
        res.forEach(tag => {
            let input = document.createElement('input');
            // 如果是location.href 包含tag，则设置为选中状态, href 要反编译以识别中文
            if (decodeURI(location.href).indexOf(tag) !== -1) {
                input.checked = true;
            }
            input.type = 'checkbox';
            input.id = tag;
            input.name = 'category';
            input.value = tag;
            let label = document.createElement('label');
            // 设置margin-right 20
            label.style.marginRight = '10px';
            label.htmlFor = tag;
            label.innerText = tag;
            tags.appendChild(input);
            tags.appendChild(label);
        });

    });


    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'],
            ]
        }
    });
    quill.focus();

    let contentStr = 'content';

    // 从localStorage中获取内容
    let item = localStorage.getItem(contentStr);
    if (item != null) {
        quill.root.innerHTML = item;
    }


    quill.on('text-change', function (delta, oldDelta, source) {
        localStorage.setItem(contentStr, quill.root.innerHTML);
    });

    async function convertToWebPAsync(base64Image) {
        // 检查图像格式是否为WebP
        if (base64Image.startsWith('data:image/webp')) {
            // 如果是WebP格式，直接返回原始的base64字符串
            return base64Image;
        } else {
            // 将图像转换为WebP格式
            const image = new Image();
            image.src = base64Image;

            await new Promise((resolve, reject) => {
                image.onload = resolve;
                image.onerror = reject;
            });

            const canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;

            const ctx = canvas.getContext('2d');
            ctx.drawImage(image, 0, 0);

            const webpData = canvas.toDataURL('image/webp');
            return webpData;
        }
    }

    /**
     * 获取 markdown 格式的内容
     * @param delta
     * @returns {string}
     */
    async function deltaToMarkdown(delta) {
        let markdown = '';
        for (const op of delta['ops']) {
            if (op.insert) {
                if (typeof op.insert === 'string') {
                    markdown += op.insert;
                } else if (op.insert.image) {
                    // 如果是图片,转换为webp
                    const webpBase64 = await convertToWebPAsync(op.insert.image);
                    markdown += `![${op.insert.alt}](${webpBase64})`;
                }
            }
        }
        return markdown;
    }

    // 获取编辑器内容
    // function getContent() {
    //     const content = quill.root.innerHTML;
    //     console.log(content);
    // }
    // 发送数据
    async function sendData() {
        // 使id=log 不可用
        let logBtn = document.getElementById('log');
        logBtn.disabled = true;
        logBtn.innerText = '正在发送...';

        const content = await deltaToMarkdown(quill.getContents());
        const categories = getSelectedCategories();

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

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

        // 发送异步请求
        requestUtil.async('https://memos.tianyunperfect.cn/api/v1/memo', 'post', data, myHeaders).then(res => {
            // alert(JSON.stringify(res));
            if (res['name']) {
                // window.location.href = `https://memos.tianyunperfect.cn/m/${res['name']}`;
                showMsg('记录成功', 1);
            }

            logBtn.disabled = false;
            logBtn.innerText = '记录';
            quill.root.innerHTML = '';

            localStorage.removeItem(contentStr);
        });
    }

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

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

        return categories;
    }
</script>

</body>
</html>