neditor是一款基于百度ueditor的富文本編輯器，它的本質(zhì)其實(shí)也是ueditor，只是對(duì)外觀進(jìn)行了美化，個(gè)人感覺(jué)效果還不錯(cuò)，有很多其他編輯器都沒(méi)有的功能。
本文是用Vue-cli進(jìn)行搭建的。
具體的結(jié)構(gòu)如下：

項(xiàng)目結(jié)構(gòu).jpg

將neditor下載下來(lái)保持到static靜態(tài)文件中

neditor的目錄.jpg

接下來(lái)在main.js中引入neditor：

// neditor
import '../static/neditor/neditor.config.js'
import '../static/neditor/neditor.all.min.js'
import '../static/neditor/i18n/zh-cn/zh-cn.js'
import '../static/neditor/neditor.parse.min.js'

然后將編輯器單獨(dú)寫(xiě)成一個(gè)組件：
嵌入編輯器的思想是先寫(xiě)一個(gè)編輯器的組件，然后把它嵌到需要的地方，組件的代碼如下：

<template>
    <div>
        <div :id="this.id"></div>
    </div>
</template>

<script>
    export default {
        name: 'editor',
        props: ['id','r_content'],
        data() {
            return {
                ue: '', //ueditor實(shí)例
                content: '', //編輯器內(nèi)容
            }
        },
        methods: {
            //初始化編輯器
            initEditor() {
                this.ue = UE.getEditor(this.id, {
                    initialFrameWidth: '100%',
                    initialFrameHeight: '350',
                    scaleEnabled: true,
                })
                //編輯器準(zhǔn)備就緒后會(huì)觸發(fā)該事件
                this.ue.addListener('ready',()=>{
                    //設(shè)置可以編輯
                    this.ue.setEnabled()
                    this.ue.setContent(this.r_content)
                })
                //編輯器內(nèi)容修改時(shí)
                this.selectionchange()
            },
            
            //編輯器內(nèi)容修改時(shí)
            selectionchange() {
                this.ue.addListener('selectionchange', () => {
                    this.content = this.ue.getContent()
                })
            },

        },

        activated() {
            //初始化編輯器
            this.initEditor()
        },
        deactivated() {
            //銷毀編輯器實(shí)例，使用textarea代替
            this.ue.destroy()
            //重置編輯器，可用來(lái)做多個(gè)tab使用同一個(gè)編輯器實(shí)例
            //this.ue.reset()
            //如果要使用同一個(gè)實(shí)例,請(qǐng)注釋destroy()方法
        },

        computed:{
            // 利用計(jì)算屬性返回prop里傳過(guò)來(lái)的內(nèi)容
            revecive:function(){
                return this.r_content
            }
        },

        watch:{
            // !!! 這里需要注意，需要一個(gè)watch來(lái)實(shí)時(shí)更新編輯器的內(nèi)容
            revecive:function(){
                this.ue.setContent(this.r_content)
            }
        }

    }
</script>

<style>

</style>

父組件中調(diào)用：

<el-form-item style="padding-top: 15px">
    <div style="line-height:24px;width:88%;">
        <!-- Ueditor編輯器需要一個(gè)keep-alive標(biāo)簽 -->
        <keep-alive>
            <editor ref="editor" 
                id="editor" 
                v-bind:r_content="setForm.rich_text">
            </editor>
        </keep-alive>
    </div>  
</el-form-item>
# 讀出編輯器內(nèi)容的方法：
<script>
  import editor from '@/components/editor'
  export default {
      data(){
        return { setForm.rich_text:'',  }
      }
      // 賦值的方法：
      this.setForm.rich_text = this.$refs.editor.content
  }
</script>