electron vue富文本编辑器

### 如何在 Electron Vue 项目中实现富文本编辑器

#### 选择合适的富文本编辑器
对于 Electron 和 Vue 项目的组合，wangEditor 是一个不错的选择。它不仅轻量、简洁、易用而且开源免费，更重要的是其对 Vue 的良好支持使得集成过程更加简便[^2]。

#### 安装依赖包
为了能够在项目里使用 wangEditor，在命令行工具中执行如下 npm 命令安装必要的软件包：

npm install @wangeditor/editor @wangeditor/editor-for-vue

#### 配置 webpack 或 vite 构建配置文件
如果遇到样式加载失败的情况，则需调整构建工具的相关设置以确保 CSS 文件能够被正确解析并应用到页面上。这一步骤取决于所采用的具体打包方案（如 Webpack 或 Vite），通常涉及修改 `webpack.config.js` 或者 `.vitepress/config.ts` 中有关 style loader 的部分[^1]。

#### 创建组件并引入编辑器
接下来定义一个新的 Vue 组件用于承载富文本编辑区域，并在其内部通过 import 语句获取所需模块：

import { onBeforeUnmount, ref } from 'vue';
import WangEditor from '@wangeditor/editor-for-vue';

export default {
    components: { WangEditor },
    setup() {
        const editorRef = ref(null);

        // 编辑器创建完成时的回调函数
        const handleCreated = (editor) => {
            editorRef.value = editor;
            
            // 监听编辑器输入事件
            editor.on('change', () => {
                console.log(editor.children);
            });
        };

        return { editorRef, handleCreated };
    }
}

上述代码片段展示了如何利用 Composition API 来管理生命周期钩子以及响应式数据绑定机制，从而更好地控制编辑器实例及其行为逻辑[^4]。

#### 将组件嵌入至主界面布局内
最后一步就是把刚刚创建好的自定义组件放置于应用程序的主要视图结构之中，以便用户可以在界面上看到实际效果。假设当前正在开发的应用程序遵循单页应用模式(SPA)，那么只需简单地将 `<WangEditor>` 插槽添加到模板里的合适位置即可。