编辑器头部按钮显示与否支持配置

This commit is contained in:
xiaoqi.cxq 2022-11-24 09:06:07 +08:00
parent a756acf27c
commit be9323c408
4 changed files with 71 additions and 3 deletions

View File

@ -114,7 +114,8 @@ export default {
publishLocations: 'current', publishLocations: 'current',
}), }),
pagedownButtons() { pagedownButtons() {
return pagedownButtons.map(button => ({ const buttonShowObj = store.getters['data/computedSettings'].editor.headButtons;
return pagedownButtons.filter(it => buttonShowObj[it.method]).map(button => ({
...button, ...button,
titleWithShortcut: `${button.title}${getShortcut(button.method)}`, titleWithShortcut: `${button.title}${getShortcut(button.method)}`,
iconClass: `icon-${button.icon}`, iconClass: `icon-${button.icon}`,

View File

@ -17,6 +17,32 @@ editor:
monospacedFontOnly: false monospacedFontOnly: false
# 是否显示右上角图标 # 是否显示右上角图标
showInPageButtons: true showInPageButtons: true
# 头部的按钮是否显示独立设置
headButtons:
# 加粗
bold: true
# 斜体
italic: true
# 标题
heading: true
# 删除线
strikethrough: true
# 无序列表
ulist: true
# 有序列表
olist: true
# 可选列表
clist: true
# 块引用
quote: true
# 代码
code: true
# 表格
table: true
# 链接
link: true
# 图片
image: true
# Keyboard shortcuts # Keyboard shortcuts
# See https://craig.is/killing/mice # See https://craig.is/killing/mice

View File

@ -15,7 +15,7 @@ export default [{
method: 'strikethrough', method: 'strikethrough',
title: '删除线', title: '删除线',
icon: 'format-strikethrough', icon: 'format-strikethrough',
}, { // }, {
}, { }, {
method: 'ulist', method: 'ulist',
title: '无序列表', title: '无序列表',
@ -28,7 +28,7 @@ export default [{
method: 'clist', method: 'clist',
title: '可选列表', title: '可选列表',
icon: 'format-list-checks', icon: 'format-list-checks',
}, { // }, {
}, { }, {
method: 'quote', method: 'quote',
title: '块引用', title: '块引用',

View File

@ -1,3 +1,4 @@
import md5 from 'js-md5';
import FileSaver from 'file-saver'; import FileSaver from 'file-saver';
import TemplateWorker from 'worker-loader!./templateWorker.js'; // eslint-disable-line import TemplateWorker from 'worker-loader!./templateWorker.js'; // eslint-disable-line
import localDbSvc from './localDbSvc'; import localDbSvc from './localDbSvc';
@ -34,6 +35,24 @@ function groupHeadings(headings, level = 1) {
return result; return result;
} }
const getImgBase64 = async (uri) => {
if (uri.indexOf('http://') !== 0 && uri.indexOf('https://') !== 0) {
const currDirNode = store.getters['explorer/selectedNodeFolder'];
const absoluteImgPath = utils.getAbsoluteFilePath(currDirNode, uri);
const md5Id = md5(absoluteImgPath);
const imgItem = await localDbSvc.getImgItem(md5Id);
if (imgItem) {
const potIdx = uri.lastIndexOf('.');
const suffix = potIdx > -1 ? uri.substring(potIdx + 1) : 'png';
const mime = `image/${suffix}`;
return `data:${mime};base64,${imgItem.content}`;
}
return '';
}
return uri;
};
const containerElt = document.createElement('div'); const containerElt = document.createElement('div');
containerElt.className = 'hidden-rendering-container'; containerElt.className = 'hidden-rendering-container';
document.body.appendChild(containerElt); document.body.appendChild(containerElt);
@ -65,6 +84,28 @@ export default {
wrapperElt.parentNode.removeChild(wrapperElt); wrapperElt.parentNode.removeChild(wrapperElt);
}); });
// 替换相对路径图片为blob图片
const imgs = Array.prototype.slice.call(containerElt.getElementsByTagName('img')).map((imgElt) => {
let uri = imgElt.attributes.src.nodeValue;
if (uri.indexOf('http://') !== 0 && uri.indexOf('https://') !== 0) {
uri = decodeURIComponent(uri);
imgElt.removeAttribute('src');
return { imgElt, uri };
}
return { imgElt };
});
const loadedPromises = imgs.map(it => new Promise((resolve, reject) => {
if (!it.imgElt.src && it.uri) {
getImgBase64(it.uri).then((newUrl) => {
it.imgElt.src = newUrl;
resolve();
}, () => reject(new Error('加载当前空间图片出错')));
return;
}
resolve();
}));
await Promise.all(loadedPromises);
// Make TOC // Make TOC
const headings = containerElt.querySelectorAll('h1,h2,h3,h4,h5,h6').cl_map(headingElt => ({ const headings = containerElt.querySelectorAll('h1,h2,h3,h4,h5,h6').cl_map(headingElt => ({
title: headingElt.textContent, title: headingElt.textContent,