vue实现富文本

vue实现富文本

1、引入插件

npm install vue-quill-editor --save

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";
export default{
  components:{ quillEditor },data(){return{
      content:"",// 文本内容};},
  methods:{// 失去焦点事件onEditorBlur(){},// 获得焦点事件onEditorFocus(){},// 准备编辑器onEditorReady(){},// 内容改变事件onEditorChange(){},},
  watch:{// 监听文本变化内容content(){
      console.log(this.content);},},};</script>

3、使用注册的组件内容

<template><!-- 富文本 --><quill-editor
    ref="myQuillEditor"
    v-model="content":options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
    @change="onEditorChange($event)"/></template>

4、根据自身使用情况选择全局注册还是某一页面注册使用，显示效果如下：

5、回显显示，使用v-html

<div v-html="msg" class="ql-editor"></div>

注意：class="ql-editor" 是为了将文本样式与富文本框输入的样式保持一致（也可自己写样式）

其他（功能优化）

1、输入框提示文本

 editorOption:{
    placeholder:"请输入需要编写的内容...",},

2、内容控件汉化

提示：将代码样式复制到对应组件中即刻

<style>.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="small"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content:"10px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content:"18px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content:"32px";}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content:"文本";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content:"标题1";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content:"标题2";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content:"标题3";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content:"标题4";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content:"标题5";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content:"标题6";}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content:"标准字体";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content:"衬线字体";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content:"等宽字体";}</style>

3、显示效果如下：

4、编辑图片

4.1、安装依赖包，包含编辑器包，拖拽包，缩放包

npm i quill-image-drop-module  -S // 拖拽插件
npm i quill-image-resize-module -S // 放大缩小插件

4.2、组件里引入使用

import { ImageDrop } from "quill-image-drop-module";// 图片拖动组件引用
import ImageResize from "quill-image-resize-module";// 图片缩放组件引用
Quill.register("modules/imageDrop", ImageDrop);// 注册
Quill.register("modules/imageResize", ImageResize);// 注册

4.3、在data中配置`

      editorOption:{
        placeholder:"请输入需要编写的内容...",
        modules:{
          imageDrop: true,//图片拖拽
          imageResize:{//放大缩小
            displayStyles:{
              backgroundColor:"black",
              border:"none",
              color:"white",},
            modules:["Resize","DisplaySize","Toolbar"],},// 需要重置工具，不然富文本工具上的功能会缺失
          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:["12","14","16","18","20","22","24","28","32","36",],},],// 字体大小[{ header:[1,2,3,4,5,6]}],// 标题[{ color:[]},{ background:[]}],// 字体颜色、字体背景颜色// [{ font: ['songti'] }], // 字体种类[{ align:[]}],// 对齐方式["clean"],// 清除文本格式["image","video"],// 链接、图片、视频],},},

4.4、将在webpack中对插件进行配置

提示：找到文件中vue.config.js进行配置

const webpack =require('webpack')// 引入webpack

module.exports ={// 在vue.config.js中configureWebpack中配置
configureWebpack:{
    plugins:[
      new webpack.ProvidePlugin({'window.Quill':'quill/dist/quill.js','Quill':'quill/dist/quill.js'})]}}

注意：配置完成后需要重启服务

完整组件代码

<template><!-- 富文本 --><div><quill-editor
      ref="myQuillEditor"
      v-model="textContent.content":options="editorOption"
      @blur="onEditorBlur()"
      @focus="onEditorFocus()"
      @ready="onEditorReady()"
      @change="onEditorChange()"/><el-button
      class="button"
      size="small"
      type="primary"
      @click="handleSendData">保存/发布</el-button
    ></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";
import { ImageDrop } from "quill-image-drop-module";// 图片拖动组件引用
import ImageResize from "quill-image-resize-module";// 图片缩放组件引用
Quill.register("modules/imageDrop", ImageDrop);// 注册
Quill.register("modules/imageResize", ImageResize);// 注册
export default{
  components:{ quillEditor },data(){return{
      textContent:{
        content:"",
        textShow: false,},
      editorOption:{
        placeholder:"请输入需要编写的内容...",
        modules:{
          imageDrop: true,//图片拖拽
          imageResize:{//放大缩小
            displayStyles:{
              backgroundColor:"black",
              border:"none",
              color:"white",},
            modules:["Resize","DisplaySize","Toolbar"],},
          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:["12","14","16","18","20","22","24","28","32","36",],},],// 字体大小[{ header:[1,2,3,4,5,6]}],// 标题[{ color:[]},{ background:[]}],// 字体颜色、字体背景颜色// [{ font: ['songti'] }], // 字体种类[{ align:[]}],// 对齐方式["clean"],// 清除文本格式["image","video"],// 链接、图片、视频],},},};},
  methods:{// 失去焦点事件onEditorBlur(){},// 获得焦点事件onEditorFocus(){},// 准备编辑器onEditorReady(){},// 内容改变事件onEditorChange(){},//保存按钮点击事件handleSendData(){
      this.$emit("sendContentData", this.textContent);},// 获取已有的文本内容getContent(e){
      this.textContent.content = e;},},// watch: {//   // 监听文本变化内容//   content() {//     console.log(this.content);//   },// },};</script><style>/* 富文本框汉化 */.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="small"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content:"10px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content:"18px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content:"32px";}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content:"文本";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content:"标题1";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content:"标题2";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content:"标题3";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content:"标题4";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content:"标题5";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content:"标题6";}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content:"标准字体";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content:"衬线字体";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content:"等宽字体";}/* 确认按钮 */.button {
  margin-top:10px;}</style>

链接: 官方链接

总结

供自己学习笔记使用