Echo Editor 使用指南

Echo Editor 使用指南

【免费下载链接】echo-editorA modern WYSIWYG rich-text editor base on tiptap and shadcn-ui项目地址: https://gitcode.com/gh_mirrors/ec/echo-editor

1. 项目介绍

Echo Editor 是一个基于 Vue，利用 Tiptap 和 shadcn-vue 开发的现代 AI 助力 WYSIWYG（所见即所得）富文本编辑器。它具有以下特性：

• 美观的 UI 设计
• AI 助力的写作辅助
• 实时预览的 Markdown 支持
• 丰富的文本格式（标题、列表、引用等）
• 表格和代码块
• 自定义字体大小和样式
• 从 Word 文档导入
• 国际化支持（英文、简体中文）
• 可扩展架构，可创建自定义扩展
• TypeScript 支持
• Tailwind CSS 支持

2. 项目快速启动

安装

首先，需要安装 Echo Editor。可以使用 npm、pnpm 或 yarn：

npm install echo-editor # 或 pnpm install echo-editor # 或 yarn add echo-editor

使用方法

方法 1：全局注册

在 Vue 项目中，首先导入 EchoEditor 并在 Vue 应用中使用它：

// main.ts import { createApp } from 'vue' import App from './App.vue' import EchoEditor from 'echo-editor' import 'echo-editor/style.css' const app = createApp(App) app.use(EchoEditor) app.mount('#app')

然后在组件中使用<echo-editor>标签：

<script setup> import { ref } from 'vue' import { BaseKit } from 'echo-editor' const content = ref('') const extensions = [ BaseKit.configure({ placeholder: { placeholder: '开始写作...', }, }), ] </script> <template> <echo-editor :extensions="extensions" v-model="content" /> </template>

方法 2：直接使用

也可以直接在组件内部使用 EchoEditor：

<script setup> import { EchoEditor, BaseKit } from 'echo-editor' import 'echo-editor/style.css' const content = ref('') const extensions = [ BaseKit.configure({ placeholder: { placeholder: '开始写作...', }, }), ] </script> <template> <echo-editor :extensions="extensions" v-model="content" /> </template>

3. 应用案例和最佳实践

（此部分需要根据实际项目应用情况编写，以下为示例）

• 博客编辑器：使用 Echo Editor 作为博客平台的编辑器，利用 AI 助力功能提高写作效率。
• 在线文档协作：集成到在线文档系统中，支持多人实时协作编辑。

4. 典型生态项目

• shadcn-vue：Vue 的组件库，为 Echo Editor 提供了美观的 UI 组件。
• Tiptap：一个基于 ProseMirror 的 Vue 富文本编辑器框架，是 Echo Editor 的基础。

以上是 Echo Editor 的使用指南，希望对您有所帮助。

【免费下载链接】echo-editorA modern WYSIWYG rich-text editor base on tiptap and shadcn-ui项目地址: https://gitcode.com/gh_mirrors/ec/echo-editor