vue 插入富文本框

下载Quill

npm install quill --save

<template>
    <div class="creditorbox">
        <div class="creditor">
            <div class="yuan1">3</div>
            竞价信息录入
        </div>
        <div style="width:800px;margin: 0 auto">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="155px" class="demo-ruleForm">
            
            <el-form-item label=" 担保物起拍价(元)" prop="startPrice">
                <el-input v-model="ruleForm.startPrice"  placeholder="请输入担保物起拍价(元)"></el-input>
            </el-form-item>
            <el-form-item label="保证金(元)：" prop="cashDeposit">
                <el-input v-model="ruleForm.cashDeposit"  placeholder="请输入保证金(元)"></el-input>
            </el-form-item>
            <el-form-item label="加价幅度(元)：" prop="bidIncrement">
                <el-input v-model="ruleForm.bidIncrement" placeholder="请输入加价幅度(元)"></el-input>
            </el-form-item>
            <el-form-item label="竞价周期" prop="endTime">
                <!-- <a-date-picker style="width:45%;"   @change="onChange1" placeholder="选择开始日期"/>
                <a-date-picker style="width:45%;"   @change="onChange2" placeholder="选择结束日期"/> -->
                <el-date-picker 
                    style="width: 45%;" 
                    v-model="ruleForm.startTime"  
                    type="date"  
                    format="yyyy 年 MM 月 dd 日" 
                    value-format="yyyy-MM-dd" 
                    placeholder="选择开始日期">
                </el-date-picker>
                <el-date-picker 
                    style="width: 45%;" 
                    v-model="ruleForm.endTime"  
                    type="date"  
                    format="yyyy 年 MM 月 dd 日" 
                    value-format="yyyy-MM-dd" 
                    placeholder="选择结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="延时周期(分钟)：" prop="delayedTime">
                <a-input-number id="inputNumber" :min="1"  v-model="ruleForm.delayedTime" @change="onChange" style="width:200px"  placeholder="请输入延时周期(分钟)"/>
            </el-form-item>
            <div style="line-height: 38px;"> 竞买公告</div>
            <quill-editor                                               //在这里
            v-model="ruleForm.announcement"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
            <div style="margin: 30px 0px;">
                <el-checkbox v-model="statem">特别声明</el-checkbox>
                <div class="statement">
                    本人承诺，本人提交的信息均为真实信息且合法，同时，本人对待处置担保物的未列明的权属瑕疵及纠纷承担责任
                </div>
            </div>
            <div  style="text-align: center;">
                <button @click.prevent="submitForm('ruleForm')" class="creditorntn">保存担保处置信息</button>
            </div>
            </el-form>
        </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";               //在这里
  export default {
       components: {
            quillEditor                                          //在这里
        },
    data() {
      return {
            statem:false,
            imageUrl: '',//上传照片
            editorOption: {},
            danbao:'',
            ruleForm: {
                announcement: "",//竞买公告
                bidIncrement: "",//加价幅度
                cashDeposit: "",//保证金
                delayedTime: "",//延迟周期（单位分钟）
                endTime: "",//竞拍结束时间（竞拍周期）
                id: "",//id 不传
                startPrice:'',//担保物起拍价
                startTime: "",//竞拍开始时间（竞拍周期）
                status: ""//状态 不传
            },
            rules: {
                announcement:[{ required: true, message: '请输入竞买公告', trigger: 'change' }],//竞买公告
                bidIncrement:[{ required: true, message: '请输入加价幅度', trigger: 'change' }],//加价幅度
                cashDeposit:[{ required: true, message: '请输入保证金', trigger: 'change' }],//保证金
                delayedTime:[{ required: true, message: '请输入延迟周期', trigger: 'change' }],//延迟周期（单位分钟）
                endTime:[{ required: true, message: '请选择竞拍结束时间', trigger: 'change' }],//竞拍结束时间（竞拍周期）
                startPrice:[{ required: true, message: '请输入担保物起拍价', trigger: 'change' }],//担保物起拍价
                startTime: [{ required: true, message: '请选择竞拍开始时间', trigger: 'change' }],//竞拍开始时间（竞拍周期）
            },
      };
    },
    props:{
        datas:{},
    },
    mounted(){
        console.log(this.datas)
        this.ruleForm=this.datas.biddingInformation
    },
    methods: {
        statemntn(){
            console.log(this.statem)
        },
        onChange1(date, dateString) {
            this.ruleForm.startTime=dateString
        }, 
        onChange2(date, dateString) {
            this.ruleForm.endTime=dateString
        }, 
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.$api.updateBidInformation({biddingInformation:this.ruleForm,id:this.$store.state.account.assignmentid,userId:this.$store.state.account.user.id}).then(res => {
                    if(res==''){
                        this.danbao=this.$store.state.account.assignmentid
                    }else if(res==undefined){
                        this.danbao=this.$store.state.account.assignmentid
                    }else{
                        this.$store.state.account.assignmentid=res
                    }
                    console.log(this.$store.state.account.assignmentid,'竞价信息录入')
                    this.$message.success("保存成功");
                }).catch(err => {
                    this.$message.error(err.message);
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        onChange(value){
            console.log('changed', value);
        },
         onEditorBlur() {          //在这里
        //失去焦点事件
        },
        onEditorFocus() {          //在这里
        //获得焦点事件
        },
        onEditorChange() {          //在这里
        //内容改变事件
        },
    },
  }
</script>
<style>
    .creditor{
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        line-height: 25px;
        color: rgba(51,51,51,1);
        opacity: 1;
        height: 42px;
        line-height: 26px;
        padding: 0 20px;
        border-bottom: 1px solid rgb(247, 239, 239);
        margin-bottom: 15px
    }
    .creditorbox{
        background: #fff
    }
    .yuan1{
        width:23px;
        height:23px;
        background:rgba(211,28,31,1);
        border-radius:50%;
        opacity:1;
        color: #fff;
        display: inline-block;
        line-height: 23px;
        margin: auto 0;
        text-align: center
    }
    .creditorntn{
        width:130px;
        height: 32px;
        background:rgba(211,28,31,1);
        opacity:1;
        border-radius:4px;
        color: #fff;
        line-height: 32px;
        border: 0px;
        margin-bottom: 20px;
        margin: 20px 10px;
    }
    


        /* 上传照片样式 */
      .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .statement{
            width:456px;
            height:39px;
            font-size:14px;
            font-family:PingFang SC;
            font-weight:400;
            line-height:30px;
            color:rgba(51,51,51,1);
            opacity:1;
            margin-left: 24px;
            /* display: inline-block; */
            display: block;
        }
        .ql-editor{
            height: 200px;
        } 
        .ql-blank{
            height: 200px;
        }
        
</style>


*其他的富文本*
地址在这:[添加链接描述](https://blog.csdn.net/liub37/article/details/83310879)