簡介
? ? ? ?TinyEditor 是基于 Quill 2.0 開發的富文本編輯器，提供豐富的擴展功能，適用于現代 Web 開發。具備模塊化設計、輕量級架構和高度可定制化特性，支持多種插件擴展，滿足不同場景需求。
核心特性
- 基于 Quill 2.0 的現代化架構
- 模塊化設計，支持按需加載
- 提供多種擴展功能（表格、代碼高亮、Markdown 支持等）
- 跨平臺兼容性（Web、移動端適配）
- 支持實時協作編輯
1.安裝依賴
npm i @opentiny/fluent-editor
npm i dompurifynpm i html2canvasnpm i katexnpm install quill-toolbar-tipnpm install quill-table-up2.在項目根目錄創建 `types/global.d.ts` 類型聲明文件
?
//types/global.d.ts
import type Hljs from 'highlight.js'
import type Katex from 'katex'
import type Html2Canvas from 'html2canvas'//創建類型聲明文件，用于聲明全局變量的類型
declare global {interface Window {hljs: typeof Hljskatex: typeof KatexHtml2Canvas: typeof Html2Canvas}
}3.更新 tsconfig.json，確保包含類型聲明路徑
{"files": [],"references": [{ "path": "./tsconfig.app.json" },{ "path": "./tsconfig.node.json" }],"compilerOptions": {"typeRoots": ["./node_modules/@types", "./types"]}
}
4.完整代碼
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type FluentEditor from '@opentiny/fluent-editor'
import hljs from 'highlight.js'
import Html2Canvas from 'html2canvas'
import katex from 'katex'
import 'highlight.js/styles/atom-one-dark.css'
import 'katex/dist/katex.min.css'// 安全類型斷言掛載
if (import.meta) { // Vite 環境判斷(window as unknown as { hljs: typeof hljs }).hljs = hljswindow.katex = katex as unknown as typeof window.katex// @ts-ignorewindow.Html2Canvas = Html2Canvas as typeof window.Html2Canvas
}const editor = ref<FluentEditor>()
const articleRef = ref<HTMLElement>()interface MentionItem {name: stringage: numbercn: string
}const searchKey = 'name'
const mentionList: MentionItem[] = [{ name: 'Jack', age: 26, cn: 'Jack 杰克' },{ name: 'Lucy', age: 22, cn: 'Lucy 露西' },
]const TOOLBAR_CONFIG = [['undo', 'redo', 'clean', 'format-painter'],[{ header: [1, 2, 3, 4, 5, 6, false] },{ font: [] },{ size: ['12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px'] }],['bold', 'italic', 'strike', 'underline'],[{ color: [] }, { background: [] }],[{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],[{ script: 'sub' }, { script: 'super' }],[{ indent: '-1' }, { indent: '+1' }],[{ direction: 'rtl' }],['link', 'blockquote', 'code', 'code-block'],['image', 'file'],['emoji', 'video', 'formula', 'screenshot'],
]const updateHTML = (html: string) => {if (articleRef.value) {articleRef.value.innerHTML = html}
}onMounted(async () => {// 動態導入客戶端專用庫const module = await import('@opentiny/fluent-editor')const FluentEditor = module.defaulteditor.value = new FluentEditor('#editor-get-content-html', {theme: 'snow',modules: {toolbar: TOOLBAR_CONFIG,syntax: { hljs },'emoji-toolbar': true,file: true,mention: {itemKey: 'cn',searchKey,search: (term: string) => {return mentionList.filter(item =>String(item[searchKey as keyof MentionItem]).includes(term))}}}})updateHTML(editor.value.root.innerHTML)editor.value.on('text-change', () => {updateHTML(editor.value?.root.innerHTML || '')})
})</script><template><div id="editor-get-content-html"><p>Hello <strong>TinyEditor</strong>!</p></div><br>預覽效果：<divref="articleRef"class="article ql-editor"/>
</template>運行效果
5.國際化
將使用語言通過 options 傳入，目前支持語言?zh-CN?和?en-US，默認使用?en-US。
Welcome to commit PR for more language support.
可通過函數?changeLanguage({ lang, langText })?修改當前語言
import type { I18N } from '@opentiny/fluent-editor'在modules使用modules: {...i18n: {lang: 'zh-CN',},}?動態變更：
function switchLanguage() {// 'zh-CN' 'en-US' (editor.getModule('i18n') as I18N).changeLanguage({ lang: 'zh-CN' })
}總結
TinyEditor 結合 Quill 2.0 的穩定性和擴展性，為開發者提供高效的富文本解決方案。通過靈活的配置和模塊化設計，可快速適配不同業務場景。
)
