|
|
@@ -8,8 +8,9 @@
|
|
|
<link rel="stylesheet" href="./js/quill.snow.css">
|
|
|
<script src="js/util.js"></script>
|
|
|
<style>
|
|
|
- #editor {
|
|
|
- height: 150px;
|
|
|
+ .editor {
|
|
|
+ height: 130px;
|
|
|
+ padding: 10px;
|
|
|
}
|
|
|
|
|
|
#mask {
|
|
|
@@ -35,6 +36,7 @@
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
</style>
|
|
|
+ <script src="js/markdown.min.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="all">
|
|
|
@@ -50,7 +52,7 @@
|
|
|
<br><br>
|
|
|
<div></div>
|
|
|
<!-- 创建一个用于编辑的容器 -->
|
|
|
- <div id="editor"></div>
|
|
|
+ <textarea id="editor" class="editor" rows="4" style="width: 95%" onchange="localStorage.setItem(contentStr, getEditContent())"></textarea>
|
|
|
|
|
|
<!-- 添加多选按钮 -->
|
|
|
<div id="tags"></div>
|
|
|
@@ -68,11 +70,11 @@
|
|
|
<div id="mask" style="display: none">
|
|
|
<div id="model">
|
|
|
<!-- 创建时间的input-->
|
|
|
- <div style="margin: 10px">
|
|
|
+ <div style="margin: 10px; height: 20px">
|
|
|
<label for="created_ts">创建时间</label>
|
|
|
<input id="created_ts"></input>
|
|
|
</div>
|
|
|
- <div id="editorModel"></div>
|
|
|
+ <textarea id="editorModel" class="editor" rows="4" style="width: 95%"></textarea>
|
|
|
<br>
|
|
|
<!-- 取消 和 确认按钮-->
|
|
|
<button onclick="hideModel()" style="margin-right: 50px">取消</button>
|
|
|
@@ -81,7 +83,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 引入Quill库 -->
|
|
|
-<script src="./js/cdn.quilljs.com_1.3.6_quill.js"></script>
|
|
|
+<!--<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";
|
|
|
@@ -102,7 +104,7 @@
|
|
|
// 如果是location.href 包含tag，则设置为选中状态, href 要反编译以识别中文
|
|
|
if (decodeURI(location.href).indexOf(tag) !== -1) {
|
|
|
input.checked = true;
|
|
|
- }else if (tagsFromLocal.indexOf(tag) !== -1) {
|
|
|
+ } else if (tagsFromLocal.indexOf(tag) !== -1) {
|
|
|
input.checked = true;
|
|
|
}
|
|
|
input.type = 'checkbox';
|
|
|
@@ -127,6 +129,7 @@
|
|
|
setTagsToLocal();
|
|
|
}
|
|
|
});
|
|
|
+ myEdit.focus();
|
|
|
});
|
|
|
|
|
|
function setTagsToLocal() {
|
|
|
@@ -138,6 +141,7 @@
|
|
|
let tags = getSelectedCategories();
|
|
|
localStorage.setItem('tags', JSON.stringify(tags));
|
|
|
}
|
|
|
+
|
|
|
function getTagsFromLocal() {
|
|
|
if (decodeURI(location.href).indexOf("tag") !== -1) {
|
|
|
return [];
|
|
|
@@ -158,26 +162,23 @@
|
|
|
document.getElementById('mask').style.display = 'none';
|
|
|
}
|
|
|
|
|
|
+ // 获取编辑器
|
|
|
|
|
|
- let option = {
|
|
|
- theme: 'snow', // 指定使用的主题
|
|
|
- modules: {
|
|
|
- toolbar: [
|
|
|
- [{'header': [1, 2, false]}, 'bold', 'italic', 'blockquote', 'code-block', 'link'],
|
|
|
- [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}, 'image', 'video'],
|
|
|
- ]
|
|
|
- }
|
|
|
- };
|
|
|
- const quill = new Quill('#editor', option);
|
|
|
- const quillModel = new Quill('#editorModel', option);
|
|
|
- quill.focus();
|
|
|
+ const myEdit = document.querySelector('#editor');
|
|
|
+ const model = document.querySelector('#editorModel');
|
|
|
+ function getEditContent() {
|
|
|
+ return myEdit.value;
|
|
|
+ }
|
|
|
+ function getModelContent() {
|
|
|
+ return model.value;
|
|
|
+ }
|
|
|
|
|
|
let contentStr = 'content';
|
|
|
|
|
|
// 从localStorage中获取内容
|
|
|
let item = localStorage.getItem(contentStr);
|
|
|
if (item != null) {
|
|
|
- quill.root.innerHTML = item;
|
|
|
+ myEdit.value = item;
|
|
|
}
|
|
|
|
|
|
// 如果处于编辑状态，则执行esc取消
|
|
|
@@ -200,63 +201,6 @@
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- 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 += ``;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- return markdown;
|
|
|
- }
|
|
|
-
|
|
|
- // 获取编辑器内容
|
|
|
- // function getContent() {
|
|
|
- // const content = quill.root.innerHTML;
|
|
|
- // console.log(content);
|
|
|
- // }
|
|
|
// 发送数据
|
|
|
async function sendData() {
|
|
|
// 使id=log 不可用
|
|
|
@@ -264,7 +208,7 @@
|
|
|
logBtn.disabled = true;
|
|
|
logBtn.innerText = '正在发送...';
|
|
|
|
|
|
- const content = await deltaToMarkdown(quill.getContents());
|
|
|
+ const content = getEditContent();
|
|
|
const categories = getSelectedCategories();
|
|
|
|
|
|
// 添加多选按钮选择的分类到内容前面
|
|
|
@@ -293,7 +237,7 @@
|
|
|
|
|
|
logBtn.disabled = false;
|
|
|
logBtn.innerText = '记录';
|
|
|
- quill.root.innerHTML = '';
|
|
|
+ myEdit.value = '';
|
|
|
|
|
|
localStorage.removeItem(contentStr);
|
|
|
search();
|
|
|
@@ -313,10 +257,11 @@
|
|
|
}
|
|
|
|
|
|
let tmpId;
|
|
|
+ let timeStr;
|
|
|
|
|
|
// 更新数据
|
|
|
async function updateById() {
|
|
|
- let content = await deltaToMarkdown(quillModel.getContents());
|
|
|
+ let content = getModelContent();
|
|
|
content = content.replace(/\n+$/, '');
|
|
|
|
|
|
let data = {
|
|
|
@@ -328,8 +273,8 @@
|
|
|
showMsg('保存成功', 1);
|
|
|
hideModel();
|
|
|
// 根据id ，更新当前页面
|
|
|
- document.getElementById(tmpId).innerText = formatTimeStr(document.getElementById('created_ts').value) + "\n" + content;
|
|
|
-
|
|
|
+ document.getElementById('time_' + tmpId).innerText = document.getElementById('created_ts').value;
|
|
|
+ document.getElementById(tmpId).innerText = content;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -394,36 +339,50 @@
|
|
|
div.innerHTML = '';
|
|
|
res.forEach(item => {
|
|
|
let lineDiv = document.createElement('div');
|
|
|
+ lineDiv.style.display = 'flex';
|
|
|
+ lineDiv.style.alignItems = 'flex-end';
|
|
|
+
|
|
|
div.appendChild(lineDiv);
|
|
|
|
|
|
+ let contentDiv = document.createElement('div');
|
|
|
+ contentDiv.style.border = '1px solid #000';
|
|
|
+ contentDiv.style.width = '70vw';
|
|
|
+ contentDiv.style.margin = '10px';
|
|
|
+ contentDiv.style.padding = '10px';
|
|
|
+ contentDiv.style.cursor = 'pointer';
|
|
|
+ lineDiv.appendChild(contentDiv);
|
|
|
+
|
|
|
+ let timeStr = formatTimeStr(item['created_ts']);
|
|
|
+ // 创建一个span 标签，显示时间
|
|
|
+ let timeSpan = document.createElement('div');
|
|
|
+ let id = item['id'];
|
|
|
+ timeSpan.id = 'time_' + id;
|
|
|
+ timeSpan.innerText = timeStr;
|
|
|
+ contentDiv.appendChild(timeSpan);
|
|
|
+
|
|
|
|
|
|
let tmpDiv = document.createElement('div');
|
|
|
- tmpDiv.id = item['id'];
|
|
|
- tmpDiv.innerText = formatTimeStr(item['created_ts']) + "\n" + item['content'];
|
|
|
+ tmpDiv.id = id;
|
|
|
+ tmpDiv.innerText = item['content'];
|
|
|
+ // 宽度100%
|
|
|
+ tmpDiv.style.width = '100%';
|
|
|
// 样式加上border，点击跳转到对应的url https://memos.tianyunperfect.cn/m/ + item['resource_name']
|
|
|
- tmpDiv.style.border = '1px solid #000';
|
|
|
- // 宽度 70vw
|
|
|
- tmpDiv.style.width = '70vw';
|
|
|
- tmpDiv.style.margin = '10px';
|
|
|
- tmpDiv.style.padding = '10px';
|
|
|
- tmpDiv.style.cursor = 'pointer';
|
|
|
+
|
|
|
// inline
|
|
|
tmpDiv.style.display = 'inline-block';
|
|
|
tmpDiv.ondblclick = function () {
|
|
|
- tmpId = item['id'];
|
|
|
- let innerText = document.getElementById(item['id']).innerText;
|
|
|
- quillModel.root.innerHTML = innerText.split('\n').slice(1).join('\n');
|
|
|
- document.getElementById('created_ts').value = formatTimeStr(innerText.split('\n')[0]);
|
|
|
+ tmpId = id;
|
|
|
+ model.value = document.getElementById(id).innerText;
|
|
|
+ document.getElementById('created_ts').value = document.getElementById('time_' + id).innerText;
|
|
|
showModel();
|
|
|
- // focus
|
|
|
- quillModel.focus();
|
|
|
+ model.focus();
|
|
|
};
|
|
|
// 根据id，查找是否存在资源
|
|
|
- if (resourceMap[item['id']]) {
|
|
|
+ if (resourceMap[id]) {
|
|
|
// tmpDiv 新增一个换行
|
|
|
tmpDiv.appendChild(document.createElement('br'));
|
|
|
// 循环遍历，以memo_id为key，resource_name数组为value
|
|
|
- resourceMap[item['id']].forEach(internal_path => {
|
|
|
+ resourceMap[id].forEach(internal_path => {
|
|
|
// 创建img
|
|
|
let img = document.createElement('img');
|
|
|
img.src = `https://memos_assert.tianyunperfect.cn/${internal_path}?width=150`;
|
|
|
@@ -435,7 +394,7 @@
|
|
|
tmpDiv.appendChild(img);
|
|
|
});
|
|
|
}
|
|
|
- lineDiv.appendChild(tmpDiv);
|
|
|
+ contentDiv.appendChild(tmpDiv);
|
|
|
|
|
|
|
|
|
// 右侧添加一个编辑按钮
|
|
|
@@ -458,7 +417,7 @@
|
|
|
archiveBtn.style.display = 'inline-block';
|
|
|
archiveBtn.onclick = function () {
|
|
|
let data = {
|
|
|
- id: item['id']
|
|
|
+ id: id
|
|
|
};
|
|
|
requestUtil.async(`https://web_history.tianyunperfect.cn/memos/archive`, 'post', data, {}).then(res => {
|
|
|
showMsg('归档成功', 1);
|
|
|
@@ -480,7 +439,7 @@
|
|
|
return;
|
|
|
}
|
|
|
let data = {
|
|
|
- id: item['id']
|
|
|
+ id: id
|
|
|
};
|
|
|
requestUtil.async(`https://web_history.tianyunperfect.cn/memos/delete`, 'post', data, {}).then(res => {
|
|
|
showMsg('删除成功', 1);
|
tianyun