vue2+quill封装富文本编辑器

最新推荐文章于 2024-02-26 11:26:40 发布
最新推荐文章于 2024-02-26 11:26:40 发布
阅读量390 收藏 1
点赞数 3
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H30919/article/details/132167854
版权

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>
    <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
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 使用quill富文本编辑 增加表格功能
2号自信的博客
11-06 1万+
先看结果： 必要条件： 1.需要quill版本为2.0的开发版（发布正式版只有1.0的） 使用npm view quill查看版本，最新的dev版本为dev.4，官方文档好像是说按得dev.3 我直接按的dev.4：npm install quill@2.0.0-dev.4 --save 2.准备图标 参考文章：quill-editor 2.0 集成 vue - 简书 默认的只有一个图标...
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，...
vue2使用富文本编辑器，quill进行全局封装
qq_52140056的博客
12-01 275
vue2使用富文本编辑器，quill进行全局封装
vue2使用富文本编辑器vue-quill-editor
lll11122222的博客
12-25 836
（对于新手来说，可能会有很多版本上的冲突，只需要在初始化后面加上–legacy-peer-deps就可以解决）建议将参数设置以及图片上传设置单独到一个js文件，然后再引入需要的组件中。（为什么要全局引入，是因为在单组件中引入的话需要调用vue（））因为它是作为组件存在，所以引入的时候也是需要按组件方式引入的。如果是单独成一个js文件的话，export就可以调用了。然后在调用组件的地方设置data()
Vue2项目中使用wangeditor富文本编辑器
Mr_king_00的博客
10-15 4833
Vue2项目中使用wangeditor富文本编辑器
vue+elementUI+quill编辑器+135编辑器集成+秀米集成
01-08
`Quill`和`135`、`秀米`编辑器则是常用的富文本编辑器，用于在网页中创建和编辑内容。 首先，我们来安装和配置`Vue.js`项目。如果你还没有Vue项目，你需要使用`Vue CLI`（命令行工具）创建一个新的项目。运行以下...
vue-quill-editor富文本编辑器简单使用方法
10-17
Vue Quill Editor是一款基于Vue.js的富文本编辑器组件，它封装了著名的Quill编辑器，使得在Vue项目中集成富文本编辑功能变得更加便捷。在本文中，我们将深入探讨Vue Quill Editor的基本使用方法，包括安装、配置以及...
vue富文本编辑器组件vue-quill-edit使用教程
12-12
之前使用的富文本编辑器是uEditor,kindEditor，感觉不太方便。 近期项目vue单页面，就使用vue-quill-edit这个编辑器组件吧！ 一、安装 cnpm install vue-quill-editor 二、引入 在main.js引入并注册： import ...
基于Quill适用于Vue2的富文本编辑器
08-10
Quill是一款强大的开源富文本编辑器，它设计的目标是提供一个现代、可定制且与浏览器兼容的文本编辑体验。在JavaScript开发中，特别是在构建交互性强的Web应用时，富文本编辑器是不可或缺的组件之一。Quill以其简洁...
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用，支持单个或多个图片点击、粘贴、拖拽上传，Vue3.X项目也可直接使用
都随它大小便吧
09-02 6963
一直想要一个神奇多功能的富文本编辑器，经同事介绍这个 WangEditor 富文本编辑器，发现挺好用的。于是自行封装一下，这样在复用组件时，可以少写一些代码，直接组件引用即可。
Quill编辑器内置样式配置
马超不会铁骑
11-09 2326
import Quill from 'quill'; // 对齐方式 let Parchment = Quill.import('parchment'); let options = { scope: Parchment.Scope.BLOCK, whitelist: ['left', 'center', 'right'], }; let AlignStyle = new Parchment.Attributor.Style('align', 'text-align',options); .
vue2 之 Vue-Quill-Editor富文本编辑器
最新发布
玄鱼殇
02-26 757
vue2 之 Vue-Quill-Editor富文本编辑器
Vue2Editor 富文本 （基础）
qq_60658827的博客
07-05 1235
【代码】Vue2Editor 富文本 （基础）
vue2+vue-quill-editor富文本的使用心得
zwjl1017的博客
02-27 557
富文本的运用
vue2+vue-quill-editor富文本域
weixin_43443341的博客
05-24 366
vue+vue-quill-editor实现富文本域功能
富文本编辑器Quill 介绍及在Vue中的使用方法
热门推荐
小张Python
05-06 1万+
在Web开发中，富文本编辑器是不可或缺的一个功能组件，掌握少量基础语法就能让一篇文章实现较为不错的排版效果，即见即所得。 目前市场上已提供大量集成富文本编辑器的包，Quill 作为其中一个，以简单、易上手特点，成为目前富文本编辑器常用选择之一。与其他富文本相比，Quill 提供了大量内置API接口，为用户根据自己需求对富文本编辑扩展性开发，例如用户交互，添加幻灯片、3D模型组件等。 本篇文章将介绍 Quill 的两种使用方式： 1，Quill 在纯 HTML 页面中的使用； 2，Quill 集成在 Vue
【Vue】vue2预览显示quill富文本内容，vue-quill-editor回显页面，v-html回显富文本内容
qq_51055690的博客
08-24 6586
vue富文本编辑器vue-quill-editor的内容的渲染
quill-editor扩展的正确姿势
qq_15054679的博客
05-26 3788
一、无关的插曲 曾几何时，风云万里，万海桑田。耕耘于代码堆里多年。做过android移动端，做过web端，做过java后端和.net，也做过python数据分析。但真正扩展源码的亦有亦无。如今更趋向与智能化，重复的机器可代替，如此节约时间甚好。我们努力前行，我们都在路上，我们有自己的最求和向往，但任凭达到何等境地，都无法避免的一个，那就是终结陨落。所以在陨落之前，有的人擅长了独门绝技，有的人擅长多种技术柔和。反正天外有天，人外有人。兴趣决定了我们的高度。敲代码，是最穷的，但敲代码是最有创意的，如此甚好！ 二
vue2封装quill富文本
05-10
Vue2 封装 Quill 富文本编辑器可以让我们在 Vue2 项目中快速集成 Quill 富文本编辑器，并且方便地使用它的各种功能。下面是一个简单的 Vue2 封装 Quill 富文本编辑器的示例： 1. 安装 Quill ```bash npm install ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值