vue富文本编辑器插件,edui-toolbor

### Vue 中使用 UEditor 富文本编辑器 UEditor 是一款由百度团队开发的强大富文本编辑器，在 Vue 项目中集成此工具可以通过 `vue-ueditor-wrap` 实现。为了配置特定的功能按钮，需修改 `ueditor.config.js` 文件中的 `toolbars` 属性[^1]。 #### 安装 vue-ueditor-wrap 首先安装依赖包： ```bash npm install vue-ueditor-wrap --save ``` 接着在组件内引入并注册该插件： ```javascript import VueUeditorWrap from 'vue-ueditor-wrap' export default { components: { VueUeditorWrap }, } ``` #### 配置 toolbars 自定义工具栏 通过调整 `config.js` 或者直接在初始化参数中指定 `toolbars` 来控制显示哪些操作按钮。下面是一个简单的例子展示如何设置自定义的 toolbar: ```html <template> <div id="app"> <!-- 编辑器容器 --> <VueUeditorWrap v-model="msg" :config="myConfig"></VueUeditorWrap> </div> </template> <script> export default { data() { return { msg: '<p>欢迎使用 ueditor!</p>', myConfig: { // 工具栏上的按钮配置 toolbars: [ ['fullscreen', 'source', '|', 'undo', 'redo'], ['bold', 'italic', 'underline'] ], initialFrameHeight: 300, initialFrameWidth: '100%', autoClearinitialContent: true } }; } }; </script> ``` 对于希望实现宽度和高度自适应的情况，可以在 CSS 中添加样式规则以确保编辑区域能够根据父级元素大小变化而自动调整尺寸[^3]: ```css #edui1 { width: 100%; height: 100%; } #edui1_iframeholder { min-height: 200px; max-height: none !important; overflow-y: hidden; } ``` 需要注意的是，当涉及到文件上传等功能时，可能还需要配合后端服务一起完成相应的逻辑处理[^4]。