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:
+17
-8
@@ -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
@@ -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;
|
||||
}
|
||||
|
||||
/* ============ 高亮标记 ============ */
|
||||
|
||||
Reference in New Issue
Block a user