【前端】富文本框架

测试

• npm install vue-quill-editor -S
• 详细版本
• 部分样式的失效问题

效果

代码

• html代码

ref=“myTextEditor” // 没有使用到 应该是要清除或者对内部内容进行操作的时候才要用
v-model=“queryParams.content” // 绑定数据
:options=“editorOption” // 绑定选择项
style=“height: 400px” // 框架高度

<!-- 富文本框架 -->
          <quill-editor
            ref="myTextEditor"
            v-model="queryParams.content"
            :options="editorOption"
            style="height: 400px"
          ></quill-editor>

• 局部引入

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css"; // snow版本
import "quill/dist/quill.bubble.css"; // bubble版本
import { quillEditor } from "vue-quill-editor";

• 组件注册

components: {
    quillEditor,
  },

• 选择项注册

      editorOption: {
        placeholder: "请在此输入公告内容",
        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: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], //字体
            [{ align: [] }], //对齐方式
            ["clean"], //清除字体样式
            //  ['image','video']    上传图片、上传视频 暂时没有试过这个功能
          ],
        },
      },

• 显示【需要v-html】

	<div
        v-html="noticeMsg.content"
        style="margin: 10px; font-size: 20px"
      ></div>