1. NPM install
npm i wangeditor --save
Copy the code
  1. Component Create a new file and add index.vue
<template> <div ref="editor"></div> </template> <script> import E from 'wangeditor' export default { props: { value: {type: String, default: ",}, meanArray: {// Custom menu Type: Array, default: null,},}, Model: {prop: 'value', event: 'change', }, watch: { value: function (value) { if (value ! == this.editor.txt.html()) {this.editor.txt.html(this.value)}}, }, data() {return {// By default there are many menus. MeanArray has values. [ 'head', 'bold', 'fontSize', 'fontName', 'italic', 'underline', 'strikeThrough', 'indent', 'lineHeight', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'image', 'video', 'table', 'code', 'splitLine', 'undo', 'redo', ], editor: '', } }, methods: { init() { const _this = this let code = _this.$store.state.uploadConfig _this.editor = new E(_this.$refs.editor) _this. Editor. Config. UploadImgShowBase64 = false / / use base64 save picture / / upload configuration server address: address to upload pictures _this. Editor. Config. UploadImgServer = code. Action. _this editor. Config. UploadFileName = 'file' / / upload custom parameters / / can be used to monitor the function in the different stages of upload pictures. Do the corresponding processing _this editor. Config. UploadImgHooks = {before: function (xhr, editor, files) { // xhr.open(code.methods, code.action, true) xhr.setRequestHeader('Authorization', // XHR is the XMLHttpRequst object, editor is the editor object, files is the selected image file // If the result is {prevent: true, MSG: // return {// prevent: true, // MSG: 'abort' //}}, success: Function (XHR, editor, result) {function (XHR, editor, result) { Result is the result returned by the server}, fail: Function (XHR, editor, result) {function (XHR, editor, result) {function (XHR, editor, result) { }, error: function (XHR, editor) {// XHR is XMLHttpRequst object, editor is editor object}, timeout: Function (XHR, editor) {// XHR is XMLHttpRequst, editor is editor}, // If the server does not return {errno:0, data: [...] } this format can be used with the configuration // (however, the server must return a JSON format string!! CustomInsert: function (insertImg, result, editor) {customInsert: function (insertImg, result, editor) { // insertImg is the function that inserts the image, editor is the editor object, result is the result returned by the server // Example: if the image is uploaded successfully, the server returns {url:'.... ' Var url = result.data insertImg(url) // result must be a JSON string!! . Otherwise, an error}} / / that the editor. The customConfig. CustomUploadImg = fun ction (files, insert) {/ / / / upload code to return the result, Insert the picture to the editor. / / that filesToBase64 (files) / /} _this setMenus _this () / / Settings menu. Editor. Config. Onchange = = > (HTML) { $emit('change', HTML) // synchronize content to parent component} _this.editor.create() // Create editor}, Menus() {if (this.meanarray) {this.editor.config.menus = this.meanarray} else {this.editor.config.menus = This.defaultmeanus}}, getHtml() {return this.editor.txt.html()}, This.editor.txt.html (TXT)},}, mounted() { let that = this that.$nextTick(function () { that.init() }) }, } </script>Copy the code
  1. Used in the parent component
// Import wangEditor from '.. / / / components/wangEditor/index 'statement components: < wangEditor ref="myTextEditor" v-model="content" ></ wangEditor >Copy the code


We used it before v u e – q u i l – e d i t o r However, this editor cannot display the table, so use this editor I used vue-quills-Editor before, but this editor cannot show the table, so I use this editor