Vue集成富文本 wangeditor

安装

npm i wangeditor --save

快速入门

1,更换标签

        把原来的input更换为div id为editor

<el-form-item label="内容" prop="content">
        <el-input v-model="form.content" placeholder="内容"></el-input>-->
    <div id="editor"></div>
</el-form-item>

2,引入“wangeditor”

import E from "wangeditor"

并且引入一个变量 

export default {
    data() {
        return {
         editor: null
        }
    }
}

在你新增的函数位置写上 this.editor = new E("#editor")  editor 

### Vue集成WangEditor富文本编辑器 #### 安装配置 为了在Vue项目中集成WangEditor富文本编辑器,首先需要安装`@wangeditor/editor`以及其对应的样式包。可以通过npm来完成这一步骤。 ```bash npm install @wangeditor/editor --save npm install @wangeditor/editor-for-vue --save ``` 接着,在项目的入口文件(通常是main.js),引入必要的CSS资源[^2]: ```javascript import '@wangeditor/editor/dist/css/style.css' ``` #### 使用方法 创建一个新的组件用于初始化编辑器实例,并将其挂载至页面上指定的位置。下面是一个简单的例子说明如何操作: ```html <template> <div id="editor-container"></div> </template> <script> // 导入 Editor 和 createEditor 函数 import { createEditor } from '@wangeditor/editor' export default { name: 'MyEditor', data() { return { editor: null, } }, mounted() { this.editor = createEditor({ selector: '#editor-container', // 编辑区域的选择器 config: {}, // 配置项 mode: 'default' // 模式,默认即可 }) }, beforeDestroy() { if (this.editor == null) return; this.editor.destroy(); // 组件销毁前要记得释放掉编辑器实例 } } </script> ``` 对于更复杂的场景比如自定义上传图片等功能,则可以在config参数里设置相应的回调函数处理逻辑。 #### 示例 这里给出一段完整的代码片段作为参考,展示了怎样在一个标准的Vue单文件组件内使用WangEditor编辑器,并实现了基本的文字输入功能。 ```html <!-- MyRichTextEditor.vue --> <template> <div class="richText"> <!-- 这里放置实际渲染出来的编辑框 --> <div ref="toolbar" style="border-bottom: 1px solid #ccc;"></div> <div ref="editor" style="text-align:left;min-height:300px;border:1px dashed #ccc;margin-top:-1px;padding-left:8px;"></div> </div> </template> <script> import WangEditor from '@wangeditor/editor'; import '@wangeditor/editor/dist/css/style.css'; export default { props: ['value'], watch: { value(newValue, oldValue){ const editorValue = this.editor.txt.html(); if(editorValue !== newValue && !this.isChangeByInner){ this.editor.txt.html(newValue); } } }, methods:{ changeHandler(newHtml){ this.$emit('input', newHtml); } }, mounted(){ var _self=this; // 创建工具栏和编辑区对象 let E = WangEditor; this.editor = new E(this.$refs.editor); // 设置 onchange 回调函数,将数据同步到父级组件 this.editor.config.onchange = function(html){ _self.changeHandler(html); }; // 自定义菜单配置... // 创建编辑器 this.editor.create(); // 初始化内容 setTimeout(() => { this.editor.txt.html(_self.value || ''); }, 500); }, destroyed(){ this.editor.destroy(); } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值