/** * MetonaEditor Core - 编辑器核心 * @module core * @version 0.1.6 * @description MarkdownEditor 类实现:DOM 构建、事件、渲染、历史栈、选区操作、模式切换 * v0.1.6: 插件依赖拓扑排序、实例 i18n、快捷键/工具栏定制、右键菜单、Toast */ import { generateId, escapeHTML, isBrowser } from './utils.js'; import { DEFAULTS, ICONS, THEMES } from './constants.js'; import { injectStyles } from './styles.js'; import { t as i18nT, getCurrentLocale, getLocaleDirection, createInstanceI18n } from './i18n.js'; import { parseMarkdown } from './parser.js'; import { presetPlugins, topologicalSort } from './plugins.js'; import { resolveTheme, getThemeConfig, setThemeVariables, createInstanceTheme } from './themes.js'; const MODES = ['edit', 'split', 'preview']; /** Toast 图标 */ const TOAST_ICONS = { success: '✓', error: '✗', warning: '⚠', info: 'ℹ', }; /** * 解析主题名称为实际主题(auto -> light/dark) */ const resolveThemeName = (theme) => { if (theme && theme !== 'auto') return theme; return resolveTheme('auto'); }; /** * MarkdownEditor 编辑器类 */ class MarkdownEditor { /** * 静态事件钩子(全局,所有实例共享,供插件使用) */ static _hooks = new Map(); static on(name, fn) { if (!this._hooks.has(name)) this._hooks.set(name, []); this._hooks.get(name).push(fn); return () => this.off(name, fn); } static off(name, fn) { const list = this._hooks.get(name); if (list) this._hooks.set(name, list.filter((f) => f !== fn)); } static trigger(name, instance) { const list = this._hooks.get(name); if (list) list.forEach((fn) => { try { fn(instance); } catch (e) { console.error(`MeEditor hook "${name}" error:`, e); } }); } /** * @param {string|HTMLElement} container - 容器选择器或元素 * @param {Object} options - 配置项(见 DEFAULTS) */ constructor(container, options = {}) { if (!isBrowser()) { this._destroyed = true; this._value = options.value || ''; return this; } this.id = options.id || generateId(); this.container = typeof container === 'string' ? document.querySelector(container) : container; if (!this.container) { console.error('MeEditor: container not found:', container); this._destroyed = true; return this; } this.config = { ...DEFAULTS, ...options }; if (options.style && typeof options.style === 'object') { this.config.style = { ...DEFAULTS.style, ...options.style }; } this._value = this.config.value || ''; this._mode = MODES.includes(this.config.mode) ? this.config.mode : 'split'; this._history = []; this._historyIndex = -1; this._cleanups = []; this._plugins = []; this._listeners = {}; this._renderRaf = null; this._historyTimer = null; this._fullscreen = false; this._destroyed = false; this._lastRenderedValue = null; this._shortcuts = []; // v0.1.6: 快捷键注册表 this._contextMenuItems = []; // v0.1.6: 右键菜单项 this._customActions = {}; // 自定义工具栏动作 // 渲染函数:自定义覆盖内置解析器 this._renderFn = (typeof this.config.render === 'function') ? this.config.render : parseMarkdown; this._highlightFn = (typeof this.config.highlight === 'function') ? this.config.highlight : null; MarkdownEditor.trigger('beforeCreate', this); injectStyles(); this._buildDOM(); // 实例级主题管理(v0.1.5) this._themeCtx = createInstanceTheme(this); // 实例级 i18n 管理(v0.1.6) this._i18nCtx = createInstanceI18n(this); // 向后兼容:用户显式传 theme 时同步到全局 if (options.theme) { if (typeof document !== 'undefined') { document.documentElement.setAttribute('data-md-theme', resolveTheme(options.theme)); } } // 确保 CSS 变量作用到实例 wrapper const resolvedThemeConfig = getThemeConfig(this.config.theme); setThemeVariables(resolvedThemeConfig, this.el); this._buildToolbar(); this._bindEvents(); // 初始内容 this.textarea.value = this._value; this._pushHistory(); this._render(); this._updateWordCount(); // 安装配置中的插件(v0.1.6: 拓扑排序) if (Array.isArray(this.config.plugins)) { const plugins = this.config.plugins.map((p) => { if (typeof p === 'string') return { ...presetPlugins[p], _isStringRef: true }; return p; }).filter(Boolean); const sorted = topologicalSort(plugins); sorted.forEach((p) => this.use(p)); } if (this.config.autofocus && !this.config.readOnly) this.focus(); if (typeof this.config.onCreate === 'function') { try { this.config.onCreate(this); } catch (e) { console.error('onCreate error:', e); } } MarkdownEditor.trigger('afterCreate', this); } // ============ DOM 构建 ============ _buildDOM() { const wrapper = document.createElement('div'); wrapper.className = `me-wrapper me-theme-${resolveThemeName(this.config.theme)}`; if (this.config.readOnly) wrapper.classList.add('me-readonly'); wrapper.dataset.id = this.id; wrapper.setAttribute('role', 'application'); wrapper.setAttribute('aria-label', i18nT('edit')); if (this.config.className) { this.config.className.split(/\s+/).filter(Boolean).forEach((c) => wrapper.classList.add(c)); } // 高度 const h = this.config.height; wrapper.style.height = typeof h === 'number' ? `${h}px` : (h || '400px'); // 自定义样式 if (this.config.style && typeof this.config.style === 'object') { Object.entries(this.config.style).forEach(([k, v]) => { wrapper.style[k] = v; }); } const toolbar = document.createElement('div'); toolbar.className = 'me-toolbar'; toolbar.setAttribute('role', 'toolbar'); const body = document.createElement('div'); body.className = `me-body me-mode-${this._mode}`; const editorPane = document.createElement('div'); editorPane.className = 'me-editor-pane'; const textarea = document.createElement('textarea'); textarea.className = 'me-textarea'; textarea.spellcheck = !!this.config.spellcheck; textarea.readOnly = !!this.config.readOnly; textarea.style.tabSize = String(this.config.tabSize || 2); textarea.placeholder = this.config.placeholder || i18nT('placeholder'); textarea.setAttribute('aria-label', i18nT('edit')); editorPane.appendChild(textarea); const divider = document.createElement('div'); divider.className = 'me-divider'; divider.setAttribute('role', 'separator'); const previewPane = document.createElement('div'); previewPane.className = 'me-preview-pane'; previewPane.setAttribute('role', 'region'); previewPane.setAttribute('aria-label', i18nT('preview')); const preview = document.createElement('div'); preview.className = 'me-preview'; previewPane.appendChild(preview); body.appendChild(editorPane); body.appendChild(divider); body.appendChild(previewPane); wrapper.appendChild(toolbar); wrapper.appendChild(body); // 状态栏 let statusbar = null; if (this.config.wordCount) { statusbar = document.createElement('div'); statusbar.className = 'me-statusbar'; wrapper.appendChild(statusbar); } this.container.appendChild(wrapper); this.el = wrapper; this.toolbarEl = toolbar; this.bodyEl = body; this.editorPane = editorPane; this.previewPane = previewPane; this.dividerEl = divider; this.textarea = textarea; this.previewEl = preview; this.statusEl = statusbar; } _buildToolbar() { const tools = this.config.toolbar; if (!tools || !Array.isArray(tools) || tools.length === 0) return; const modeActions = []; tools.forEach((item) => { if (item === '|') { const sep = document.createElement('span'); sep.className = 'me-toolbar-sep'; this.toolbarEl.appendChild(sep); return; } // 模式与全屏按钮归入右侧组 if (item === 'edit' || item === 'split' || item === 'preview' || item === 'fullscreen') { modeActions.push(item); return; } this.toolbarEl.appendChild(this._createBtn(item)); }); if (modeActions.length) { const group = document.createElement('div'); group.className = 'me-toolbar-group'; modeActions.forEach((item) => { const btn = this._createBtn(item); if (item === 'edit' || item === 'split' || item === 'preview') { btn.dataset.mode = item; if (item === this._mode) btn.classList.add('me-active'); } group.appendChild(btn); }); this.toolbarEl.appendChild(group); } } _createBtn(item) { const btn = document.createElement('button'); btn.type = 'button'; btn.className = `me-btn me-btn-${item}`; btn.dataset.action = item; const label = i18nT(item) || item; btn.title = label; btn.setAttribute('aria-label', label); btn.innerHTML = ICONS[item] || `${escapeHTML(item)}`; return btn; } // ============ 事件绑定 ============ _bindEvents() { const ta = this.textarea; const onInput = () => { this._value = ta.value; this._scheduleRender(); this._scheduleHistory(); this._updateWordCount(); this._emit('input', this._value); this._emit('change', this._value); if (typeof this.config.onInput === 'function') { try { this.config.onInput(this._value, this); } catch (e) { console.error(e); } } if (typeof this.config.onChange === 'function') { try { this.config.onChange(this._value, this); } catch (e) { console.error(e); } } }; ta.addEventListener('input', onInput); const onKeydown = (e) => this._handleKeydown(e); ta.addEventListener('keydown', onKeydown); const onScroll = () => { if (!this.config.syncScroll || this._mode !== 'split') return; const max = ta.scrollHeight - ta.clientHeight; const ratio = max > 0 ? ta.scrollTop / max : 0; const pmax = this.previewPane.scrollHeight - this.previewPane.clientHeight; this.previewPane.scrollTop = ratio * pmax; }; ta.addEventListener('scroll', onScroll); const onFocus = () => { this._emit('focus'); if (typeof this.config.onFocus === 'function') { try { this.config.onFocus(this); } catch (e) { console.error(e); } } }; const onBlur = () => { this._emit('blur'); if (typeof this.config.onBlur === 'function') { try { this.config.onBlur(this); } catch (e) { console.error(e); } } }; ta.addEventListener('focus', onFocus); ta.addEventListener('blur', onBlur); // 工具栏点击 const onToolbarClick = (e) => { const btn = e.target.closest('.me-btn'); if (!btn) return; const mode = btn.dataset.mode; if (mode) { this.setMode(mode); return; } const action = btn.dataset.action; if (action) this.exec(action); }; this.toolbarEl.addEventListener('click', onToolbarClick); // 分隔条拖拽(分屏模式) const onDividerDown = (e) => this._bindDividerDrag(e); this.dividerEl.addEventListener('pointerdown', onDividerDown); this._cleanups.push(() => { ta.removeEventListener('input', onInput); ta.removeEventListener('keydown', onKeydown); ta.removeEventListener('scroll', onScroll); ta.removeEventListener('focus', onFocus); ta.removeEventListener('blur', onBlur); this.toolbarEl.removeEventListener('click', onToolbarClick); this.dividerEl.removeEventListener('pointerdown', onDividerDown); }); } _handleKeydown(e) { // Tab 缩进 if (e.key === 'Tab') { e.preventDefault(); this._handleTab(e.shiftKey); return; } // v0.1.6: 检查自定义快捷键注册表 if (this._shortcuts.length) { for (const sc of this._shortcuts) { const ctrlOk = sc.ctrl ? (e.ctrlKey || e.metaKey) : !e.ctrlKey && !e.metaKey; const shiftOk = sc.shift ? e.shiftKey : !e.shiftKey; const altOk = sc.alt ? e.altKey : !e.altKey; if (e.key.toLowerCase() === sc.key && ctrlOk && shiftOk && altOk) { e.preventDefault(); if (typeof sc.handler === 'string') { this.exec(sc.handler); } else if (typeof sc.handler === 'function') { try { sc.handler(this); } catch (err) { console.error('Shortcut handler error:', err); } } return; } } } const mod = e.ctrlKey || e.metaKey; if (!mod) return; const key = e.key.toLowerCase(); const shortcuts = { b: 'bold', i: 'italic', k: 'link', u: 'underline', e: 'code', '1': 'h1', '2': 'h2', '3': 'h3', q: 'quote', }; if (key === 'z' && !e.shiftKey) { e.preventDefault(); this.undo(); } else if ((key === 'z' && e.shiftKey) || key === 'y') { e.preventDefault(); this.redo(); } else if (key === 's') { e.preventDefault(); this._emit('save', this._value); if (typeof this.config.onSave === 'function') { try { this.config.onSave(this._value, this); } catch (err) { console.error(err); } } } else if (shortcuts[key]) { e.preventDefault(); this.exec(shortcuts[key]); } } _handleTab(shift) { const ta = this.textarea; const start = ta.selectionStart; const end = ta.selectionEnd; const tabSize = this.config.tabSize || 0; const tabStr = tabSize > 0 ? ' '.repeat(tabSize) : '\t'; if (start === end) { // 无选区:插入缩进 ta.value = ta.value.slice(0, start) + tabStr + ta.value.slice(end); ta.selectionStart = ta.selectionEnd = start + tabStr.length; } else { // 有选区:整块缩进/反缩进 const lineStart = ta.value.lastIndexOf('\n', start - 1) + 1; const block = ta.value.slice(lineStart, end); const lines = block.split('\n'); let newBlock; if (shift) { newBlock = lines.map((l) => l.replace(/^(\t| {1,4})/, '')).join('\n'); } else { newBlock = lines.map((l) => tabStr + l).join('\n'); } ta.value = ta.value.slice(0, lineStart) + newBlock + ta.value.slice(end); ta.selectionStart = lineStart; ta.selectionEnd = lineStart + newBlock.length; } this._value = ta.value; this._pushHistory(); this._render(); this._emit('change', this._value); } _bindDividerDrag(e) { if (this._mode !== 'split') return; e.preventDefault(); const startX = e.clientX; const editorWidth = this.editorPane.getBoundingClientRect().width; const totalWidth = this.bodyEl.getBoundingClientRect().width; if (totalWidth <= 0) return; const divider = this.dividerEl; const onMove = (ev) => { const dx = ev.clientX - startX; let newEditorWidth = editorWidth + dx; const min = 80; const max = totalWidth - 80 - divider.offsetWidth; newEditorWidth = Math.max(min, Math.min(max, newEditorWidth)); const pct = (newEditorWidth / totalWidth) * 100; this.editorPane.style.flex = `0 0 ${pct}%`; this.previewPane.style.flex = `1 1 ${100 - pct}%`; }; const onUp = () => { window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerup', onUp); }; window.addEventListener('pointermove', onMove); window.addEventListener('pointerup', onUp); } // ============ 渲染 ============ _scheduleRender() { if (this._renderRaf) return; this._renderRaf = requestAnimationFrame(() => { this._renderRaf = null; this._render(); }); } _render() { if (this._mode === 'edit') return; // 内容未变化时跳过解析(主题切换等场景触发重渲染但内容不变) if (this._lastRenderedValue === this._value) return; this._lastRenderedValue = this._value; MarkdownEditor.trigger('beforeRender', this); this._emit('beforeRender', this); const env = { highlight: this._highlightFn, locale: getCurrentLocale(), }; let html; try { html = this._renderFn(this._value, env); } catch (err) { console.error('MeEditor render error:', err); html = `

${i18nT('renderError')}: ${escapeHTML(err.message)}

`; } if (typeof this.config.sanitize === 'function') { try { html = this.config.sanitize(html); } catch (err) { console.error('sanitize error:', err); } } this.previewEl.innerHTML = html; MarkdownEditor.trigger('afterRender', this); this._emit('afterRender', this); } // ============ 历史栈 ============ _scheduleHistory() { if (this._historyTimer) clearTimeout(this._historyTimer); this._historyTimer = setTimeout(() => this._pushHistory(), this.config.historyDebounce || 400); } _pushHistory() { const cur = this._history[this._historyIndex]; if (cur === this._value) return; this._history = this._history.slice(0, this._historyIndex + 1); this._history.push(this._value); const limit = this.config.historyLimit > 0 ? this.config.historyLimit : 100; while (this._history.length > limit) this._history.shift(); this._historyIndex = this._history.length - 1; } undo() { if (this._historyIndex <= 0) return this; this._historyIndex--; this._applyHistory(); return this; } redo() { if (this._historyIndex >= this._history.length - 1) return this; this._historyIndex++; this._applyHistory(); return this; } _applyHistory() { this._value = this._history[this._historyIndex]; this.textarea.value = this._value; this._render(); this._updateWordCount(); this._emit('change', this._value); if (typeof this.config.onChange === 'function') { try { this.config.onChange(this._value, this); } catch (e) { console.error(e); } } } canUndo() { return this._historyIndex > 0; } canRedo() { return this._historyIndex < this._history.length - 1; } // ============ 命令执行 ============ exec(action, ...args) { const actions = { bold: () => this._wrapSelection('**', '**'), italic: () => this._wrapSelection('*', '*'), strikethrough: () => this._wrapSelection('~~', '~~'), underline: () => this._wrapSelection('', ''), code: () => this._wrapSelection('`', '`'), h1: () => this._toggleLinePrefix('# '), h2: () => this._toggleLinePrefix('## '), h3: () => this._toggleLinePrefix('### '), quote: () => this._toggleLinePrefix('> '), ul: () => this._toggleLinePrefix('- '), ol: () => this._toggleLinePrefix('1. '), indent: () => this._handleTab(false), outdent: () => this._handleTab(true), hr: () => this._insertBlock('\n---\n'), link: () => this._insertLink(), image: () => this._insertImage(), table: () => this._insertTable(), undo: () => this.undo(), redo: () => this.redo(), edit: () => this.setMode('edit'), split: () => this.setMode('split'), preview: () => this.setMode('preview'), fullscreen: () => this.toggleFullscreen(), }; const fn = actions[action]; if (fn) { fn.apply(this, args); return this; } // 检查自定义动作(通过 addToolbarButton 注册) if (this._customActions && typeof this._customActions[action] === 'function') { try { this._customActions[action].apply(this, args); } catch (e) { console.error('custom action error:', e); } } return this; } _wrapSelection(before, after) { const ta = this.textarea; const start = ta.selectionStart; const end = ta.selectionEnd; const selected = ta.value.slice(start, end); const text = selected || 'text'; const inserted = before + text + after; ta.value = ta.value.slice(0, start) + inserted + ta.value.slice(end); ta.focus(); if (selected) { ta.selectionStart = start + before.length; ta.selectionEnd = start + before.length + text.length; } else { ta.selectionStart = ta.selectionEnd = start + before.length; } this._value = ta.value; this._pushHistory(); this._render(); this._updateWordCount(); this._emit('change', this._value); } _toggleLinePrefix(prefix) { const ta = this.textarea; const start = ta.selectionStart; const lineStart = ta.value.lastIndexOf('\n', start - 1) + 1; const lineEndPos = ta.value.indexOf('\n', start); const lineEnd = lineEndPos === -1 ? ta.value.length : lineEndPos; const line = ta.value.slice(lineStart, lineEnd); const existingMatch = line.match(/^(#{1,6}\s*|>\s*|[-*+]\s*|\d+\.\s*)/); let newLine; if (existingMatch && existingMatch[0] === prefix) { newLine = line.slice(prefix.length); } else if (existingMatch) { newLine = prefix + line.slice(existingMatch[0].length); } else { newLine = prefix + line; } ta.value = ta.value.slice(0, lineStart) + newLine + ta.value.slice(lineEnd); ta.focus(); ta.selectionStart = ta.selectionEnd = lineStart + newLine.length; this._value = ta.value; this._pushHistory(); this._render(); this._updateWordCount(); this._emit('change', this._value); } _insertBlock(text) { const ta = this.textarea; const start = ta.selectionStart; const before = ta.value.slice(0, start); const needNL = before && !before.endsWith('\n'); const insert = (needNL ? '\n' : '') + text; ta.value = ta.value.slice(0, start) + insert + ta.value.slice(ta.selectionEnd); ta.focus(); const pos = start + insert.length; ta.selectionStart = ta.selectionEnd = pos; this._value = ta.value; this._pushHistory(); this._render(); this._updateWordCount(); this._emit('change', this._value); } _insertLink() { const ta = this.textarea; const start = ta.selectionStart; const end = ta.selectionEnd; const sel = ta.value.slice(start, end) || i18nT('link') || 'link'; const url = 'https://'; const insert = `[${sel}](${url})`; ta.value = ta.value.slice(0, start) + insert + ta.value.slice(end); ta.focus(); // 选中 url 便于替换 const urlStart = start + sel.length + 3; ta.selectionStart = urlStart; ta.selectionEnd = urlStart + url.length; this._value = ta.value; this._pushHistory(); this._render(); this._emit('change', this._value); } _insertImage() { const ta = this.textarea; const start = ta.selectionStart; const end = ta.selectionEnd; const sel = ta.value.slice(start, end) || i18nT('image') || 'image'; const url = 'https://'; const insert = `![${sel}](${url})`; ta.value = ta.value.slice(0, start) + insert + ta.value.slice(end); ta.focus(); const urlStart = start + sel.length + 4; ta.selectionStart = urlStart; ta.selectionEnd = urlStart + url.length; this._value = ta.value; this._pushHistory(); this._render(); this._emit('change', this._value); } _insertTable(rows = 3, cols = 3) { const header = Array.from({ length: cols }, (_, i) => `${i18nT('tableCols') || '列'}${i + 1}`).join(' | '); const sep = Array.from({ length: cols }, () => '---').join(' | '); let md = `| ${header} |\n| ${sep} |\n`; for (let r = 1; r < rows; r++) { const row = Array.from({ length: cols }, () => ' ').join(' | '); md += `| ${row} |\n`; } this._insertBlock('\n' + md); } // ============ 模式与全屏 ============ setMode(mode) { if (!MODES.includes(mode) || mode === this._mode) return this; // 保存当前滚动位置 const taScroll = this.textarea ? this.textarea.scrollTop : 0; const pvScroll = this.previewPane ? this.previewPane.scrollTop : 0; this._mode = mode; this.bodyEl.className = `me-body me-mode-${mode}`; this._updateModeButtons(); if (mode !== 'edit') this._render(); // 恢复滚动位置 if (this.textarea) this.textarea.scrollTop = taScroll; if (this.previewPane) this.previewPane.scrollTop = pvScroll; this._emit('modeChange', mode); if (typeof this.config.onModeChange === 'function') { try { this.config.onModeChange(mode, this); } catch (e) { console.error(e); } } return this; } getMode() { return this._mode; } _updateModeButtons() { this.toolbarEl.querySelectorAll('.me-btn[data-mode]').forEach((b) => { b.classList.toggle('me-active', b.dataset.mode === this._mode); }); } toggleFullscreen() { this._fullscreen = !this._fullscreen; this.el.classList.toggle('me-fullscreen', this._fullscreen); // 更新全屏按钮图标/标题 const fsBtn = this.toolbarEl.querySelector('.me-btn-fullscreen'); if (fsBtn) { fsBtn.title = this._fullscreen ? (i18nT('fullscreenExit') || '退出全屏') : (i18nT('fullscreen') || '全屏'); } this._emit('fullscreen', this._fullscreen); if (typeof this.config.onFullscreen === 'function') { try { this.config.onFullscreen(this._fullscreen, this); } catch (e) { console.error(e); } } return this; } isFullscreen() { return this._fullscreen; } exitFullscreen() { if (this._fullscreen) this.toggleFullscreen(); return this; } // ============ 字数统计 ============ _updateWordCount() { if (!this.config.wordCount || !this.statusEl) return; const text = this._value || ''; const chars = text.length; // 中文字符数 + 英文单词数 const cnChars = (text.match(/[\u4e00-\u9fa5]/g) || []).length; const enWords = (text.replace(/[\u4e00-\u9fa5]/g, ' ').match(/[a-zA-Z0-9]+/g) || []).length; const words = cnChars + enWords; const lines = text ? text.split('\n').length : 0; const readingMin = Math.max(1, Math.ceil(words / 300)); const parts = [ `${i18nT('characters')}: ${chars}`, `${i18nT('words')}: ${words}`, `${i18nT('lines')}: ${lines}`, `${i18nT('readingTime')}: ${readingMin} ${i18nT('minutes')}`, ]; this.statusEl.textContent = parts.join(' · '); } getStats() { const text = this._value || ''; const cnChars = (text.match(/[\u4e00-\u9fa5]/g) || []).length; const enWords = (text.replace(/[\u4e00-\u9fa5]/g, ' ').match(/[a-zA-Z0-9]+/g) || []).length; return { characters: text.length, words: cnChars + enWords, chineseChars: cnChars, englishWords: enWords, lines: text ? text.split('\n').length : 0, readingTime: Math.max(1, Math.ceil((cnChars + enWords) / 300)), }; } // ============ 公共 API ============ getValue() { return this._value; } setValue(md, opts = {}) { this._value = md || ''; this.textarea.value = this._value; if (!opts.silent) this._pushHistory(); this._render(); this._updateWordCount(); if (!opts.silent) { this._emit('change', this._value); if (typeof this.config.onChange === 'function') { try { this.config.onChange(this._value, this); } catch (e) { console.error(e); } } } return this; } getHTML() { MarkdownEditor.trigger('beforeRender', this); this._emit('beforeRender', this); const env = { highlight: this._highlightFn, locale: getCurrentLocale() }; let html = this._renderFn(this._value, env); if (typeof this.config.sanitize === 'function') { try { html = this.config.sanitize(html); } catch (e) { console.error(e); } } MarkdownEditor.trigger('afterRender', this); this._emit('afterRender', this); return html; } /** * 强制刷新预览(内容未变但需重渲染时使用,如主题切换) */ refresh() { this._lastRenderedValue = null; this._render(); return this; } insert(text, opts = {}) { const ta = this.textarea; const start = ta.selectionStart; const end = ta.selectionEnd; const replace = opts.replace === true; // replace=true: 替换选区内容;replace=false: 在光标处插入,保留选区 ta.value = ta.value.slice(0, start) + text + ta.value.slice(replace ? end : start); ta.focus(); const pos = start + text.length; ta.selectionStart = ta.selectionEnd = pos; this._value = ta.value; this._pushHistory(); this._render(); this._updateWordCount(); this._emit('change', this._value); return this; } /** * 在选区两侧包裹文本 */ wrap(before, after) { this._wrapSelection(before, after || before); return this; } focus() { if (this.textarea) this.textarea.focus(); return this; } blur() { if (this.textarea) this.textarea.blur(); return this; } enable() { if (this.textarea) this.textarea.disabled = false; if (this.el) this.el.classList.remove('me-disabled'); return this; } disable() { if (this.textarea) this.textarea.disabled = true; if (this.el) this.el.classList.add('me-disabled'); return this; } isDisabled() { return this.textarea ? this.textarea.disabled : false; } /** * 设置只读模式 */ setReadOnly(readOnly) { this.config.readOnly = !!readOnly; if (this.textarea) this.textarea.readOnly = !!readOnly; if (this.el) this.el.classList.toggle('me-readonly', !!readOnly); return this; } isReadOnly() { return this.config.readOnly; } /** * 注册实例事件监听 * 支持事件:change/input/focus/blur/save/modeChange/fullscreen/beforeCreate/afterCreate/beforeRender/afterRender/destroy */ on(name, fn) { if (!this._listeners[name]) this._listeners[name] = []; this._listeners[name].push(fn); return () => this.off(name, fn); } off(name, fn) { const list = this._listeners[name]; if (list) this._listeners[name] = list.filter((f) => f !== fn); return this; } _emit(name, ...args) { const list = this._listeners[name]; if (list) list.forEach((fn) => { try { fn(...args, this); } catch (e) { console.error(`MeEditor event "${name}" error:`, e); } }); } /** * 安装插件(v0.1.6: 支持异步 install) * @param {string|Object} plugin - 预设插件名或插件对象 * @param {Object} options - 插件配置 */ use(plugin, options = {}) { let p = plugin; if (typeof plugin === 'string') { p = presetPlugins[plugin]; if (!p) { console.warn(`MeEditor: preset plugin "${plugin}" not found`); return this; } } if (!p || typeof p !== 'object') { console.warn('MeEditor: invalid plugin'); return this; } const merged = { ...p, ...options }; if (typeof merged.install === 'function') { try { const result = merged.install(this); // 异步插件支持 if (result && typeof result.then === 'function') { result.catch((e) => { console.error(`MeEditor: async plugin "${merged.name || 'custom'}" install error:`, e); }); } } catch (e) { console.error(`MeEditor: plugin "${merged.name || 'custom'}" install error:`, e); } } // 直接 push 原对象(保持运行时属性引用一致) this._plugins.push(merged); return this; } /** * 卸载插件(v0.1.6 新增) * @param {string} name - 插件名 */ unuse(name) { const idx = this._plugins.findIndex((p) => p.name === name); if (idx === -1) { console.warn(`MeEditor: plugin "${name}" not found`); return this; } const plugin = this._plugins[idx]; if (typeof plugin.destroy === 'function') { try { plugin.destroy(this); } catch (e) { console.error(`MeEditor: plugin "${name}" destroy error:`, e); } } this._plugins.splice(idx, 1); return this; } getPlugins() { return [...this._plugins]; } /** * 向工具栏追加自定义按钮 */ addToolbarButton(config) { if (!config || !config.action) return this; const btn = document.createElement('button'); btn.type = 'button'; btn.className = `me-btn me-btn-custom-${config.action}`; btn.title = config.title || config.action; btn.setAttribute('aria-label', config.title || config.action); btn.innerHTML = config.icon || `${escapeHTML(config.text || config.action)}`; if (typeof config.onClick === 'function') { // 直接绑定 click,不设置 data-action 避免工具栏委托重复触发 btn.addEventListener('click', (e) => { e.stopPropagation(); config.onClick(this); }); } else if (config.action) { btn.dataset.action = config.action; this._customActions = this._customActions || {}; this._customActions[config.action] = config.handler; } this.toolbarEl.insertBefore(btn, this.toolbarEl.querySelector('.me-toolbar-group') || null); return this; } // ============ v0.1.6: 快捷键注册 ============ /** * 注册自定义快捷键 * @param {string} combo - 组合键如 'Ctrl+B' / 'Ctrl+Shift+K' / 'Alt+1' * @param {Function|string} handler - 回调函数或 exec action 名 * @param {string} [description] - 描述 */ registerShortcut(combo, handler, description = '') { if (!combo) return this; // 解析组合键 const parts = combo.toLowerCase().split('+'); const key = parts.pop(); const ctrl = parts.includes('ctrl') || parts.includes('cmd'); const shift = parts.includes('shift'); const alt = parts.includes('alt'); const meta = parts.includes('meta'); this._shortcuts.push({ combo, key, ctrl, shift, alt, meta, handler, description }); return this; } /** * 注销快捷键 * @param {string} combo - 组合键字符串 */ unregisterShortcut(combo) { this._shortcuts = this._shortcuts.filter((s) => s.combo !== combo); return this; } /** * 获取已注册的快捷键列表 */ getShortcuts() { return [...this._shortcuts]; } // ============ v0.1.6: 工具栏动态配置 ============ /** * 动态重建工具栏按钮 * @param {Array} tools - 按钮数组(同 config.toolbar 格式) */ configureToolbar(tools) { if (!this.toolbarEl) return this; this.config.toolbar = tools; this.toolbarEl.innerHTML = ''; this._buildToolbar(); return this; } /** * 从工具栏移除指定按钮 * @param {string} action - 按钮 action 名 */ removeToolbarButton(action) { if (!this.toolbarEl) return this; const btn = this.toolbarEl.querySelector(`.me-btn[data-action="${action}"], .me-btn[data-mode="${action}"]`); if (btn) btn.remove(); return this; } // ============ v0.1.6: 右键菜单 ============ /** * 注册右键上下文菜单 * @param {Array} items - [{ label, action, shortcut?, type?:'separator' }] */ registerContextMenu(items = []) { this._contextMenuItems = items; return this; } // ============ v0.1.6: Toast 通知 ============ /** * 显示 Toast 通知 * @param {string} message - 消息内容 * @param {Object} [opts] * @param {string} [opts.type='info'] - success / error / warning / info * @param {number} [opts.duration=3000] - 自动消失时间(ms),0 不自动消失 * @param {string} [opts.animation='fade'] - 动画类型 */ toast(message, opts = {}) { if (!this.el || typeof document === 'undefined') return this; const { type = 'info', duration = 3000, animation = 'fade' } = opts; const toast = document.createElement('div'); toast.className = `me-toast me-toast-${type} me-toast-${animation}`; toast.innerHTML = `${TOAST_ICONS[type] || ''}${escapeHTML(String(message))}`; this.el.appendChild(toast); // 入场动画 requestAnimationFrame(() => { toast.classList.add('me-toast-enter'); }); const remove = () => { toast.classList.remove('me-toast-enter'); toast.classList.add('me-toast-leave'); setTimeout(() => { if (toast.parentNode) toast.parentNode.removeChild(toast); }, 300); }; if (duration > 0) setTimeout(remove, duration); // 点击关闭 toast.addEventListener('click', remove); return this; } // ============ v0.1.6: 实例级 i18n ============ /** * 设置实例语言 */ setLocale(locale) { if (this._i18nCtx) this._i18nCtx.set(locale); return this; } /** * 获取实例当前语言 */ getLocale() { if (this._i18nCtx) return this._i18nCtx.get(); return getCurrentLocale(); } /** * 实例级翻译函数 */ t(key, params) { if (this._i18nCtx) return this._i18nCtx.t(key, params); return i18nT(key, params); } /** * 销毁编辑器 */ destroy() { if (this._destroyed) return; MarkdownEditor.trigger('beforeDestroy', this); if (this._renderRaf) cancelAnimationFrame(this._renderRaf); if (this._historyTimer) clearTimeout(this._historyTimer); this._cleanups.forEach((fn) => { try { fn(); } catch (_) {} }); this._cleanups = []; this._shortcuts = []; this._contextMenuItems = []; this._customActions = {}; // 移除所有 toast if (this.el) { this.el.querySelectorAll('.me-toast').forEach((t) => t.remove()); } // 销毁插件 this._plugins.forEach((p) => { if (typeof p.destroy === 'function') { try { p.destroy(this); } catch (_) {} } }); this._plugins = []; if (this.el && this.el.parentNode) { this.el.parentNode.removeChild(this.el); } this.el = null; this.textarea = null; this.previewEl = null; this._destroyed = true; if (typeof this.config.onDestroy === 'function') { try { this.config.onDestroy(this); } catch (e) { console.error(e); } } // 先触发 destroy 事件,再清空监听器(否则 destroy 监听器永远收不到事件) this._emit('destroy'); this._listeners = {}; MarkdownEditor.trigger('afterDestroy', this); } isDestroyed() { return this._destroyed; } /** * 设置实例主题(v0.1.5: 实例隔离,不影响其他编辑器) * @param {string} theme - 主题名 * @returns {MarkdownEditor} */ setTheme(theme) { if (!theme) return this; this.config.theme = theme; if (this._themeCtx) { this._themeCtx.set(theme); } return this; } /** * 获取实例当前主题名 * @returns {string} */ getTheme() { if (this._themeCtx) return this._themeCtx.get(); return this.config.theme || 'auto'; } /** * 获取实例主题上下文(高级 API) * 提供 syncWithElement / adopt / watch 等外部跟随能力 * @returns {Object|null} */ getThemeContext() { return this._themeCtx || null; } /** * 获取编辑器状态 */ getStatus() { return { id: this.id, mode: this._mode, theme: this.getTheme(), locale: getCurrentLocale(), fullscreen: this._fullscreen, readOnly: this.config.readOnly || false, disabled: this.textarea ? this.textarea.disabled : false, destroyed: this._destroyed, plugins: this._plugins.map((p) => p.name || 'custom'), }; } } export { MarkdownEditor as Editor, MarkdownEditor }; export default MarkdownEditor;