wangeditornpminstallwangeditor--安装save并创建文件夹
在components文件夹下，创建“wangEditor”文件夹，然后在“wangEditor”文件夹下创建indexdemo.vue。 在vue文件中写入以下内容： templatedivclass=' editor ' divid=' e '/div/div/templatescriptimportefrom ' Wang editor ' import { request } axios中引入的软件包文件导出默认值{ name : ' editor '，data(}{return(content: '，editor: null，info _ 3360 nfo ) 事件： ' change ' }，watch:{isclear(val )/console.log (val ) if (val ) ) { this.editor.txt.clear 我在这里问了一下价格。 调用父组件时，如果为value分配了值，则子组件将显示父组件分配的值if (value！==this.editor.txt.html () this.editor.txt.html ) ) this.desc ) }， props: ) desc: )添加type:striing操作时，上一个操作中保留的缓存isClear:{ type:Boolean，default:false } }、 methods 3360 { inite (} { this.editor=newe (# # )必须清除this.editor.config.zindex=1this.editor.config.onfig 单位ms this.editor.config.uploadimgseection this.editor.config.uploadfile name=' file '//初始设置为file this.editor.cooad 如果要在您的服务器地址axios上传图像，请使用与后端协商的filename//axios，以下函数为this.editor.config.uploadimg hooks={ before 33333 } //图像上传前，触发器//xhr返回XMLHttpRequst对象，编辑器对象，files返回选定的图像文件//，结果为{prevent: true， msg: 'xxxx'}是用户从///return(/prevent:true，//msg: )上传(//)、success3360function ) xhr， 意味着放弃editor )。在成功插入图像后，触发器//xhr是XMLHttpRequst对象，editor是编辑器对象，result是服务器返回的结果}，故障3360功能
是服务器端返回的结果 }, error: function (xhr, editor) { // 图片上传出错时触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象 }, timeout: function (xhr, editor) { // 图片上传超时时触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象 }, // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置 // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错） customInsert: function (insertImg, result, editor) { // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！） // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果 // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片： console.log(result.data); var url = result.data; insertImg(url) // result 必须是一个 JSON 格式字符串！！！否则报错 } } this.editor.config.onchange = (html) => {//只要富文本框内容出现变化就触发此函数 this.info_ = html // 绑定当前富文本框的内容 console.log(this.info_); this.$emit('itemclick', this.info_); // 将内容this.info_同步到父组件中， } //富文本框的功能区设置 this.editor.config.menus = [ 'head', // 标题 'bold', // 粗体 'fontSize', // 字号 'fontName', // 字体 'italic', // 斜体 'underline', // 下划线 'strikeThrough', // 删除线 'foreColor', // 文字颜色 'backColor', // 背景颜色 'link', // 插入链接 'list', // 列表 'justify', // 对齐方式 'quote', // 引用 'emoticon', // 表情 'image', // 插入图片 'table', // 表格 'code', // 插入代码 'undo', // 撤销 'redo' // 重复 ] this.editor.create()//创建editor this.editor.txt.html(this.desc)//富文本框内还需填入父组件传入的服务器回显的信息 } }, mounted () { this.initE(); } }</script> 如何在父组件内使用①先在父组件里引入
import fuwenben from '../wangEditor/indexdemo'②在父组件中使用
<fuwenben v-model="box.content" :isClear="isClear" @itemclick="cpnclick"></fuwenben> //box.content是获取服务器的富文本内容，方便之后axios上传时获取 //itemclick是子组件中的命名，cpmclick方法里写下当子组件内容修改给父组件传的内容，把内容绑定到this.content上，方便之后axios上传时获取③data() methods()中的内容
data() { return { isClear: false, detail:"" } }, methods: { change(val) { console.log(val) }, cpnclick(item) { console.log(item); this.content = item; }, }④这样就可以在this.content中获取到含有各种标签的html内容啦。
后端会保存这些内容进入数据库。
注意！！当我们前台get从服务器获取初始富文本内容展示页面时，是html的格式，需要在created里面通过：
document.getElementById('content').innerHTML = data.content; //content绑定需要展示的div盒子，将html内容格式转化，显示到页面上即不含标签啦。