"vue-quill-editor": "^3.0.6", installation dependency
<template>
<div class="contPage">
<div class="contentPage">
<div class="container">
<div class="containerTitle" style="cursor: pointer;" @click="back">
<i class="el-icon-back "></i>
{ {$route.query.row?'Edit homepage announcement':'Add homepage announcement'}}
</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="Activity Property">
<el-select v-model="ruleForm.region" placeholder="选择物业">
<el-option label="选择物业" value="shanghai"></el-option>
<el-option label="Dongyue Garden Property" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="标题">
<el-input v-model="ruleForm.address"></el-input>
</el-form-item>
<el-form-item label="内容">
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption"></quill-editor>
</el-form-item>
<el-form-item label="Whether to select all districts" label-width="120">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm()">提交</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
import {tableDataNotice} from "../../mock/pageManagement"
export default {
name: 'editor',
data: function () {
return {
content: '',
editorOption: {
placeholder: 'Hello World'
},
ruleForm: {
address: "",
name: '',
region: '',
type: [],
resource: '',
},
rules: {
name: [
{required: true, message:'Please enter the event name', trigger:'blur' },
{min: 3, max: 5, message: '3 to 5 characters in length', trigger:'blur'}
],
region: [{ required: true, message:'Please select the active region', trigger:'change' }],
resource: [{ required: true, message:'Please select an activity resource', trigger:'change' }],
}
};
},
components: {
quillEditor
},
mounted() {
let flag = this.$route.query.flag;
if(flag == 'edit') {
this.ruleForm = this.$route.query.row;
}
},
methods: {
back() {
this.$router.go(-1);
},
onEditorChange({ editor, html, text }) {
this.content = html;
},
submit() {
console.log(this.content);
this.$message.success('Submitted successfully!');
},
submitForm() {
this.ruleForm.id = tableDataNotice.length +1;
tableDataNotice.push(this.ruleForm);
this.$router.push("/notice");
}
}
};
</script>
<style scoped>
.contPage {
padding: 20px;
}
.editor-btn {
margin-top: 20px;
}
.contentPage {
width: 100%;
height: 600px;
overflow-y: scroll;
}
.containerTitle {
box-sizing: border-box;
margin: 20px;
border-bottom: 1px solid #f1f1f1;
padding-bottom: 20px;
}
</style>