fix(core): readonly mode should not disable all toolbar buttons

- CSS: replace pointer-events:none on entire toolbar with per-button disabled style
- _updateModeButtons: add readonly mode handling, keep mode-switch/fullscreen/undo/redo enabled
- setReadOnly: call _updateModeButtons to sync button states
This commit is contained in:
2026-07-24 13:08:10 +08:00
parent 485f49c1f1
commit 6c0c5f0c81
2 changed files with 23 additions and 10 deletions
+17 -8
View File
@@ -1069,7 +1069,7 @@ class MarkdownEditor {
_updateModeButtons() {
const isPreview = this._mode === 'preview';
const isEdit = this._mode === 'edit';
const isReadonly = this.config.readOnly;
this.toolbarEl.querySelectorAll('.me-btn').forEach((b) => {
const mode = b.dataset.mode;
@@ -1082,17 +1082,25 @@ class MarkdownEditor {
return;
}
// fullscreen 始终可用
if (action === 'fullscreen') {
b.disabled = false;
return;
}
// readonly 模式:禁用编辑操作按钮,保留 undo/redo
if (isReadonly) {
b.disabled = !(action === 'undo' || action === 'redo');
return;
}
// preview 模式:禁用编辑操作按钮
if (isPreview) {
// undo/redo 在 preview 下也可用
if (action === 'undo' || action === 'redo' || action === 'fullscreen') {
b.disabled = false;
} else {
b.disabled = true;
b.disabled = !(action === 'undo' || action === 'redo');
return;
}
} else {
b.disabled = false;
}
});
}
@@ -1245,6 +1253,7 @@ class MarkdownEditor {
this.config.readOnly = !!readOnly;
if (this.textarea) this.textarea.readOnly = !!readOnly;
if (this.el) this.el.classList.toggle('me-readonly', !!readOnly);
this._updateModeButtons();
return this;
}
+5 -1
View File
@@ -358,7 +358,11 @@ const generateCSS = () => {
opacity: 0.88;
}
.me-wrapper.me-readonly .me-toolbar {
opacity: 0.45; pointer-events: none;
opacity: 0.75;
}
/* readonly 模式下编辑按钮禁用样式(JS 设置 disabled 属性触发) */
.me-wrapper.me-readonly .me-btn:disabled {
opacity: 0.3; cursor: not-allowed; pointer-events: none;
}
/* ============ 高亮标记 ============ */