@ domternal/ veue (主演)

3 个组件和可堆肥 永远 有钱 文本编辑器。 包括工具栏和菜单组件, v-model 支持,反应 编辑器状态,以及自定义节点视图被写成 Vue 组件 .

安装

pnpm add @domternal/vue @domternal/core @domternal/theme vue

软件包宣布Node.js 22或后作工具. 要求第3.3节或以后 @domternal/core >=1.8.0 <2.0.0。 。 。 . 对所有已安装的Domternal Free包使用1.8.1版本. 导入主题一次 您的默认样式申请.

快开始

使用可编译组件来安排工具栏、内容和菜单 :

<script setup lang="ts">
import { Domternal } from '@domternal/vue';
import { StarterKit, BubbleMenu } from '@domternal/core';
import '@domternal/theme';

const extensions = [StarterKit, BubbleMenu];
</script>

<template>
  <Domternal :extensions="extensions" content="<p>Hello from Vue!</p>">
    <Domternal.Toolbar />
    <Domternal.Content />
    <Domternal.BubbleMenu :contexts="{ text: ['bold', 'italic', 'underline'] }" />
  </Domternal>
</template>

Domternal 创建编辑器,提供给后代,并摧毁它 卸载。 工具栏使控件由已装入的扩展贡献 .

用 v- 型号绑定内容

使用 DomternalEditor 当文件对申请具有约束力时:

<script setup lang="ts">
import { ref } from 'vue';
import { DomternalEditor } from '@domternal/vue';
import { StarterKit, type Content } from '@domternal/core';

const extensions = [StarterKit];
const content = ref<Content>('<p>Start typing...</p>');
</script>

<template>
  <DomternalEditor v-model="content" :extensions="extensions" />
</template>

该模型默认持有HTML. 设定 outputFormat="json" 并初始化为 JSON满足于捆绑JSON.

为了完全控制, useEditor 返回时 editor页:1 ShallowRef<Editor | null>,以及 editorRef,将它绑在挂载元素上。 使用 provideEditor(editor) 改为 分享它,并 useEditorState(editor, ed => ed.isActive('bold')) 用于衍生状态. 见 可比较示例。 。 。 .

配置说明

• 包装包括 Document, (中文(简体) ), Paragraph, (中文(简体) ), Text, (中文(简体) ), BaseKeymap,以及 History。 。 。 . StarterKit 增加通用格式.
• Domternal 财务报告和审定财务报表 DomternalEditor 对 没有 转发a history 道具 (英语). 用于 另一个撤消管理器, 呼叫 useEditor({ history: false, extensions }) 并省略 历史也来自这些扩展。 见 瘫痪历史。 。 。 .
• 创建发生在 onMounted,所以编辑是 null 安全部门改革期间和初始阶段 设置。 离开 immediatelyRender 关闭用于 SSR; 参见 纳克思融合。 。 。 .
• editable 控制只读模式. preset="notion" 在创建时读取. 替换 i18n 在不创建编辑器的情况下更新 UI 翻译.
• onContentError 报告无效的初始内容; onContentDiagnostic 报告 正常内容值 。 这个 向导 文档召回选项 编辑器 API 解释诊断.
• 自定义 icons 包含原始的 SVG。 供应可信,开发者授权的常数.

办公室粘贴和自定义列表标签

登记册 PasteCleanup 在你的编辑 extensions 以规范支持的 Word 和 Google Docs 剪贴板 HTML 。 没错 无法由包装器启用 。 在1.5.0时, formattingForPaste 允许您的应用程序 选择每个粘贴的保存或适应,而不创建编辑器. 为您添加相应的格式化、 表格和图像扩展名 想要保留。 使用 ListLabels 页:1 支持自定义标记,每个协作作者都有相同的计划.

进一步阅读

• Vue 指南和组件参考
• 编辑器命令和内容 API
• 他们 财务报告和审定财务报表 本地化为 i18n
• 可选剪贴板 HTML 清理
• 自定义 Vue 节点视图