WangEditor — a lightweight Rich text Web editor that is easy to configure and use.

1. Basic use

NPM install NPM I wangEditor –save

CDN links cdn.jsdelivr.net/npm/wangedi…

HTML is used in

<div id="div1">
    <p>Initialization content</p>
    <p>Initialization content</p></div> <! Wangeditor.min.js --><script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    editor.create()
</script>
Copy the code

Used in the vue

/ / index. In vue
<template>
  <div class="write-articles-page">
    <div class="editor">
      <div class="title">The article content</div>
       <div class="editor-box" id="editor"></div>/ / container</div>
    <div class="footer">
      <el-button  @click="save">save</el-button>
      <el-button  type="primary" @click="reset">reset</el-button>
    </div>
  </div>
</template>

<script>
import WriteArticles from "./index";
export default WriteArticles;
</script>

<style lang="scss">
@import "./index.scss";
</style>

Copy the code

Js part

import E from "wangeditor";
import axios from 'axios'
export default {
    name: 'write-articles'.data() {
        return{}},components: {
        editor: null,},methods: {
        save() {
            console.log(this.editor.txt.html()); // Get HTML content
            console.log(this.editor.txt.text()); // Get the TXT content
            console.log(this.editor.txt.getJSON()); // Get the JSON content
        },
        reset() {
          this.editor.txt.clear()
        }
    },
    created(){},mounted() {
        this.editor = new E("#editor");
        this.editor.config.height = 600;
        let _this = this;
        // Customize the image upload function
        this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
            // resultFiles is the list of files selected from the input
            // insertImgFn is a method that gets the image URL and inserts it into the editor
            console.log(resultFiles[0])
            let param = new FormData()  // Create a form object
            param.append('img_file', resultFiles[0], resultFiles[0].name)  // Add data to the form object via append

            console.log(param.get('img_file'))

            let config = {
                headers: { 'Content-Type': 'multipart/form-data' }
            }
            axios.post(window.global.apiHost + '/get_picture', param, config).then(response= > {
                if (response.data.status == 0) {
                    console.log(response.data.data.url)
                    // self.ImgUrl = response.data.data
                    insertImgFn(response.data.data.url)
                }
                // console.log(response.data)
            })

            // Upload the image, return the result, and insert the image into the editor
            // insertImgFn(imgUrl);
        };
        
        // Customize the video upload function (reference, but do not recommend direct handling because video upload needs to do fragment processing, update later...)
        this.editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
            console.log(resultFiles[0])
            let param = new FormData()  // Create a form object
            param.append('video_file', resultFiles[0], resultFiles[0].name)  // Add data to the form object via append

            console.log(param.get('video_file'))

            let config = {
                headers: { 'Content-Type': 'multipart/form-data' }
            }
            axios.post(window.global.apiHost + '/get_video', param, config).then(response= > {
                if (response.data.status == 0) {
                    console.log(response.data.data.url)
                    insertVideoFn(response.data.data.url)
                }
            })
        };
        this.editor.create(); }},Copy the code

The above code realizes the simple functions of obtaining the edited content, clearing the edited content, and self-defining uploading pictures and videos. Other configurations can be customized according to the official documents. The documentation is very detailed and very newbie friendly.

figure

Second, the CKEditor

The function is very powerful, support from the source code to customize, the use of relatively simple.

Document address: ckeditor.com/docs/ckedit…

.