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
+18 -9
View File
@@ -1069,7 +1069,7 @@ class MarkdownEditor {
_updateModeButtons() { _updateModeButtons() {
const isPreview = this._mode === 'preview'; const isPreview = this._mode === 'preview';
const isEdit = this._mode === 'edit'; const isReadonly = this.config.readOnly;
this.toolbarEl.querySelectorAll('.me-btn').forEach((b) => { this.toolbarEl.querySelectorAll('.me-btn').forEach((b) => {
const mode = b.dataset.mode; const mode = b.dataset.mode;
@@ -1082,17 +1082,25 @@ class MarkdownEditor {
return; return;
} }
// fullscreen 始终可用
if (action === 'fullscreen') {
b.disabled = false;
return;
}
// readonly 模式:禁用编辑操作按钮,保留 undo/redo
if (isReadonly) {
b.disabled = !(action === 'undo' || action === 'redo');
return;
}
// preview 模式:禁用编辑操作按钮 // preview 模式:禁用编辑操作按钮
if (isPreview) { if (isPreview) {
// undo/redo 在 preview 下也可用 b.disabled = !(action === 'undo' || action === 'redo');
if (action === 'undo' || action === 'redo' || action === 'fullscreen') { return;
b.disabled = false;
} else {
b.disabled = true;
}
} else {
b.disabled = false;
} }
b.disabled = false;
}); });
} }
@@ -1245,6 +1253,7 @@ class MarkdownEditor {
this.config.readOnly = !!readOnly; this.config.readOnly = !!readOnly;
if (this.textarea) this.textarea.readOnly = !!readOnly; if (this.textarea) this.textarea.readOnly = !!readOnly;
if (this.el) this.el.classList.toggle('me-readonly', !!readOnly); if (this.el) this.el.classList.toggle('me-readonly', !!readOnly);
this._updateModeButtons();
return this; return this;
} }
+5 -1
View File
@@ -358,7 +358,11 @@ const generateCSS = () => {
opacity: 0.88; opacity: 0.88;
} }
.me-wrapper.me-readonly .me-toolbar { .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;
} }
/* ============ 高亮标记 ============ */ /* ============ 高亮标记 ============ */