Vue+Element使用富文本編輯器的示例代碼
更新時間:2017年08月14日 14:40:28 作者:陳楠酒肆
本篇文章主要介紹了Vue+Element使用富文本編輯器的示例代碼,具有一定的參考價值,有興趣的可以了解一下
富文本編輯器在任何項目中都會用到,在Element中我們推薦vue-quill-editor組件,現(xiàn)在我就把它提供給大家,希望對大家有用。具體截圖如下:
安裝編輯器組件
具體方法:npm install vue-quill-editor --save
編寫組件
首先我們在components文件夾里創(chuàng)建ue.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加載完成后,放入內(nèi)容。 }); }, methods: { getUEContent() { // 獲取內(nèi)容方法 return this.editor.getContent() } }, destroyed() { this.editor.destroy(); } } </script>
在頁面中使用
下面是使用代碼
<template> <div> <el-row class="warp"> <el-col :span="24" class="warp-breadcrum"> <el-breadcrumb separator=">"> <el-breadcrumb-item :to="{path:'/home'}"><b>首頁</b></el-breadcrumb-item> <el-breadcrumb-item :to="{path: '/aboutus/aboutlist'}">關(guān)于我們</el-breadcrumb-item> <el-breadcrumb-item>添加關(guān)于我們</el-breadcrumb-item> </el-breadcrumb> </el-col> <!-- Form 組件提供了表單驗證的功能,只需要通過 rule 屬性傳入約定的驗證規(guī)則,并 Form-Item 的 prop 屬性設(shè)置為需校驗的字段名即可。具體可以參考官網(wǎng):http://element.eleme.io/#/zh-CN/component/form --> <el-col :span="24" class="warp-main"> <el-form ref="infoForm" :model="infoForm" :rules="rules" label-width="120px"> <el-form-item label="標(biāo)題" prop="a_title"> <el-input v-model="infoForm.a_title"></el-input> </el-form-item> <el-form-item label="來源" prop="a_source"> <el-input v-model="infoForm.a_source"></el-input> </el-form-item> <!--使用編輯器 --> <el-form-item label="詳細(xì)"> <div class="edit_container"> <quill-editor v-model="infoForm.a_content" ref="myQuillEditor" class="editer" :options="editorOption" @ready="onEditorReady($event)"> </quill-editor> </div> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">確認(rèn)提交</el-button> </el-form-item> </el-form> </el-col> </el-row> </div> </template> <script> import { quillEditor } from 'vue-quill-editor' //調(diào)用編輯器 export default { data() { return { infoForm: { a_title: '', a_source: '', a_content:'', editorOption: {} }, //表單驗證 rules: { a_title: [ {required: true, message: '請輸入標(biāo)題', trigger: 'blur'} ], a_content: [ {required: true, message: '請輸入詳細(xì)內(nèi)容', trigger: 'blur'} ] }, } }, computed: { editor() { return this.$refs.myQuillEditor.quill } }, mounted() { //初始化 }, methods: { onEditorReady(editor) { }, onSubmit() { //提交 //this.$refs.infoForm.validate,這是表單驗證 this.$refs.infoForm.validate((valid) => { if(valid) { this.$post('m/add/about/us',this.infoForm).then(res => { if(res.errCode == 200) { this.$message({ message: res.errMsg, type: 'success' }); this.$router.push('/aboutus/aboutlist'); } else { this.$message({ message: res.errMsg, type:'error' }); } }); } }); } }, components: { //使用編輯器 quillEditor } } </script>
以上就是全部代碼,謝謝大家,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue+Openlayer中使用select選擇要素的實現(xiàn)代碼
本文通過實例代碼給大家介紹Vue+Openlayer中使用select選擇要素,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2021-08-08

如何在Vue中使localStorage具有響應(yīng)式(思想實驗)
這篇文章主要介紹了如何在Vue中使localStorage具有響應(yīng)式,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-07-07 
Vue3 響應(yīng)式高階用法之triggerRef()的使用
在Vue3響應(yīng)式系統(tǒng)中,shallowRef僅追蹤頂層屬性的變化,當(dāng)需要對內(nèi)層屬性作出反應(yīng)時,可使用triggerRef()方法手動觸發(fā)更新,本文介紹了triggerRef()的應(yīng)用場景、基本用法、功能和最佳實踐,感興趣的可以了解一下
2024-09-09