vue2+quill封装富文本编辑器

最新推荐文章于 2024-09-12 17:53:05 发布
最新推荐文章于 2024-09-12 17:53:05 发布
阅读量878 收藏 18
点赞数 2
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H30919/article/details/132252574
版权

vue2封装富文本编辑器

下载依赖

npm install quill@1.3.7
npm install quill-image-drop-module@1.0.3
npm install quill-image-extend-module@1.1.2
npm install quill-image-resize-module@3.0.0
npm install vue-quill-editor@3.0.6

简单使用

<template>
  <div>
    <div>
      <!--富文本编辑器组件-->
      <quill-editor
          v-model="formData.content"
          ref="QuillEditor"
          class="editor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)"
      >
      </quill-editor>
    </div>
  </div>
</template>
<script>
  import { quillEditor } from 'vue-quill-editor'
  import Delta from 'quill-delta'
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';
  import * as Quill from 'quill' //引入编辑器

  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': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体
    [{ 'align': [] }],    // 居中
    ['clean'],            // 清除样式,
    ['link','image'],   // 上传图片、上传视频
    ['myButton'],
  ]

  // toolbar标题
  const titleConfig = [
    { Choice: '.ql-insertMetric', title: '跳转配置' },
    { Choice: '.ql-bold', title: '加粗' },
    { Choice: '.ql-italic', title: '斜体' },
    { Choice: '.ql-underline', title: '下划线' },
    { Choice: '.ql-header', title: '段落格式' },
    { Choice: '.ql-strike', title: '删除线' },
    { Choice: '.ql-blockquote', title: '块引用' },
    { Choice: '.ql-code', title: '插入代码' },
    { Choice: '.ql-code-block', title: '插入代码段' },
    { Choice: '.ql-font', title: '字体' },
    { Choice: '.ql-size', title: '字体大小' },
    { Choice: '.ql-list[value="ordered"]', title: '编号列表' },
    { Choice: '.ql-list[value="bullet"]', title: '项目列表' },
    { Choice: '.ql-direction', title: '文本方向' },
    { Choice: '.ql-header[value="1"]', title: 'h1' },
    { Choice: '.ql-header[value="2"]', title: 'h2' },
    { Choice: '.ql-align', title: '对齐方式' },
    { Choice: '.ql-color', title: '字体颜色' },
    { Choice: '.ql-background', title: '背景颜色' },
    { Choice: '.ql-image', title: '图像' },
    { Choice: '.ql-video', title: '视频' },
    { Choice: '.ql-link', title: '添加链接' },
    { Choice: '.ql-formula', title: '插入公式' },
    { Choice: '.ql-clean', title: '清除字体格式' },
    { Choice: '.ql-script[value="sub"]', title: '下标' },
    { Choice: '.ql-script[value="super"]', title: '上标' },
    { Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
    { Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
    { Choice: '.ql-header .ql-picker-label', title: '标题大小' },
    { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
    { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
    { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
    { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
    { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
    { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
    { Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
    { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
    { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
    { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
    { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
    { Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
    { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
    { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
    { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
  ]
  export default {
    name: 'addarticle',
    components: {
      quillEditor
    },
    data () {
      return {
        formData: {
          content: '' // `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1>`
        },
        editorOption: {
          placeholder: '请在这里输入',
          theme: 'snow', //主题 snow/bubble
          modules: {
            history: {
              delay: 1000,
              maxStack: 50,
              userOnly: false
            },
            toolbar: {
              container: toolbarOptions,
              handlers: {}
            }
          }
        }
      }
    },
    mounted () {
      this.initTitle()
    },
    methods: {
      initTitle () {
        document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
        for (let item of titleConfig) {
          let tip = document.querySelector('.quill-editor ' + item.Choice)
          if (!tip) continue
          tip.setAttribute('title', item.title)
        }
      },

      // 失去焦点
      onEditorBlur (editor) { },

      // 获得焦点
      onEditorFocus (editor) {
      },

      // 开始
      onEditorReady (editor) { },
    }
  }
</script>
<style>
</style>

汉化标题栏

<style>
    p {
      margin: 10px;
    }

    .edit_container,
    .quill-editor {
      height: 300px;
    }

    .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>

图片拖拽上传和调整大小

  import { ImageDrop } from 'quill-image-drop-module';
  import ImageResize from "quill-image-resize-module";
  Quill.register("modules/imageResize", ImageResize);
  import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
  Quill.register('modules/ImageExtend', ImageExtend)
  Quill.register('modules/imageDrop', ImageDrop);

          modules: {
            history: {
              delay: 1000,
              maxStack: 50,
              userOnly: false
            },
            toolbar: {
              container: toolbarOptions,
              handlers: {
              }
            },
            // 图片拖拽上传
            imageDrop:true,
            // 放大缩小
            imageResize:{
              displaySize: true
            },
          }

解决resize的报错

vue-cli3

const webpack = require("webpack");
module.exports = {
  //调整内部的 webpack 配置
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        Quill: 'quill/dist/quill.js'
      })
    ]
  },
}

vue-cli4

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');

module.exports = {
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.plugin('provide').use(new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      Quill: 'quill/dist/quill.js'
    }));
  }
};

上传如果不想走接口的小伙伴到这就可以了~~~

===========================================================================

视频中的一点和笔记的出入

myUoload = 笔记中的myButton

myMethod = 笔记中的showHandle

自定义上传

  • 引入uoload组件
<el-upload
    class="quill-upload"
    action="http://localhost:9090/file/upload"
    :headers="{'token':getToken()}"
    :before-upload="beforeUpload"
    :on-success="quillSuccess"
    ref="upload"
>
</el-upload>
  • 配置项
 toolbar: {
    container: toolbarOptions,
    handlers: {
      myUploadBtn: this.showHandle
    }
},
  • 写以下三个方法
showHandle () {
  // this.$message.success('这是自定义工具栏的方法！')
  // 获取到Quill实例
  this.Quill=this.$refs.QuillEditor.quill
  this.$refs.upload.$children[0].$refs.input.click()
},

// 自定义按钮内容初始化
initButton () {
  const editorButton = document.querySelector('.ql-myButton')
  editorButton.innerHTML = '<i class="el-icon-picture" style="font-size: 18px;color:black"></i>'
},

// 上传成功的回调
quillSuccess(res, file) {
  if (file.status === 'success') {
    // 获取光标所在位置
    let length = this.$refs.QuillEditor.quill.getSelection().index
    // 插入图片  res.url为服务器返回的图片地址
    this.Quill.insertEmbed(length, 'image', res)
    // 调整光标到最后
    this.$refs.QuillEditor.quill.setSelection(length + 1)
  } else {
    this.$message.error('图片插入失败')
  }
},
  • 挂载时调用方法
mounted () {
  this.initButton()
  this.initTitle()
},

完整代码

假上传

仅仅是把图片插入到富文本编辑器，不走接口

<template>
  <div style="padding: 30px">
    <div>
      <!--富文本编辑器组件-->
      <quill-editor
          style="height: 600px"
          v-model="formData.content"
          ref="QuillEditor"
          class="editor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)"
      >
      </quill-editor>
    </div>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import Delta from 'quill-delta'
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import * as Quill from 'quill' //引入编辑器
import { ImageDrop } from 'quill-image-drop-module';
import ImageResize from "quill-image-resize-module";
Quill.register("modules/imageResize", ImageResize);
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
Quill.register('modules/imageDrop', ImageDrop);

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': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体
  [{ 'align': [] }],    // 居中
  ['clean'],            // 清除样式,
  ['link','image'],   // 上传图片、上传视频
]

// toolbar标题
const titleConfig = [
  { Choice: '.ql-insertMetric', title: '跳转配置' },
  { Choice: '.ql-bold', title: '加粗' },
  { Choice: '.ql-italic', title: '斜体' },
  { Choice: '.ql-underline', title: '下划线' },
  { Choice: '.ql-header', title: '段落格式' },
  { Choice: '.ql-strike', title: '删除线' },
  { Choice: '.ql-blockquote', title: '块引用' },
  { Choice: '.ql-code', title: '插入代码' },
  { Choice: '.ql-code-block', title: '插入代码段' },
  { Choice: '.ql-font', title: '字体' },
  { Choice: '.ql-size', title: '字体大小' },
  { Choice: '.ql-list[value="ordered"]', title: '编号列表' },
  { Choice: '.ql-list[value="bullet"]', title: '项目列表' },
  { Choice: '.ql-direction', title: '文本方向' },
  { Choice: '.ql-header[value="1"]', title: 'h1' },
  { Choice: '.ql-header[value="2"]', title: 'h2' },
  { Choice: '.ql-align', title: '对齐方式' },
  { Choice: '.ql-color', title: '字体颜色' },
  { Choice: '.ql-background', title: '背景颜色' },
  { Choice: '.ql-image', title: '图像' },
  { Choice: '.ql-video', title: '视频' },
  { Choice: '.ql-link', title: '添加链接' },
  { Choice: '.ql-formula', title: '插入公式' },
  { Choice: '.ql-clean', title: '清除字体格式' },
  { Choice: '.ql-script[value="sub"]', title: '下标' },
  { Choice: '.ql-script[value="super"]', title: '上标' },
  { Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
  { Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
  { Choice: '.ql-header .ql-picker-label', title: '标题大小' },
  { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
  { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
  { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
  { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
  { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
  { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
  { Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
  { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
  { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
  { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
  { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
  { Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
]
export default {
  name: 'addarticle',
  components: {
    quillEditor
  },
  data () {
    return {
      formData: {
        content: '' // `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1>`
      },
      editorOption: {
        placeholder: '请在这里输入',
        theme: 'snow', //主题 snow/bubble
        modules: {
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          toolbar: {
            container: toolbarOptions,
            handlers: {
            }
          },
          // 图片拖拽上传
          imageDrop:true,
          // 放大缩小
          imageResize:{
            displaySize: true
          },
        }
      }
    }
  },
  mounted () {
    this.initTitle()
  },
  methods: {
    initTitle () {
      document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
      for (let item of titleConfig) {
        let tip = document.querySelector('.quill-editor ' + item.Choice)
        if (!tip) continue
        tip.setAttribute('title', item.title)
      }
    },

    // 失去焦点
    onEditorBlur (editor) { },

    // 获得焦点
    onEditorFocus (editor) {
    },

    // 开始
    onEditorReady (editor) { },
  }
}
</script>
<style>
  p {
    margin: 10px;
  }

  .edit_container,
  .quill-editor {
    height: 300px;
  }

  .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>

真上传

走接口，需要把图片传到服务器，然后在upload组件的成功回调中，把后端返回的url插入到富文本编辑器中

<template>
  <div>
    <div>
      <!--富文本编辑器组件-->
      <quill-editor
          v-model="formData.content"
          ref="QuillEditor"
          class="editor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)"
      >
      </quill-editor>

        // action自行更换成自己的上传地址
        // headers的token入股偶有的话也需要自己

      <el-upload
          class="quill-upload"
          action="http://localhost:9090/file/upload"
          :headers="{'token':getToken()}"
          :before-upload="beforeUpload"
          :on-success="quillSuccess"
          ref="upload"
      >
      </el-upload>
    </div>
  </div>
</template>
<script>
  import { quillEditor } from 'vue-quill-editor'
  import Delta from 'quill-delta'
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';
  import * as Quill from 'quill' //引入编辑器
  import { ImageDrop } from 'quill-image-drop-module';
  import ImageResize from "quill-image-resize-module";
  Quill.register("modules/imageResize", ImageResize);
  import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
  Quill.register('modules/ImageExtend', ImageExtend)
  Quill.register('modules/imageDrop', ImageDrop);

  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': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体
    [{ 'align': [] }],    // 居中
    ['clean'],            // 清除样式,
    ['link'],   // 上传图片、上传视频
    ['myButton'],
  ]

  // toolbar标题
  const titleConfig = [
    { Choice: '.ql-insertMetric', title: '跳转配置' },
    { Choice: '.ql-bold', title: '加粗' },
    { Choice: '.ql-italic', title: '斜体' },
    { Choice: '.ql-underline', title: '下划线' },
    { Choice: '.ql-header', title: '段落格式' },
    { Choice: '.ql-strike', title: '删除线' },
    { Choice: '.ql-blockquote', title: '块引用' },
    { Choice: '.ql-code', title: '插入代码' },
    { Choice: '.ql-code-block', title: '插入代码段' },
    { Choice: '.ql-font', title: '字体' },
    { Choice: '.ql-size', title: '字体大小' },
    { Choice: '.ql-list[value="ordered"]', title: '编号列表' },
    { Choice: '.ql-list[value="bullet"]', title: '项目列表' },
    { Choice: '.ql-direction', title: '文本方向' },
    { Choice: '.ql-header[value="1"]', title: 'h1' },
    { Choice: '.ql-header[value="2"]', title: 'h2' },
    { Choice: '.ql-align', title: '对齐方式' },
    { Choice: '.ql-color', title: '字体颜色' },
    { Choice: '.ql-background', title: '背景颜色' },
    { Choice: '.ql-image', title: '图像' },
    { Choice: '.ql-video', title: '视频' },
    { Choice: '.ql-link', title: '添加链接' },
    { Choice: '.ql-formula', title: '插入公式' },
    { Choice: '.ql-clean', title: '清除字体格式' },
    { Choice: '.ql-script[value="sub"]', title: '下标' },
    { Choice: '.ql-script[value="super"]', title: '上标' },
    { Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
    { Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
    { Choice: '.ql-header .ql-picker-label', title: '标题大小' },
    { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
    { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
    { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
    { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
    { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
    { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
    { Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
    { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
    { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
    { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
    { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
    { Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
    { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
    { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
    { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
  ]
  export default {
    name: 'addarticle',
    components: {
      quillEditor
    },
    data () {
      return {
        uploadUrl: 'http://localhost:9090/file/upload', // 上传的图片服务器地址
        headers: {
          Authorization: 'Bearer ' + this.getToken(),
        },
        formData: {
          content: '' // `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1>`
        },
        Quill: null,
        editorOption: {
          placeholder: '请在这里输入',
          theme: 'snow', //主题 snow/bubble
          modules: {
            history: {
              delay: 1000,
              maxStack: 50,
              userOnly: false
            },
            toolbar: {
              container: toolbarOptions,
              handlers: {
                myButton: this.showHandle,
              }
            },
            // 图片拖拽上传
            imageDrop:true,
            // 放大缩小
            imageResize:{
              displaySize: true
            },
          }
        }
      }
    },
    mounted () {
      this.initButton()
      this.initTitle()
    },
    methods: {
      getToken() {
        if (localStorage.getItem("userInfo")) {
          return JSON.parse(localStorage.getItem("userInfo")).token
        }
      },

      initTitle () {
        document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
        for (let item of titleConfig) {
          let tip = document.querySelector('.quill-editor ' + item.Choice)
          if (!tip) continue
          tip.setAttribute('title', item.title)
        }
      },

      showHandle () {
        // this.$message.success('这是自定义工具栏的方法！目前没有功能哦')
        // 获取到Quill实例
        this.Quill=this.$refs.QuillEditor.quill
        this.$refs.upload.$children[0].$refs.input.click()
      },

      // 自定义按钮内容初始化
      initButton () {
        const editorButton = document.querySelector('.ql-myButton')
        editorButton.innerHTML = '<i class="el-icon-picture" style="font-size: 18px;color:black"></i>'
      },

      // 失去焦点
      onEditorBlur (editor) { },

      // 获得焦点
      onEditorFocus (editor) {
      },

      // 开始
      onEditorReady (editor) { },

      beforeUpload(res, file) {
        console.log('HRichText upload before')
      },


      quillSuccess(res, file) {
        if (file.status === 'success') {
          // 获取光标所在位置
          let length = this.$refs.QuillEditor.quill.getSelection().index
          // 插入图片  res.url为服务器返回的图片地址
          this.Quill.insertEmbed(length, 'image', res)
          // 调整光标到最后
          this.$refs.QuillEditor.quill.setSelection(length + 1)
        } else {
          this.$message.error('图片插入失败')
        }
      },
    }
  }
</script>

<style>
p {
  margin: 10px;
}

.edit_container,
.quill-editor {
  height: 300px;
}

.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>
H30919
关注
封装一个富文本编辑器
Q905828的博客
06-30 227
1.在compontents文件夹下创建一个wangEditor文件夹 //compontents/wangEditor/index.vue <template> <div ref="editor"></div> </template> <script> import E from 'wangeditor'; export default { props: { value: { type: String,
Vue2 封装的 Quill 富文本编辑器组件 Vue-Quill-Editor
热门推荐
凡夫俗子
11-19 2万+
1、安装   npm install vue-quill-editor --save 2、使用 引入vue-quill-editor import { quillEditor } from 'vue-quill-editor' <quill-editor ref="myTextEditor" :content="content"//内容对应的字段
vue2使用富文本编辑器vue-quill-editor（自定义上传视频）
qq_63026743的博客
07-29 4866
1. 安装vue-quill-editor。6. 在vue.config.js文件中引入。2. 全局引入在main.js 中写入。4. 更改插入图片大小、 安装。5. main.js引入。7. 在页面中显示样式。
vue2 vue-quill-editor富文本域使用
最新发布
Intellectual__的博客
09-12 431
/ [{ 'size': ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小。['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线。[{'size': ['small', 'false', 'large', 'huge']}], // 字体大小。[{ script: 'sub' }, { script: 'super' }], // 上标/下标。
vue2 之 Vue-Quill-Editor富文本编辑器
玄鱼殇
02-26 927
vue2 之 Vue-Quill-Editor富文本编辑器
vue2中使用quill编辑器+表格功能
qq_41852789的博客
09-13 4140
注意：现在quill2才能支持表格功能，quill2官方未发布正式版本，现在是开发版本。
vue2使用富文本编辑器，quill进行全局封装
qq_52140056的博客
12-01 413
vue2使用富文本编辑器，quill进行全局封装
vue2使用富文本编辑器vue-quill-editor
lll11122222的博客
12-25 983
（对于新手来说，可能会有很多版本上的冲突，只需要在初始化后面加上–legacy-peer-deps就可以解决）建议将参数设置以及图片上传设置单独到一个js文件，然后再引入需要的组件中。（为什么要全局引入，是因为在单组件中引入的话需要调用vue（））因为它是作为组件存在，所以引入的时候也是需要按组件方式引入的。如果是单独成一个js文件的话，export就可以调用了。然后在调用组件的地方设置data()
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，...
基于Quill适用于Vue2的富文本编辑器
08-10
Quill是一款强大的开源富文本编辑器，它设计的目标是提供一个现代、可定制且与浏览器兼容的文本编辑体验。在JavaScript开发中，特别是在构建交互性强的Web应用时，富文本编辑器是不可或缺的组件之一。Quill以其简洁...
vue+elementUI+quill编辑器+135编辑器集成+秀米集成
01-08
`Quill`和`135`、`秀米`编辑器则是常用的富文本编辑器，用于在网页中创建和编辑内容。 首先，我们来安装和配置`Vue.js`项目。如果你还没有Vue项目，你需要使用`Vue CLI`（命令行工具）创建一个新的项目。运行以下...
微信小程序富文本编辑器封装版
05-23
本资源是微信小程序的富文本编辑器封装版，资源主要来源于官方文档，和几个富文本的源码，但是感觉用起来还是太不方便了，毕竟用的地方挺多的，还是封装起来比较好用。代码全部本人亲测可用的。注意基础库版本，我用的是2.10.2
Vue2Editor使用Vuejs20和Quilljs开发HTML编辑器
08-07
Vue2-Editor 使用Vue.js 2.0和Quilljs开发HTML编辑器
详解Vue基于vue-quill-editor富文本编辑器使用心得
10-17
vue-quill-editor是Quill编辑器的Vue封装版本，Quill是一款现代的、功能强大的、面向未来的富文本编辑器，支持跨浏览器操作。下面详细介绍vue-quill-editor在Vue项目中的集成与使用心得。 首先，要使用vue-quill-...
vue2 使用 vue-quill-editor富文本编辑器使用步骤
艾米的猫儿的博客
12-19 1056
有两种挂载方式： 全局挂载 和 在组件中挂载，根据自己的项目需求选择，一般用到富文本编辑都是在某一个项目中，这里只写在项目中挂载的方式。富文本里面的下拉框默认是不滚动的，想要滚动效果，加上下面的css。报错 在 vue.config.js 中配置。5.图片拖拽上传及调节大小。4.配置option。
在vue2项目中使用vue-quill-editor实现富文本编译器
团酱
11-16 5687
data中返回// 富文本编辑器配置["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线["blockquote", "code-block"], // 引用 代码块[{ header: 1 }, { header: 2 }], // 1、2 级标题[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表。
vue富文本编辑器 组件封装
UP
07-23 794
** Vue-Quill-Editor ** vue-quill-editor基本配置 > npm install vue-quill-editor -s main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css'
vue2-富文本组件封装
weixin_58008341的博客
01-19 654
【代码】vue2-富文本组件封装。
vue2 集成quill-editor，自定义插件开发
王也的博客
11-06 670
vue2集成quill-editor，自定义开发选人插件
vue2封装quill富文本
05-10
Vue2 封装 Quill 富文本编辑器可以让我们在 Vue2 项目中快速集成 Quill 富文本编辑器，并且方便地使用它的各种功能。下面是一个简单的 Vue2 封装 Quill 富文本编辑器的示例： 1. 安装 Quill ```bash npm install quill ``` 2. 封装 Quill 组件 ```vue <template> <div ref="editor"></div> </template> <script> import Quill from 'quill' export default { name: 'QuillEditor', props: { value: { type: String, default: '', }, options: { type: Object, default: () => ({}), }, }, data() { return { quill: null, } }, mounted() { this.initQuill() }, beforeDestroy() { this.quill.off('text-change') this.quill = null }, methods: { initQuill() { const { editor } = this.$refs const defaultOptions = { modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], [{ 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'], ], }, theme: 'snow', } const options = { ...defaultOptions, ...this.options } this.quill = new Quill(editor, options) this.quill.on('text-change', () => { this.$emit('input', this.quill.root.innerHTML) }) this.quill.root.innerHTML = this.value }, }, } </script> ``` 3. 在父组件中使用 ```vue <template> <div> <quill-editor v-model="content" :options="quillOptions" /> </div> </template> <script> import QuillEditor from './components/QuillEditor.vue' export default { name: 'App', components: { QuillEditor, }, data() { return { content: '', quillOptions: { placeholder: '请输入内容', }, } }, } </script> ``` 这样，我们就可以在 Vue2 项目中使用 Quill 富文本编辑器了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值