vue富文本添加行高控制

写在前面的话【样式不能加scoped】

0、通过css给行高添加标题以及样式【不能加scoped】：

样式设置，注意：不能加scoped：

.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {
  content: '行高';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {
  content: '1';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {
  content: '1.5';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.75']::before {
  content: '1.75';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
  content: '2';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
  content: '3';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
  content: '4';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {
  content: '5';
}
.ql-snow .ql-picker.ql-lineheight {
  width: 70px;
}

1、创建样式文件：

创建一个lineHeight.js，在里实例化一个lineHeightAttributor对象：

import Quill from "quill";
const Parchment = Quill.import("parchment");
class lineHeightAttributor extends Parchment.Attributor.Style { }
const lineHeightStyle = new lineHeightAttributor("lineHeight", "line-height", {
  scope: Parchment.Scope.INLINE,
  whitelist: ["1", "1.5", "1.75", "2", "3", "4", "5"]
});

export { lineHeightStyle }

2、在vue文件中导入样式对象：

import { lineHeightStyle } from '@/utils/lineHeight'

3、工具栏配置：

配置行高参数：

const toolbarOptions = [
  [{ lineheight: ['initial', '1', '1.5', '1.75', '2', '3', '4', '5'] }]
]

配置行高响应函数：

在vue-quill-editor的配置参数里面配置设置行高的响应函数（放到handlers里面）：

      // 富文本编辑器配置
      editorOption: {
        placeholder: '请在这里输入',
        theme: 'snow', //主题 snow/bubble
        history: {
          delay: 1000,
          maxStack: 50,
          userOnly: false
        },
        modules: {
          toolbar: {
            container: toolbarOptions, //工具栏
            handlers: {
              lineheight: (value) => {
                if (value) {
                  let quill = this.$refs.myQuillEditor.quill;
                  quill.format("lineHeight", value)
                }
              }
            }
          },
        }
      }

4、注册样式：

监听ready事件：

在vue-quill-editor上面监听ready事件（@ready=“onEditorReady($event)”：

<quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" />

注册lineHeightStyle：

在编辑器的 ready 事件响应函数中注册lineHeightStyle：

import Quill from 'quill'
methods: {
    // 准备富文本编辑器
    onEditorReady (quill) {
      Quill.register({ 'formats/lineHeight': lineHeightStyle }, true)
    }
}

<template>
  <div class="components-container">
    <div>
      <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" />
    </div>
    <div class="editor-content" v-html="content" />
  </div>
</template>

<script>
import Quill from 'quill'
import { lineHeightStyle } from '@/utils/lineHeight'
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'],                     //引用，代码块
  [{ 'header': 1 }, { 'header': 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'],            // 清除样式,
  ['link', 'image'],  // 上传图片、上传视频
  [{ lineheight: ['initial', '1', '1.5', '1.75', '2', '3', '4', '5'] }]
]

export default {
  components: {
    quillEditor
  },
  data () {
    return {
      // 富文本编辑器默认内容
      content: '<p>这是一段文字。</p>',
      //富文本编辑器配置
      editorOption: {
        placeholder: '请在这里输入',
        theme: 'snow', //主题 snow/bubble
        history: {
          delay: 1000,
          maxStack: 50,
          userOnly: false
        },
        modules: {
          toolbar: {
            container: toolbarOptions, //工具栏
            handlers: {
              lineheight: (value) => {
                if (value) {
                  let quill = this.$refs.myQuillEditor.quill;
                  quill.format("lineHeight", value)
                }
              }
            }
          },
        }
      }
    }
  },
  methods: {
    // 准备富文本编辑器
    onEditorReady (quill) {
      Quill.register({ 'formats/lineHeight': lineHeightStyle }, true)
    },
    //失去焦点事件
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
    },
    //获得焦点事件
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    //内容改变事件
    onEditorChange ({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    }
  }
}
</script>
<style lang='less'>
.ql-container {
  // 设置默认字号
  font-size: 16px;
  height: 300px;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {
  content: '行高';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {
  content: '1';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {
  content: '1.5';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.75']::before {
  content: '1.75';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
  content: '2';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
  content: '3';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
  content: '4';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {
  content: '5';
}
.ql-snow .ql-picker.ql-lineheight {
  width: 70px;
}
</style>