post-ui/src/views/message/addMessage.vue

<template>
  <div class="message-add" :style="{height:height,width:width}"  >
    
    <!-- <el-page-header @back="goBack" content="创建消息"></el-page-header> -->
    <div class="message-add-box">
      <el-form :model="message" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="消息标题:" prop="messageTitle">
          <el-input v-model="message.messageTitle" placeholder="请输入消息标题"></el-input>
        </el-form-item> 
      
        <el-form-item label="发布时间:" required>
          <el-col :span="11">
            <el-form-item prop="dateTime">
              <el-time-picker placeholder="选择时间" v-model="message.dateTime" style="width: 100%;"></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="接受用户:" prop="receivedUsers">
          <el-input type="textarea" :rows="2" placeholder="请导入用户" autosize v-model="message.receivedUsers"></el-input>
        </el-form-item>  

        <el-form-item label="消息内容:" prop="messageContent">
          <quill-editor 
            class="ql-editor"
            v-model="content" 
            ref="myQuillEditor" 
            :options="editorOption" 
            >
          </quill-editor>
        </el-form-item>

        <!-- <el-form-item>
          <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
        </el-form-item> -->
      </el-form>
    </div>     
  </div>
</template>

<script>
import Quill from 'quill' // 引入编辑器
// 自定义字体大小
const Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '16px', '18px', '20px', '30px', '32px']
Quill.register(Size, true)

// 自定义字体类型
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']
var Font = Quill.import('formats/font')
Font.whitelist = fonts
Quill.register(Font, true)

 export default {
    data() {
      return {
        message: {
          messageTitle: '',
          dateTime: '',
          receivedUsers: '',
          messageContent: '',
        },
        rules: {
          messageTitle: [
            { required: true, message: '请输入消息标题', trigger: 'blur' }
          ],
          dateTime: [
            { type: 'date', required: true, message: '选择时间', trigger: 'change' }
          ],
          receivedUsers: [
            { required: true, message: '请导入用户', trigger: 'blur' }
          ],
          messageContent: [
            { required: true, trigger: 'blur' }
          ]
        },
        content: `<p>这是 vue-quill-editor 的内容！</p>`, //双向数据绑定数据
        // 富文本编辑器配置
        editorOption: {
          modules: {
              toolbar: [
                ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                ['blockquote', 'code-block'], // 引用  代码块
                  [{ header: 1 }, { header: 2 }], // 1、2 级标题
                  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                  [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                  [{ indent: '-1' }, { indent: '+1' }], // 缩进
                  [{ direction: 'rtl' }], // 文本方向
                  [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
                  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                  [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
                  [{ align: [] }], // 对齐方式
                  ['clean'], // 清除文本格式
                  ['link', 'image', 'video'] // 链接、图片、视频
          ],
            placeholder: '请输入正文'
          }
      }
    }
  }
}
</script>

<style>
.message-add{
  width: 700px;
  height: 100%;
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid #ccc;
}
.message-add-box{
  padding: 40px;
}
/* .users-input-box{
  color:aqua;
} */

.quill-editor /deep/ .ql-container {
    min-height: 220px;
  }

  .ql-container {
    min-height: 230px;
  }

.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  padding: 8px;
  width: 450px;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
    border-top: 0px;
    width: 450px;
}
</style>