send_memos.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  6. <title>memos记录</title>
  7. <!-- 引入Quill样式 -->
  8. <link rel="stylesheet" href="./js/quill.snow.css">
  9. <script src="js/util.js"></script>
  10. <style>
  11. #editor {
  12. height: 150px;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <a href="https://memos.tianyunperfect.cn/">memos主页</a><br><br>
  18. <div></div>
  19. <!-- 创建一个用于编辑的容器 -->
  20. <div id="editor"></div>
  21. <!-- 添加多选按钮 -->
  22. <input type="checkbox" id="todo" name="category" value="todo" checked>
  23. <label for="todo">todo</label>
  24. <input type="checkbox" id="work" name="category" value="工作">
  25. <label for="work">工作</label>
  26. <input type="checkbox" id="diary" name="category" value="日记">
  27. <label for="diary">日记</label>
  28. <input type="checkbox" id="dream" name="category" value="梦记">
  29. <label for="dream">梦记</label>
  30. <input type="checkbox" id="daily" name="category" value="日常">
  31. <label for="daily">日常</label>
  32. <br>
  33. <br>
  34. <!-- 添加发送按钮 -->
  35. <button id="log" style="float: right; height: 100px;width: 200px; font-size: 40px" onclick="sendData()">记录</button>
  36. <!-- 引入Quill库 -->
  37. <script src="./js/cdn.quilljs.com_1.3.6_quill.js"></script>
  38. <!--异步请求示例:requestUtil.sync('https://jsonplaceholder.typicode.com/posts/1', 'post', data, headers) .then(data => console.log(data))-->
  39. <script>
  40. const quill = new Quill('#editor', {
  41. theme: 'snow', // 指定使用的主题
  42. modules: {
  43. toolbar: [
  44. [{'header': [1, 2, false]}, 'bold', 'italic', 'blockquote', 'code-block', 'link'],
  45. [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}, 'image', 'video'],
  46. ]
  47. }
  48. });
  49. quill.focus();
  50. let contentStr = 'content';
  51. // 从localStorage中获取内容
  52. let item = localStorage.getItem(contentStr);
  53. if (item != null) {
  54. quill.root.innerHTML = item;
  55. }
  56. quill.on('text-change', function (delta, oldDelta, source) {
  57. localStorage.setItem(contentStr, quill.root.innerHTML);
  58. });
  59. async function convertToWebPAsync(base64Image) {
  60. // 检查图像格式是否为WebP
  61. if (base64Image.startsWith('data:image/webp')) {
  62. // 如果是WebP格式,直接返回原始的base64字符串
  63. return base64Image;
  64. } else {
  65. // 将图像转换为WebP格式
  66. const image = new Image();
  67. image.src = base64Image;
  68. await new Promise((resolve, reject) => {
  69. image.onload = resolve;
  70. image.onerror = reject;
  71. });
  72. const canvas = document.createElement('canvas');
  73. canvas.width = image.width;
  74. canvas.height = image.height;
  75. const ctx = canvas.getContext('2d');
  76. ctx.drawImage(image, 0, 0);
  77. const webpData = canvas.toDataURL('image/webp');
  78. return webpData;
  79. }
  80. }
  81. /**
  82. * 获取 markdown 格式的内容
  83. * @param delta
  84. * @returns {string}
  85. */
  86. async function deltaToMarkdown(delta) {
  87. let markdown = '';
  88. for (const op of delta['ops']) {
  89. if (op.insert) {
  90. if (typeof op.insert === 'string') {
  91. markdown += op.insert;
  92. } else if (op.insert.image) {
  93. // 如果是图片,转换为webp
  94. const webpBase64 = await convertToWebPAsync(op.insert.image);
  95. markdown += `![${op.insert.alt}](${webpBase64})`;
  96. }
  97. }
  98. }
  99. return markdown;
  100. }
  101. // 获取编辑器内容
  102. // function getContent() {
  103. // const content = quill.root.innerHTML;
  104. // console.log(content);
  105. // }
  106. // 发送数据
  107. async function sendData() {
  108. // 使id=log 不可用
  109. let logBtn = document.getElementById('log');
  110. logBtn.disabled = true;
  111. logBtn.innerText = '正在发送...';
  112. const content = await deltaToMarkdown(quill.getContents());
  113. const categories = getSelectedCategories();
  114. // 添加多选按钮选择的分类到内容前面
  115. let updatedContent = content;
  116. if (categories.length > 0) {
  117. updatedContent = `#${categories.join(' ')} ${content}`;
  118. }
  119. // 调用数据备份接口
  120. const data = {
  121. content: updatedContent
  122. };
  123. // 发送异步请求
  124. requestUtil.async('https://memos.tianyunperfect.cn/api/v1/memo', 'post', data, {
  125. 'Content-type': 'application/json',
  126. 'Authorization': 'bearer eyJhbGciOiJIUzI1NiIsImtpZCI6InYxIiwidHlwIjoiSldUIn0.eyJuYW1lIjoidGlhbnl1bnBlcmZlY3QiLCJpc3MiOiJtZW1vcyIsInN1YiI6IjEiLCJhdWQiOlsidXNlci5hY2Nlc3MtdG9rZW4iXSwiaWF0IjoxNzA5MTc5NTUyfQ.LFxWB4efya1sL7VoJ42xpXxbAip-udT_Kx2OwZ8Y3-E'
  127. }).then(res => {
  128. // alert(JSON.stringify(res));
  129. if (res['name']) {
  130. window.location.href = `https://memos.tianyunperfect.cn/m/${res['name']}`;
  131. }
  132. logBtn.disabled = false;
  133. logBtn.innerText = '记录';
  134. localStorage.removeItem(contentStr);
  135. });
  136. }
  137. // 获取选择的分类
  138. function getSelectedCategories() {
  139. const checkboxes = document.querySelectorAll('input[name="category"]:checked');
  140. const categories = [];
  141. checkboxes.forEach(checkbox => {
  142. categories.push(checkbox.value);
  143. });
  144. return categories;
  145. }
  146. </script>
  147. </body>
  148. </html>