Use of wangeditor rich text editor

Antecedents ：

Because the dynamic news module of the company needs , No waste of development manpower 、 Time and other costs , Decided to choose a rich text editor , The operators edit the text to release the news

consequence ：

Finally, I chose wangEditor

---

wangEditor It's based on javascript and css Developed Web Rich text editor , Light weight 、 concise 、 Easy to use 、 Free open source .

Compatible with common PC browser ：Chrome,Firefox,Safar,Edge,QQ browser ,IE11.

Mobile terminals are not supported

More information can be found in the manual ：

Introduction · wangEditor User documentation https://www.wangeditor.com/doc/

---

Let's take a look at the page first ：

 

Basic use

download

npm install  npm i wangeditor --save

Parent component ：

//  article - newly added / edit 
<template>
    <div class="page-main-style">
        
        <div class="content-wrap">
            <el-form :model="form" :rules="rules" ref="form" :inline="true">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label=" Article title " prop="title">
                            <el-input placeholder=" Please enter the title of the article " maxlength="150" v-model="form.title" show-word-limit>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label=" Release time " prop="publishTime">
                            <el-date-picker placeholder=" Please select the date and time " v-model="form.publishTime" type="datetime" value-format="yyyy-MM-dd hh:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <WangEditor @catchData="catchData" :setContent="setContent"></WangEditor>
        </div>
    </div>
</template>

<script>
    import WangEditor from './components/wangEditor.vue'
  
    export default ({
        components: {
            WangEditor,
        },
        data() {
            return {
                editorContent: '',// wangEditor Contents of subcomponents 
                setContent: '', //  Contents read from the detail interface , Pass to the sub component to set the editor content 
                form: {
                    title: '',
                    publishTime: '',
                    status: '' //  Article state 
                },

                rules: {
                    title: [{
                        required: true,
                        message: ' Please enter the title of the article ',
                        trigger: 'blur'
                    }],
                    publishTime: [{
                        required: true,
                        message: ' Please select the release time ',
                        trigger: 'blur'
                    }]
                }

            }
        },

        methods: {
    
            //  The detailed interface here is not written 

            catchData(html) {
                //  adopt $emit The content of the article passed by the sub component , Click... On the user “ preservation ” Button , take editorContent The content is passed to the back end , Back end save .
                this.editorContent = html
            },
        },
    })

</script>

Child components ：wangEditor.vue

<template>
    <div>
        <div ref="wangEditorDom">
            <!-- <p> Welcome to use  <b>wangEditor</b>  Rich text editor </p> -->
        </div>
        <div class="clearBtn">
            <span> Be careful ： This action will empty the article content ！</span>
            <el-button size="small" @click="handleClear"> Empty content </el-button>
        </div>

    </div>
</template>
<script>
    import config from 'utils/config'
    import E from 'wangeditor'
    export default ({
        props: {
            setContent: {
                type: String,
                default(){
                    return ''
                }
            }
        },
        data() {
            return {
                objEditor: null,
                serverImgApi: config.baseUrl + 'upload-file/upload/wangEditor?userId=',
                serverVideoApi: config.baseUrl + 'upload-file/upload/wangEditorVideo?userId='
            }
        },
        watch:{
            setContent:{ //  Parent component  props Handed over 
                handler:function(newval,oldval){
                    this.objEditor.txt.html(newval) //  Reset the editor content 
                },
                deep: true
            }
        },
        mounted() { // dom Already mounted 
            this.init()
        },
        methods: {
            init() {
                let _this = this
                const editor = new E(this.$refs.wangEditorDom)
                this.objEditor = editor
                editor.config.height = 450 //  Sets the height of the text box 
                editor.config.zIndex = 500 //  To configure z-index
                editor.config.placeholder = ' Please enter the content of the article ' //  Customize placeholder
                editor.config.excludeMenus = [ //  Configuration menu bar , Set unnecessary menus 
                    'emoticon',
                    'code',
                    'todo',
                ]
                editor.config.uploadImgMaxLength = 1 //  Upload at most once  1  A picture 
                editor.config.uploadImgServer = this.serverImgApi //  Configure server interface 
                editor.config.uploadFileName = 'file' //  Customize fileName
                editor.config.uploadVideoServer = this.serverVideoApi //  Configure the upload video interface 
                editor.config.uploadVideoName = 'file' //  Customize fileName
                editor.config.uploadVideoMaxSize = 1 * 1024 * 1024 * 1024 // 1024m  Limit video size 
                // editor.config.uploadImgShowBase64 = true //  Use  base64  Save the picture 

                //  To configure  onchange  Callback function 
                editor.config.onchange = function (newHtml) {
                    console.log("change  After the latest  html", newHtml);
                    _this.$emit('catchData',newHtml)
                };
                editor.create()
                editor.txt.html(this.setContent) //  Reset the editor content 
            },

            //  Empty the editor 
            handleClear() {
                this.objEditor.txt.clear()
            },
        },
    })

</script>

<style scoped lang="less">
    .clearBtn {
        float: right;
        margin-top: 5px;

        span {
            margin-left: 5px;
            font-size: 12px;
            color: #666;
        }
    }

</style>

There is a note above that when uploading pictures and videos , Note the format and content returned by the interface

To upload pictures , Interface format requires that data Array

  Upload video , Interface format requires that data object

 

---

---

---

Here are my feelings ：

Before I use this wangEditor Develop according to the documentation manual , No chicken ribs at all , It's easy to use .

recommend ～ recommend ～！