vue 富文本使用

痛定思痛。 2022-11-13 06:23 244阅读 0赞

"vue-quill-editor": "^3.0.6", 安装依赖

<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 ? '编辑首页公告' : '添加首页公告'\}\}

</div>

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

<el-form-item label="活动物业">

<el-select v-model="ruleForm.region" placeholder="选择物业">

<el-option label="选择物业" value="shanghai"></el-option>

<el-option label="东岳花苑物业" 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="是否选择所有小区" 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>

</template>

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: '请输入活动名称', trigger: 'blur' \},

\{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' \}

\],

region: \[\{ required: true, message: '请选择活动区域', trigger: 'change' \}\],

resource: \[\{ required: true, message: '请选择活动资源', 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('提交成功！');

\},

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>

vue 富文本使用

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vue使用富文本编辑器wangEditor(详细)

相关 vue 使用CKEditor 富文本

相关 vue 使用富文本编译器

相关 vue使用tinymce5富文本编辑器

相关 vue使用百度富文本教程

相关 vue 富文本使用

相关 vue中使用富文本编辑器

相关 vue中使用vue-quill-editor富文本编辑器

相关 Vue中使用wangEditor富文本编辑器

相关 Vue - 全局使用富文本编辑器