vue-quill-editor 根据自己的需求修改工具栏并且汉化

努力搬砖的小码

已于 2023-11-09 09:25:03 修改

阅读量712

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-11-06 15:46:32 首次发布

本文链接：https://blog.csdn.net/weixin_63199745/article/details/134246935

版权

首先我们先根据自己的需求修改工具栏

第一步下载

npm i vue-quill-editor -D

第二步安装依赖

npm i quill -D

第三步局部引用

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)

第四步

export default {
  name: 'QuillEditor',
  components: {
    quillEditor
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-editor-quill'
    },
    // 表单校验用字段
    // eslint-disable-next-line
    value: {
      type: String
    }
  },
  data () {
    return {
      editorOption: {
        placeholder: '请在这里输入',
        theme: 'snow',
        modules: {
          toolbar: {
            // 拦截
            handlers: {
              image: function (value) {
                if (value) {
                  document.querySelector('#upload').click()// 劫持原来的图片点击按钮事件
                }
              }
            },
            container: [
            // 加粗，斜体，下划线，删除线
              ['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'] // 上传图片
            ]
          },
          ImageExtend: {
            loading: true,
            name: 'pictureFile',
            size: 6,
            start: () => {},
            end: () => {},
            error: () => {},
            change: (xhr, formData) => {}
          }
        }
      }
    }
  },
  methods: {
    // 获取焦点事件
    focus (event) {
      // 设置富文本编辑器不可编辑
      if (this.umber === true) {
        event.enable(false)
      }
    },
    show (e) {
      this.visible = true
      this.queryParam.title = e.title
      this.queryParam.number = e.number
      this.queryParam.content = e.content
      this.submitd = false
      this.resetd = false
      this.umber = true
      this.Title = true
    },
    onEditorChange ({ quill, html, text }) {
      this.queryParam.content = html
    },
    submit () {
      addMessageList({
        title: this.queryParam.title
      }).then(res => {
        this.$message.success('上传成功')
        this.visible = false
        this.queryParam.content = ''
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    // 拦截
    change (e) {
      const file = e.target.files[0]
      const formData = new FormData()
      formData.append('userfile', file)
      messageLoad(formData)
        .then((res) => {
          const quill = this.$refs.myQuillEditor.quill
          if (res === '上传成功') {
            // const formdata = _.extend({}, this.formdata)
            const length = quill.getSelection().index // 光标位置
            // 插入图片  图片地址
            // console.log('图片地址', res)
            // const imgurl = `http://XX.XX.XX.XX:8000/messagefiles/` + e.target.files[0].name
            quill.insertEmbed(length, 'image', imgurl)
            // 调整光标到最后
            quill.setSelection(length + 1) // 光标后移一位
          }
        })
        .catch((err) => {
          console.error(err)
        })
    },
}

重点代码是：

   modules: {
          toolbar: {
            container: [
            // 加粗，斜体，下划线，删除线
              ['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'] // 上传图片
            ]
          }
        }

接下来我们来说汉化

前三步跟前面一样

第四步

  .editor {
      line-height: normal !important;
      height: 800px;
    }
/deep/ .ql-snow .ql-tooltip[data-mode=link]::before {
   content: "请输入链接地址:";
 }
/deep/ .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
        content: '保存';
        padding-right: 0px;
    }

  /deep/  .ql-snow .ql-tooltip[data-mode=video]::before {
        content: "请输入视频地址:";
    }

  /deep/  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  /deep/  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
      content: '14px';
    }
  /deep/  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  /deep/  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
      content: '10px';
    }
  /deep/  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  /deep/  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
      content: '18px';
    }
  /deep/  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  /deep/  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
      content: '32px';
    }

  /deep/  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  /deep/  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
      content: '文本';
    }
  /deep/  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  /deep/  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      content: '标题1';
    }
  /deep/  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  /deep/  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      content: '标题2';
    }
  /deep/  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  /deep/  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
      content: '标题3';
    }
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
      content: "标题4";
    }
  /deep/  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  /deep/  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
      content: '标题5';
    }
  /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
      content: '标题6';
    }

  /deep/  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  /deep/  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
      content: '标准字体';
    }
  /deep/  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  /deep/  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
      content: '衬线字体';
    }
  /deep/  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  /deep/  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
      content: '等宽字体';
    }
  /deep/  .ql-align-center{
      text-align: center;
    }
  /deep/  .ql-align-right{
      text-align: right;
    }
  /deep/  .ql-align-left{
      text-align: left;
    }

或者后面加个 ! importmant