一、npm下载

终端输入

npm i wangeditor --save

二、代码

此处已经把富文本编辑器抽出为组件:

组件内容:

<template lang="html"><div><div id="edit"></div></div></template><script>//引入import wangEditor from 'wangeditor'export default {name: 'editoritem',data() {return {//这个为富文本编辑器editor: null,//这个为富文本的内容editorData: ''}},mounted() {//判断哪个id或者class的div为富文本编辑器const editor = new wangEditor(`#edit`)//设置自定义上传的图片为base64,根据需要更改editor.config.uploadImgShowBase64 = true//菜单,包括顺序editor.config.menus = ['head','bold','fontSize','fontName','italic','underline','strikeThrough','indent','lineHeight','foreColor','backColor','link','list',// 'todo','justify','quote','emoticon','image','video','table',// 'code','splitLine','undo','redo',]// 配置 onchange 回调函数，将数据同步到 vue 中editor.config.onchange = (newHtml) => {this.editorData = newHtmlconsole.log(this.editorData)}// 创建编辑器editor.create()this.editor = editor},beforeDestroy() {//vue需要的 调用销毁 API 对当前编辑器实例进行销毁this.editor.destroy()this.editor = null}}</script><style scoped></style>

父组件引用:

//引用注册<template><div><wang-enduit/></div></template><script>import wangEnduit from '../../wangEnduit/index'export default {name: "dataAdd",components:{wangEnduit}}</script>

图片上传有base64和文字一起上传,也有传入url地址,看你的情况自己改。

上传图片 · wangEditor 用户文档

富文本内容为data里面的editorData,可以用自定义事件传输到父组件,也可以用vuex,根据你的情况看着来。

相对于其他富文本编辑器,这个可以直接安装复制使用,也不用去官网注册买服务什么的。