前端如何使用vue-quill-editor富文本编辑器

最新推荐文章于 2024-09-08 03:09:32 发布
最新推荐文章于 2024-09-08 03:09:32 发布
阅读量708 收藏
点赞数 6
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mrjieq/article/details/134439936
版权

一、安装

npm install vue-quill-editor -S

二、引入到项目中

import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
    components: {
	quillEditor
    }
}

三、设置富文本中字体大小

1、找到 node_modules 里的 quill/dist/quill.js

2、在文件中搜索 small，快速找到，然后修改成你想要的数据

var SizeClass = new _parchment2.default.Attributor.Class('size', 'ql-size', {
          scope: _parchment2.default.Scope.INLINE,
          // whitelist: ['small', 'large', 'huge']
          whitelist: ['12','14','16','18','20','22','24','28','32','36']
        });
        var SizeStyle = new _parchment2.default.Attributor.Style('size', 'font-size', {
          scope: _parchment2.default.Scope.INLINE,
          // whitelist: ['10px', '18px', '32px']
          whitelist: ['12px','14px','16px','18px','20px','22px','24px','28px','32px','36px']
        });

3、在同级目录下找到 quill.snow.css 文件

/*这个是字号数字对应的显示的内容，vertical-align根据个人需要加不加，因为我页面那个字与其他对不齐*/
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
  content: '12px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
  content: '14px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
  content: '16px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
  content: '18px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
  content: '20px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
  content: '22px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
  content: '24px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
  content: '28px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
  content: '32px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
  content: '36px';
  vertical-align: top;
}



/*这个是字号数字对应的px值*/
.ql-editor .ql-size-12 {
  font-size: 12px;
}
.ql-editor .ql-size-14 {
  font-size: 14px;
}
.ql-editor .ql-size-16 {
  font-size: 16px;
}
.ql-editor .ql-size-18 {
  font-size: 18px;
}
.ql-editor .ql-size-20 {
  font-size: 20px;
}
.ql-editor .ql-size-22 {
  font-size: 22px;
}
.ql-editor .ql-size-24 {
  font-size: 24px;
}
.ql-editor .ql-size-28 {
  font-size: 28px;
}
.ql-editor .ql-size-32 {
  font-size: 32px;
}
.ql-editor .ql-size-36 {
  font-size: 36px;
}

/*选择字号富文本字的大小*/
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
  font-size: 12px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
  font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
  font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
  font-size: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
  font-size: 22px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
  font-size: 24px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
  font-size: 28px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
  font-size: 32px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
  font-size: 36px;
}
/*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
  height: 125px;
  overflow: auto;
}

四、如何配置富文本组件

<quill-editor
     v-model="dataList.detail"
     ref="myQuillEditor"
     :options="editorOption" <!-富文本编辑->
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
      @ready="onEditorReady($event)"
      style="height: 250px;">
  </quill-editor>

1、在项目‘export default’上方配置富文本工具栏

let toolbarOptions = [
  ['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'] // 链接、图片、视频
]

2、配置富文本工具栏

// 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: {
            // 工具栏
            container: toolbarOptions,//上方配置的悬停
            handlers: {
              'image': function (value) {
                if (value) {
                  // upload点击上传事件
                  document.querySelector('.avatar-uploader input').click()//".avatar-uploader"上传组件class；.avatar-uploader{display: none;}
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        },
        placeholder: '请输入正文'
      },

3、配置富文本悬停提示

//vue生命周期，页面渲染完成
  mounted: function(){
    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: '两端对齐' }
    ]
    for (let item of titleConfig) {
      let tip = document.querySelector('.ql-formats' + item.Choice)
      if (!tip) continue
      tip.setAttribute('title', item.title)
      console.log(item.title)
    }
  },

五、上传图片

1、element组件进入项目在quill-editor上方

<el-upload
    class="avatar-uploader"
    action="/api/ysapi/v1/files/uploadArch?archtype=11"
    name="file"
    :headers="headers"
    :show-file-list="false"
    :on-success="uploadSuccess"
    :on-error="uploadError">
</el-upload>

2、el-upload 属性方法

//上传图片时请求头 
headers:{'Authorization':'Basic eXN3ZWI6M0xTS3B6NUIxNDRUejN6cnk4Y3pMazFFSkFPVzl0Ymc=',
        'Blade-Auth': getToken()
      },
//上传成功时返回
uploadSuccess(res) {
      const host = window.location.host
      console.log("'"+"http://"+host+"/files/"+res.msg+"'")
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length,'image',"http://"+host+"/files/"+res.msg)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        // 提示信息，需引入Message
        console.log('图片插入失败')
      }
    },
//上传失败时返回
 uploadError(res){
      console.log(res.result)
    },

 

本人只是为了以后再遇到类似的问题方便寻找才总结的这篇文档，其中参考了一些博主的文档，如果侵犯了某些博主，请联系我下架。目的只是为了方便寻找。

帅逼王二狗
关注
前端实现富文本编辑器功能
10-19
前端使用wangEditor插件实现富文本编辑器功能，简单方便，容易上手。
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，...
vue富文本编辑器
weixin_46176363的博客
04-02 1540
// // 富文本元素 // private editor={} // // 编辑器调用 // private editorInit() { // this.editor = new E(’#editor’); // // 自定义菜单配置 // (this.editor as any).config.menus = [ // ‘head’, // ‘image’ // ]; // // 开启debug模式 // (this.editor as any).config.
vue项目中，在线编辑器vue-codemirror、ace、和monaco的使用及踩坑记录
最新发布
m0_71775808的博客
09-08 1609
vue2版本不支持最新的vue-codemirror，所以要下载固定的版本4.0.6，并且要搭配codemirror使用，codemirror也不建议使用6以上的版本。由于第一次使用代码编辑器插件，之前都没接触过，花了几天时间才做出来满意的，参考了好几个大佬的文章，大家有需要可以自行查找相关文章！在要展示codemirror的页面，导入以下文件，包括有语言文件JavaScript，主体样式eclipse，和代码折叠所需的文件fold/xxx。代码：参考的一个大佬的，但是文章被关掉了，大家可以自己去找找。
vue前端项目富文本应用
xiatianit的博客
01-15 3602
quill
Vue-Quill-Editor富文本编辑器的使用教程
12-29
本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图：    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor...
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
07-01
vue富文本编辑器vue-quill-editor.js ...vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 https://blog.csdn.net/cplvfx/article/details/125557966
vue3.0 vue-quill-editor.rar
09-19
Vue-Quill-Editor是一款基于Quill的 Vue.js 富文本编辑器组件，提供了丰富的文本格式化选项，如字体、字号、颜色、列表等，同时支持图片和视频的插入。在Vue3.0环境下使用Vue-Quill-Editor，需要确保组件与新版本的...
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
10-15
主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...
Vue+富文本编辑器
10-16
富文本编辑器，由于现在官网不在做更新，开发者也不容易找到，为了开发者能够找得到该富文本编辑器~
vuejs使用wangeditor富文本编辑器组件
weixin_45849330的博客
09-17 443
<template lang="html"> <div class="editor"> <div ref="toolbar" class="toolbar"> </div> <div ref="editor" class="wang-text"> </div> </div> </template> <script> import E from 'wange
vue-富文本编辑器
weixin_58978252的博客
06-02 501
简易的富文本编辑器
[web]前端富文本编辑器
YJH000_的博客
06-28 2108
在实际应用时，例如发布文章，需要对输入的内容进行编排，例如调整字号、字体、颜色，添加表格、列表等等，就出现了许多第三方的自定义控件，这些能够现实图文混排的就称之为“富文本编辑器”。由于富文本编辑器是通过多层实现的显示效果，在界面中，如果有其它弹出层的设计，可能会出现“遮挡”的问题！这2种标签，这些标签都只能输入纯文本，不可以对输入的内容进行编排！至此，富文本编辑器就可以显示在页面上了！接下来，就可以可以调用富文本编辑器变量的。在HTML中，用于输入文本的只是。
在前端网页中加入富文本编辑器
weixin_44151292的博客
04-19 5324
UEditor Docshttp://fex.baidu.com/ueditor/这是UEditor官方网站，网站里有使用教程。 1、先把富文本编辑器的压缩包下载到本地，在我发布的资源里下载(不要积分) 解压之后主要是这个东西 2、把这个解压文件拖动到eclipse的项目里，拖进来之后有报错，别着急问题不大 我放在了：WebContent/resource/utf8-jsp 3、这些配置语句的路径要写自己的文件放置的路径 ...
前端富文本编辑器 vue-html5-editor
weixin_33924770的博客
10-31 686
1..项目创建与初始化 在安装好脚手架的依赖后，要执行 npm install vue-html5-editor -S 来安装这个富文本插件，由于这个富文本插件的图标是依赖font-awesome.css的，所以要cnpm install font-awesome --save安装这个css然后在main.js中引入这个css import 'font-awesome/css/font-aw...
vue-quill-editor富文本编辑器使用步骤
10-18
好的，关于vue-quill-editor富文本编辑器的使用步骤，可以按照以下步骤进行： 1. 安装vue-quill-editor ``` npm install vue-quill-editor --save ``` 2. 在需要使用的组件中引入vue-quill-editor ``` import ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值