@composy/editor-vue
LDesign Editor Vue 3 组件封装，提供 Vue 3 组合式 API、响应式数据绑定和插件系统。
功能特性
- Vue 3 组件：
<LdEditor> 封装核心编辑器
- 组合式 API：
useEditor() 提供响应式编辑器访问
- v-model 支持：双向绑定编辑器内容
- Vue 插件：
EditorPlugin 全局注册组件和指令
- Engine 插件：
createEditorEnginePlugin() 集成 LDesign Engine
安装
npm install @composy/editor-vue
快速开始
<script setup lang="ts">
import { LdEditor, standardPlugins } from '@composy/editor-vue'
import { ref } from 'vue'
const content = ref('<p>Hello World</p>')
const plugins = standardPlugins
</script>
<template>
<LdEditor v-model="content" :plugins="plugins" />
</template>
组件 Props
| Prop |
类型 |
默认值 |
说明 |
| modelValue |
string |
'' |
编辑器内容（v-model） |
| readonly |
boolean |
false |
只读模式 |
| plugins |
Plugin[] |
standardPlugins |
插件列表 |
| toolbar |
boolean |
true |
显示工具栏 |
| virtualScroll |
boolean |
false |
虚拟滚动 |
| wasm |
boolean |
false |
WASM 加速 |
| pwa |
boolean |
false |
PWA 支持 |
| debugPanel |
boolean |
false |
调试面板 |
| contentSecurity |
object |
undefined |
HTML/URL 安全策略 |
| validation |
object |
undefined |
Schema 校验与 strict 模式 |
| schemaVersion |
string |
undefined |
外部 JSON 的来源版本 |
| migrations |
array |
undefined |
Schema 版本迁移函数 |
组件 Events
| 事件 |
参数 |
说明 |
| update:modelValue |
string |
内容变化 |
| ready |
Editor |
编辑器就绪 |
| change |
string |
内容变化 |
| focus |
void |
获得焦点 |
| blur |
void |
失去焦点 |
组件 Expose
const editorRef = ref()
// 通过 ref 访问编辑器实例方法
editorRef.value.getHTML()
editorRef.value.setHTML('<p>New content</p>')
editorRef.value.getMarkdown()
editorRef.value.focus()
editorRef.value.isEmpty()
editorRef.value.validate()
editorRef.value.migrateJSON(snapshot, '2')
组合式 API
import { useEditor } from '@composy/editor-vue'
const { editor, content, isEmpty, charCount } = useEditor({
element: '#editor',
plugins: standardPlugins,
onReady: _ed => console.info('Editor ready'),
})
console.info(editor, content, isEmpty, charCount)
// useEditor 同样提供安全校验和版本迁移
const validation = useEditor({ validation: { strict: true } }).validate()
void validation
插件安装
import { EditorPlugin } from '@composy/editor-vue'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.use(EditorPlugin, {/* options */})
app.mount('#app')
样式
// 导入编辑器样式
import { injectEditorTokens } from '@composy/editor-core/styles/tokens'
import '@composy/editor-core/dist/index.css'
// 或导入 tokens
injectEditorTokens()
依赖
@composy/editor-core (dependency)vue ^3.5.32 (peerDependency)
构建产物
| 目录 |
格式 |
用途 |
es/ |
ESM (preserveModules) |
现代打包器消费 |
esm/ |
ESM (preserveModules) |
兼容 ESM |
lib/ |
CJS (.cjs) |
Node.js require() 消费 |
dist/ |
UMD |
CDN/browser script 消费 |
开发与验证
在工作区根目录运行 pnpm run build:vue 构建适配包，或运行 pnpm run type-check:vue 检查 ESM/CJS
Vue 类型配置。ESLint 配置位于 .ldesign/eslint.config.js，TypeScript 配置位于
.ldesign/tsconfig.json 与 .ldesign/tsconfig.cjs.json。
License
MIT