Vue中使用quill-editor(富文本编辑器)

一、安装quill-editor富文本编辑器

安装:
npm install vue-quill-editor --save
安装Vue-Quill-Editor需要依赖:
npm install quill --save

二、引入

1.全局引入

在main.js中引入(示例):

// 文件:main.js
import  VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
// 下面三行必须要写
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

全局引入结束,在页面中即可使用。

2.局部引入

在模块中引入(示例):

<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";
</script>

模块中引入结束。

三、使用

以局部引入为例:

<template>
  <quill-editor
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)"
  >
  </quill-editor>
</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 {
      content: null,
      editorOption: {},
    };
  },
  methods: {
    onEditorBlur() {
      //失去焦点事件
    },
    onEditorFocus() {
      //获得焦点事件
    },
    onEditorChange() {
      //内容改变事件
    },
  },
};
</script>

效果图:

四、toolbar工具栏对应的模块

首先要知道toolbar包括哪些内容,toolbar里的内容大致分为以下两类:

// 1.只需要填写功能名
bold - 加粗
italic - 斜体
underline - 下划线
strike - 删除线
blockquote - 引用
code-block - 代码块
formula - 公式
image - 图片
video - 视频
clean - 清除所有样式
// 这一类直接['name','name']就可以使用

// 2.需要写默认值
header - 标题  
[{ 'header': 1 }, { 'header': 2 }]

list - 列表(有序和无序列表)
[{ 'list': 'ordered'}, { 'list': 'bullet' }]

script - 上标/下标
[{ 'script': 'sub'}, { 'script': 'super' }]
indent - 缩进
[{ 'indent': '-1'}, { 'indent': '+1' }]

direction - 文本方向
[{ 'direction': 'rtl' }]

// 3.有多个值,以下拉列表展示
// false代表默认选中
size - 文字大小
 [{ 'size': ['small', false, 'large', 'huge'] }]

header - 标题
[{ 'header': [1, 2, 3, 4, 5, 6, false] }]

// 4.只需填写一个空数组 系统会出现默认的选项
color - 字体颜色
background - 背景颜色
[{ 'color': [] }, { 'background': [] }]
font - 字体
[{ 'font': [] }]
align - 文本对齐
[{ 'align': [] }]

五、使用自定义的toolbar

1.定制自己的toolbar

了解了toolbar中的内容,就可以在配置toolbar时选择自己需要的功能,如果有不需要的功能,在下面的数组中删除即可。

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ 'header': 1 }, { 'header': 2 }],
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: ['small', false, 'large', 'huge']}], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: []}], //显示字体选择
  [{ align: [] }], // 对齐方式-----
  ["clean"], // 清除文本格式-----
  ['link', 'image', 'video'], // 链接、图片、视频-----
];

2.使用定制的toolbar

模块中使用代码如下(示例):

<script>
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ 'header': 1 }, { 'header': 2 }],
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: ['small', false, 'large', 'huge']}], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: []}], //显示字体选择
  [{ align: [] }], // 对齐方式-----
  ["clean"], // 清除文本格式-----
  ['link', 'image', 'video'], // 链接、图片、视频-----
];
export default {
  data() {
    return {
      content: null,
      editorOption: {
      	// 主题
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
        },
      },
    };
  },
};
</script>

3.完整代码

<template>
  <quill-editor
    v-model="content"
    ref="editorRef"
    :options="editorOption"
    @focus="onEditorFocus($event)"
    @blur="onEditorBlur($event)"
    @change="onEditorChange($event)"
    class="editor"
  />
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
// 定制toolbar
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ header: 1 }, { header: 2 }],
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: [] }], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], //显示字体选择
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["link"], // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
  name: "TestQuillEditor",
  components: { quillEditor },
  data() {
    return {
      content: "",
      editorOption: {
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
        },
      },
    };
  },
  computed: {
    //当前富文本实例
    editor() {
      return this.$refs.editorRef.quillEditor;
    },
  },
  methods: {
    // 准备富文本编辑器
    onEditorReady() {},
    // 富文本编辑器 失去焦点事件
    onEditorBlur() {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus() {},
    // 富文本编辑器 内容改变事件
    onEditorChange({ html }) {
      //内容改变事件
      // console.log('内容改变事件');
    },
  },
};
</script>
<style>
</style>

效果图如下:

六、增加字体和文字大小--准备css文件

新建字体文件的css文件

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑体";
  font-family: "SimHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷体";
  font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
  content: "Arial";
  font-family: "Arial";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
  content: "Times New Roman";
  font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
  content: "sans-serif";
  font-family: "sans-serif";
}

.ql-font-SimSun {
  font-family: "SimSun";
}

.ql-font-SimHei {
  font-family: "SimHei";
}

.ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}

.ql-font-KaiTi {
  font-family: "KaiTi";
}

.ql-font-FangSong {
  font-family: "FangSong";
}

.ql-font-Arial {
  font-family: "Arial";
}

.ql-font-Times-New-Roman {
  font-family: "Times New Roman";
}

.ql-font-sans-serif {
  font-family: "sans-serif";
}

/* 字号设置 */
/* 默认字号 */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
  font-size: 14px;
}

.ql-size-14px {
  font-size: 14px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
  font-size: 16px;
}

.ql-size-16px {
  font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px";
  font-size: 18px;
}

.ql-size-18px {
  font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
  font-size: 20px;
}

.ql-size-20px {
  font-size: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
  content: "22px";
  font-size: 22px;
}

.ql-size-22px {
  font-size: 22px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
  content: "26px";
  font-size: 26px;
}

.ql-size-26px {
  font-size: 26px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
  content: "28px";
  font-size: 28px;
}

.ql-size-28px {
  font-size: 28px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
  content: "30px";
  font-size: 30px;
}

.ql-size-30px {
  font-size: 30px;
}

七、增加字体和文字大小--使用该css文件

1.引入到模块中

本人新建的css文件保存在 assets/css/quillEditor.css ,使用下面代码时需要改成自己的路径。

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
// 必须要引入
import * as Quill from "quill";
// 新建的css文件的保存位置,如不同,需要修改
import "../assets/css/quillEditor.css";
// 自定义的字体,注意下面的内容要和css里面对应上
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
];
// 自定义字号的大小,注意下面的内容要和css里面对应上
var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
</script>

2.将css注册到quill-editor中

不知道是不是这么个意思,反正这么写就对了。

var Size = Quill.import("formats/size");
Size.whitelist = sizes;
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);

八、完整代码

<template>
  <quill-editor
    v-model="content"
    ref="editorRef"
    :options="editorOption"
    @focus="onEditorFocus($event)"
    @blur="onEditorBlur($event)"
    @change="onEditorChange($event)"
    class="editor"
  />
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
import "../../assets/css/quillEditor.css";
import * as Quill from "quill";
//quill编辑器的字体
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
];
// 自定义字号的大小
var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: sizes }], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: fonts }], //显示字体选择
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ['link', 'image', 'video'], // 链接、图片、视频-----
];

export default {
  name: "TestQuillEditor",
  components: { quillEditor },
  data() {
    return {
      content: "",
      editorOption: {
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
        },
      },
    };
  },
  computed: {
    //当前富文本实例
    editor() {
      return this.$refs.editorRef.quillEditor;
    },
  },
  methods: {
    // 准备富文本编辑器
    onEditorReady() {},
    // 富文本编辑器 失去焦点事件
    onEditorBlur() {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus() {},
    // 富文本编辑器 内容改变事件
    onEditorChange({ html }) {
      //内容改变事件
    },
  },
};
</script>
<style>
</style>

效果图:

九、组件封装

在components中新建文件,写入下面的代码:

<template>
  <quill-editor
    :id="randomId(3)"
    v-model="content"
    :ref="editorRef"
    :options="editorOption"
    @focus="onEditorFocus($event)"
    @blur="onEditorBlur($event)"
    @change="onEditorChange($event)"
    class="editor"
  />
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
// 自定义的字体和文字大小样式
import "../assets/css/quillEditor.css";
import * as Quill from "quill";
//quill编辑器的字体
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
];
// 自定义字号的大小
var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: sizes }], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: fonts }], //显示字体选择
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["link"], // 链接、图片、视频-----['link', 'image', 'video']
];

export default {
  name: "TestQuillEditor",
  components: { quillEditor },
  props: {
    // 编辑器的内容
    editorContent: {
      type: String,
      required: true,
    },
    editorRef: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      content: this.editorContent,
      editorOption: {
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
        },
      },
    };
  },
  computed: {
    //当前富文本实例
    editor() {
      return this.$refs.editorRef.quillEditor;
    },
  },
  watch: {
    editorContent() {
      this.content = this.editorContent;
    },
  },
  methods: {
    randomId(len) {
      var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
      var tempLen = chars.length,
        tempStr = "";
      for (var i = 0; i < len; ++i) {
        tempStr += chars.charAt(Math.floor(Math.random() * tempLen));
      }
      return tempStr;
    },
    // 准备富文本编辑器
    onEditorReady() {},
    // 富文本编辑器 失去焦点事件
    onEditorBlur() {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus() {},
    // 富文本编辑器 内容改变事件
    onEditorChange({ html }) {
      //内容改变事件
      // console.log('内容改变事件');
      this.$emit("input", this.content);
    },
  },
};
</script>
<style>
</style>

十、父组件引用

代码如下(示例):

<template>
  <div>
    <editor
      v-model="editorContent"
      :editorContent="editorContent"
      :editorRef="editorRef"
    ></editor>
	<!-- 回显富文本编辑器的内容 -->
	<div v-html="editorContent"></div>
	<!-- 查看富文本编辑器的内容 -->
    <div>{{ editorContent }}</div>
  </div>
</template>

<script>
// 引入子组件
import editor from "../../components/Quill-editor.vue";
export default {
  components: {
    editor,
  },
  data() {
    return {
      editorRef: "test",
      editorContent: "",
    };
  },
  methods: {},
};
</script>
<style>
</style>

效果图:

来源:https://blog.csdn.net/qq_36947168/article/details/119488316
凯宾斯基:https://www.cnblogs.com/kaibindirver/p/14271067.html

posted @   夜久听山雨  阅读(4340)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示