前言:無需main.js或頁面全域性或區域性引入,直接使用cdn將ueditor作為vue元件 

請直接建立vue檔案，作為元件使用。複製貼上，即可直接使用(此篇只展示前端程式碼,後端大家自由選擇,圖片資源存放建議使用阿里雲oss或者七牛雲物件儲存)

component元件程式碼：

<template>
    <script :id="randomId" name="content" type="text/plain" :style="ueditorStyle"></script>
</template>
<script>
export default {
    name: 'Editor',
    props: {
        ueditorPath: {
            // UEditor 程式碼的路徑
            type: String,
            default: '............',//cdn地址
        },
        ueditorConfig: {
            // UEditor 配置項
            type: Object,
            default: function() {
                return {
                    toolbars:[['source', 'bold', 'italic', 'underline', 'removeformat', 'forecolor', 'backcolor', 'paragraph', 'fontfamily', 'fontsize', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'simpleupload']],
                    serverUrl: '............',//後臺儲存路由
                };
            }
        },
        ueditorStyle: {
        	type: Object,
        	default: function() {
                return {
                }
            }
        },
    },
    data() {
        return {
            // 為了避免麻煩，每個編輯器例項都用不同的 id
            randomId: 'editor_' + (Math.random() * 100000000000000000),
            instance: null,
            // scriptTagStatus -> 0:程式碼未載入，1:兩個程式碼依賴載入了一個，2:兩個程式碼依賴都已經載入完成
            scriptTagStatus: 0
        };
    },
    created() {
        if (window.UE !== undefined) {
            // 如果全域性物件存在，說明編輯器程式碼已經初始化完成，直接載入編輯器
            this.scriptTagStatus = 2;
            this.initEditor();
        } else {
            // 如果全域性物件不存在，說明編輯器程式碼還沒有載入完成，需要載入編輯器程式碼
            this.insertScriptTag();
        }
        console.log(this)
    },
    beforeDestroy() {
        // 元件銷燬的時候，要銷燬 UEditor 例項
        if (this.instance !== null && this.instance.destroy) {
            this.instance.destroy();
        }
    },
    methods: {
        insertScriptTag() {
            let editorScriptTag = document.getElementById('editorScriptTag');
            let configScriptTag = document.getElementById('configScriptTag');

            // 如果這個tag不存在，則生成相關程式碼tag以載入程式碼
            if (editorScriptTag === null) {
                configScriptTag = document.createElement('script');
                configScriptTag.type = 'text/javascript';
                configScriptTag.src = this.ueditorPath + 'neditor.config.js';
                configScriptTag.id = 'configScriptTag';

                editorScriptTag = document.createElement('script');
                editorScriptTag.type = 'text/javascript';
                editorScriptTag.src = this.ueditorPath + 'neditor.all.min.js';
                editorScriptTag.id = 'editorScriptTag';
                let s = document.getElementsByTagName('head')[0];
                s.appendChild(configScriptTag);
                s.appendChild(editorScriptTag);
            }

            // 等待程式碼載入完成後初始化編輯器
            if (configScriptTag.loaded) {
                this.scriptTagStatus++;
            } else {
                configScriptTag.addEventListener('load', () => {
                    this.scriptTagStatus++;
                    configScriptTag.loaded = true;
                    this.initEditor();
                });
            }

            if (editorScriptTag.loaded) {
                this.scriptTagStatus++;
            } else {
                editorScriptTag.addEventListener('load', () => {
                    this.scriptTagStatus++;
                    editorScriptTag.loaded = true;
                    this.initEditor();
                });
            }

            this.initEditor();
        },
        initEditor() {
            // scriptTagStatus 為 2 的時候，說明兩個必需引入的 js 檔案都已經被引入，且載入完成
            if (this.scriptTagStatus === 2 && this.instance === null) {
                // Vue 非同步執行 DOM 更新，這樣一來程式碼執行到這裡的時候可能 template 裡面的 script 標籤還沒真正建立
                // 所以，我們只能在 nextTick 裡面初始化 UEditor
                this.$nextTick(() => {
                    this.instance = window.UE.getEditor(this.randomId, this.ueditorConfig);
                    // 繫結事件，當 UEditor 初始化完成後，將編輯器例項通過自定義的 ready 事件交出去
                    this.instance.addListener('ready', () => {
                        this.$emit('ready', this.instance);
                    });
                });
            }
        }
    }
};
</script>

<style>
	.edui-editor {
    	line-height: normal;
	}
</style>
 

在使用頁面

import Editor from '你的component路徑/Editor.vue'

使用程式碼：

<!--html片段 -->
<el-form-item label="獎品說明" prop="description" :error="prize.errors.description">
     <editor @ready="editorReady" :ueditorStyle="ueditorStyle">            
     </editor>
</el-form-item>

<!-- script片段 -->

import Editor from '你的component路徑/Editor.vue'
export default {
    data(){
        return {
            ueditorStyle: {//ueditor樣式
              width: '100%',
              height: '200px'
            },
        }
    },
    components:{
        Editor
    },
    methods:{
      editorReady (editor) {//儲存ueditor內容
        this.editor = editor
        if (this.$router.currentRoute.params.id > 0) this.fetch()
        editor.addListener('afterAutoSave', () => {
          this.prize.data.description = editor.getContent()
        })
      },
    },
}


<!-- 注意點 -->
this.editor.setContent(編輯框內的資料)//設定ueditor框內內容，在編輯時使用