vue使用outline-editor

Vue 使用 Outline Editor 是为了提供富文本编辑功能，Outline Editor 是一款基于 Vue.js 开发的轻量级、高度可定制的 Markdown 编辑器，特别适合需要结构清晰的文章或文档编辑场景。它通过树状结构管理和编辑Markdown内容，用户可以方便地添加、删除、移动段落，并支持标题、列表、链接等功能。

要在 Vue 中集成 Outline Editor，通常按照以下步骤操作：

1. **安装依赖**:
- 首先在项目中安装 `@vueuse/core` 和 `outline-editor` 包：

     npm install @vueuse/core outline-editor

2. **引入并配置**:
在 Vue 组件中导入 `OutlineEditor` 并进行配置，例如设置主题、保存回调等：

   import { useOutlineEditor } from 'outline-editor';
   import '@outlinejs/outline-editor/dist/index.css';

   export default {
     setup() {
       const { editorRef, saveContent } = useOutlineEditor({
         initialContent: '', // 初始化内容
         theme: 'light', // 可选的主题
         onSave: (content) => {
             // 保存内容到服务器或其他地方
         },
       });

       return {
         editor: editorRef,
         saveContent,
       };
     },
   };

3. **在模板中渲染组件**:
将编辑器组件绑定到一个合适的 DOM 元素上：

   <div ref="editor" class="outline-editor"></div>

4. **响应事件**:
如果需要监听编辑器的变化，可以在组件内使用编辑器提供的事件处理器，如 `onChange` 或者 `onFocus`。