|
|
@@ -0,0 +1,102 @@
|
|
|
+<!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="//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 += '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ 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(data => console.log(data));
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取选择的分类
|
|
|
+ function getSelectedCategories() {
|
|
|
+ const checkboxes = document.querySelectorAll('input[name="category"]:checked');
|
|
|
+ const categories = [];
|
|
|
+
|
|
|
+ checkboxes.forEach(checkbox => {
|
|
|
+ categories.push(checkbox.value);
|
|
|
+ });
|
|
|
+
|
|
|
+ return categories;
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
tianyun