Vue+Element UI使用富文本編輯器案例

Vue+Element UI使用富文本編輯器案例

npm安裝編輯器元件

具體方法：

npm install vue-quill-editor –save

具體實作

在components檔案夾裡建立

editor.vue

元件，具體代碼如下：

<!-- 元件代碼如下 -->
<template>
    <div>
        <script id="editor" type="text/plain"></script>
    </div>
</template>
<script>
    export default {
        name: 'UE',
        data () {
            return {
                editor: null
            }
        },
        props: {
            defaultMsg: {
                type: String
            },
            config: {
                type: Object
            }
        },
        mounted() {
            const _this = this;
            this.editor = UE.getEditor('editor', this.config); // 初始化UE
            this.editor.addListener("ready", function () {
                _this.editor.setContent(_this.defaultMsg); // 確定UE加載完成後，放入内容。
            });
        },
        methods: {
            getUEContent() { // 擷取内容方法
                return this.editor.getContent()
            }
        },
        destroyed() {
            this.editor.destroy();
        }
    }
</script>

           

頁面使用富文本編輯器：

首先引入編輯器元件

import { quillEditor } from “vue-quill-editor”;

//調用編輯器

樣式引入

import ‘quill/dist/quill.core.css’
import ‘quill/dist/quill.snow.css’
import ‘quill/dist/quill.bubble.css’
           

使用

<el-form-item label="較長的描述" prop="words">
	 <div class="edit_container">
		 <quill-editor v-model="ruleForm.words" ref="myQuillEditor" class="editer" :options="editorOption" @ready="onEditorReady($event)">
		  </quill-editor>
	</div> 
</el-form-item>
           

js部分

data() {
   return {
       editorOption: {}
    },
           

components: {//使用編輯器
   quillEditor
  }
           

methods: {
   onEditorReady(editor) {
   },
           

簡單粗暴的表述，希望對你有所幫助！加油