preface

Vue background management editor

The following code can be copied directly, with only a few changes to the incoming paths

Notes are made in both teaching and official documents

Introduce a.

This section describes the plug-ins used

wangEditor

Browser compatibility
  • Compatible with mainstream PC browsers, IE11+
  • Mobile and iPad are not supported

Plug-in teaching Document

Teaching document

See the effect in the picture above

Use two.

Install using NPM
npm install wangeditor --save
Copy the code
Create editorItem. vue under Components to encapsulate the editor as a component for easy call management

The code can be copied and modified completely

<template> <div id="wangeditor"> <div ref="editorElem" style="text-align: Left "></div> </div> </template> <script> export default { name: "editorElem", data() { return { editor: null, editorContent: "", }; }, // Props: ["catchData", "content"], watch: {content() {this.editor.txt.html(this.content); }, }, mounted() { this.editor = new E(this.$refs.editorElem); console.log("this.editor====>", this.editor); this.editor.config.onchange = (html) => { this.editorContent = html; // Pass the HTML to the parent component this.catchData(this.editorContent) via the catchData method; }; This. Editor. Config. UploadImgServer = "you upload pictures of interface"; This. Editor. Config. UploadFileName = "you custom file name"; This.editor.config.menus = [// menu configuration "head", // title "bold", // font "fontSize", // font "italic", // italic "underline", // underline" strikeThrough", // delete line" foreColor", // text color "backColor", // background color "link", // insert link" list", / / list "of" the justify, / / alignment "quote", / / reference "emoticon", "image" / / expression, / / insert the picture "table", "code", / / form / / insert code "undo", // redo", // repeat]; this.editor.config.uploadImgHooks = { before: Function (XHR, editor, files) {function (XHR, editor, files) { // return {// prevent: true, MSG: 'XXXX '} //}}, success: Function (XHR, editor, result) {function (XHR, editor, result) { This.imgurl = object.values (result.data).tostring (); }, 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:'.... ' '} let url = object.values (result.data); // result.data is the image name returned by the server and the link json.stringify (URL); InsertImg (url); // Result must be a JSON string!! Otherwise error},}; this.editor.create(); // Create a rich text instance if (! This.content) {this.editor.txt.html(" Please edit the content 1"); }}}; </script>Copy the code
Call the rich text editor EditorItem.vue on the page in use
  import EditorBar from "@/components/editoritem/editoritem";
Copy the code
Announcement component
components: { EditorBar}
Copy the code
CatchData listens for the input editorContent of the rich text using the component
<editor-bar :catchData="catchData" :content="editorContent" ></editor-bar> 
Copy the code
Define the catchData method and editorContent passed in using the component’s page
Methods: {catchData(e) {console.log("e=====? >", e); }, / / the contents of the rich text editorContent (e) {the console. The log (" e = = = = =? >", e); }}Copy the code

Welcome attention to praise the collection of three!! Release technical posts and source code from time to time