//protyle.toolbar.setInlineMark
(() => {
// 创建按钮组
const buttonGroup = document.createElement('div');
buttonGroup.style.position = 'fixed';
buttonGroup.style.top = '600px';
buttonGroup.style.left = '1200px';
buttonGroup.style.display = 'flex';
buttonGroup.style.flexDirection = 'column';
buttonGroup.style.cursor = 'move';
buttonGroup.style.userSelect = 'none';
// 创建颜色按钮
function createButton(color) {
const button = document.createElement('button');
button.textContent = color.name;
button.style.backgroundColor = color.background;
button.style.color = color.color;
button.style.padding = '1px 2px';
button.style.border = 'none';
button.style.cursor = 'pointer';
button.style.marginBottom = '5px';
button.addEventListener('click', async () => {
const protyle = getProtyle();
if (!protyle) {
console.error("未找到 Protyle 实例");
return;
}
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
if (range.startContainer.nodeType === Node.TEXT_NODE && range.startContainer.parentNode) {
protyle.toolbar.setInlineMark(protyle, "bold", range);
if (color.background) {
protyle.toolbar.setInlineMark(protyle, "backgroundColor", range, {
type: "backgroundColor",
color: color.background
});
}
if (color.color) {
protyle.toolbar.setInlineMark(protyle, "color", range, {
type: "color",
color: color.color
});
}
} else {
console.error("选中的文本范围不包含有效的节点");
}
}
});
button.addEventListener('mouseover', () => {
button.style.background = 'linear-gradient(to right, #ff7e5f, #feb47b)';
button.style.color = 'white';
});
button.addEventListener('mouseout', () => {
button.style.background = color.background;
button.style.color = color.color;
});
return button;
}
// 创建清除样式按钮
function createClearButton() {
const button = document.createElement('button');
button.textContent = '清除';
button.style.backgroundColor = '#CCCCCC';
button.style.color = '#000000';
button.style.padding = '1px 2px';
button.style.border = 'none';
button.style.cursor = 'pointer';
button.addEventListener('click', async () => {
const protyle = getProtyle();
if (!protyle) {
console.error("未找到 Protyle 实例");
return;
}
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
if (range.startContainer.nodeType === Node.TEXT_NODE && range.startContainer.parentNode) {
protyle.toolbar.setInlineMark(protyle, "clear", range);
} else {
console.error("选中的文本范围不包含有效的节点");
}
}
});
return button;
}
// 获取Protyle实例
function getProtyle() {
try {
if (document.getElementById("sidebar")) return siyuan.mobile.editor.protyle;
const currDoc = siyuan?.layout?.centerLayout?.children.map(item => item.children.find(item => item.headElement?.classList.contains('item--focus') && (item.panelElement.closest('.layout__wnd--active') || item.panelElement.closest('[data-type="wnd"]')))).find(item => item);
return currDoc?.model.editor.protyle;
} catch (e) {
console.error(e);
return null;
}
}
const colors = [
{
name: '黄色',
background: '#FFFF00',
color: '#000000'
},
{
name: '蓝色',
background: '#0000FF',
color: '#FFFFFF'
},
{
name: '绿色',
background: '#00FF00',
color: '#000000'
},
{
name: '红色',
background: '#FF0000',
color: '#FFFFFF'
}
];
const buttons = colors.map(createButton);
const clearButton = createClearButton();
document.addEventListener('keydown', function (e) {
if (e.ctrlKey) {
const key = e.key.toLowerCase();
const index = ['e', 'r', 't', 'y'].indexOf(key);
if (index !== -1) {
buttons[index].click();
}
if (key === 'c') {
clearButton.click();
}
}
});
buttons.forEach(button => buttonGroup.appendChild(button));
buttonGroup.appendChild(clearButton);
document.body.appendChild(buttonGroup);
let startX;
let startY;
let isDragging = false;
buttonGroup.addEventListener('mousedown', function (e) {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
});
document.addEventListener('mousemove', function (e) {
if (isDragging) {
const dx = e.clientX - startX;
const dy = e.clientY - startY;
const rect = buttonGroup.getBoundingClientRect();
let newLeft = rect.left + dx;
let newTop = rect.top + dy;
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const buttonGroupWidth = buttonGroup.offsetWidth;
const buttonGroupHeight = buttonGroup.offsetHeight;
newLeft = Math.max(0, Math.min(newLeft, viewportWidth - buttonGroupWidth));
newTop = Math.max(0, Math.min(newTop, viewportHeight - buttonGroupHeight));
buttonGroup.style.left = `${newLeft}px`;
buttonGroup.style.top = `${newTop}px`;
startX = e.clientX;
startY = e.clientY;
}
});
document.addEventListener('mouseup', function () {
isDragging = false;
});
})();
[js] 快速改样式 ----// 利用 protyle.toolbar.setInlineMark 进行块更新后保存
-
思源笔记
23830 引用 • 96870 回帖
思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。
融合块、大纲和双向链接,重构你的思维。
-
代码片段
109 引用 • 762 回帖
代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。
用户在该标签下分享代码片段时需在帖子标题前添加
[css]
或[js]
用于区分代码片段类型。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于