vue-quill-editor 使用

最新推荐文章于 2024-04-29 10:23:29 发布
最新推荐文章于 2024-04-29 10:23:29 发布
阅读量187 收藏
点赞数
分类专栏： # vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43861630/article/details/134531005
版权

vue-quill-editor

安装

npm install vue-quill-editor -S

使用

.....
    <quill-editor
        style="padding-left: 0;padding-top: .0px;margin-top: 30px;"
        ref="editorRef" 
        v-model="params.content" class="ql-editor" 
        :options="editorOption"
        @blur="onEditorBlur($event)" 
        @focus="onEditorFocus($event)" 
        @change="onEditorChange($event)" 
      />
......

import { quillEditor } from 'vue-quill-editor'
// 上传至oss
import { uploadOss } from '@/api/uploadOss'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];

......
components: {
    quillEditor
  },
data(){
return{
	editorOption: {
	        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: sizes }], // 字体大小
	              [{ header: [1, 2, 3, 4, 5, 6,false] }], // 标题
	              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
	              // [{ font: ['songti'] }], // 字体种类
	              [{ align: [] }], // 对齐方式
	              ['clean'], // 清除文本格式
	              ['image', 'video'] // 链接、图片、视频
	            ],
	            handlers: {
	              image: this.imageUploadOss
	            }
	          },
	        placeholder: '请输入正文'
	      },
}
}
....
methods:{
// 失去焦点事件
    onEditorBlur(quill) {
    },
    // 获得焦点事件
    onEditorFocus(quill) {
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      this.params.content = html
    },
}

图片拖拽及图片缩放

安装

npm i quill-image-drop-module -S
npm i quill-image-resize-module -S

使用

1. 新增样式文件.css

目录： assets/styles/quillEditor.css

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑体";
  font-family: "SimHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷体";
  font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
  content: "Arial";
  font-family: "Arial";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
  content: "Times New Roman";
  font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
  content: "sans-serif";
  font-family: "sans-serif";
}

.ql-font-SimSun {
  font-family: "SimSun";
}

.ql-font-SimHei {
  font-family: "SimHei";
}

.ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}

.ql-font-KaiTi {
  font-family: "KaiTi";
}

.ql-font-FangSong {
  font-family: "FangSong";
}

.ql-font-Arial {
  font-family: "Arial";
}

.ql-font-Times-New-Roman {
  font-family: "Times New Roman";
}

.ql-font-sans-serif {
  font-family: "sans-serif";
}

/* 字号设置 */
/* 默认字号 */
.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="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
  font-size: 14px;
}

.ql-size-14px {
  font-size: 14px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
  font-size: 16px;
}

.ql-size-16px {
  font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px";
  font-size: 18px;
}

.ql-size-18px {
  font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
  font-size: 20px;
}

.ql-size-20px {
  font-size: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
  content: "22px";
  font-size: 22px;
}

.ql-size-22px {
  font-size: 22px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
  content: "26px";
  font-size: 26px;
}

.ql-size-26px {
  font-size: 26px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
  content: "28px";
  font-size: 28px;
}

.ql-size-28px {
  font-size: 28px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
  content: "30px";
  font-size: 30px;
}

.ql-size-30px {
  font-size: 30px;
}
2.配置及使用
// vue.config.js 中增加
const webpack = require('webpack');
new webpack.ProvidePlugin({
	'window.Quill': 'quill/dist/quill.js',
   'Quill': 'quill/dist/quill.js'
 })

// 新建的css文件的保存位置，如不同，需要修改
import "@/assets/styles/quillEditor.css";
import imageResize  from 'quill-image-resize-module'
Quill.register('modules/imageResize', imageResize )
import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop)

// 调整字体大小选项
var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
Quill.register(Size, true)

// toobar同级增加,如下图
imageDrop: true, // 拖动加载图片组件。
imageResize: { //调整大小组件。
    displayStyles: {
        backgroundColor: 'black',
        border: 'none',
        color: 'white'
    },
    modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
}

在这里插入图片描述

视图效果

在这里插入图片描述

完整代码

<template>
  <div class="app-container" style="min-height: calc(100vh - 50px);">
    <el-tabs v-model="params.type" @tab-click="tabClick">
      <el-tab-pane label="医院简介" name="BRIEF" />
      <el-tab-pane label="楼宇分布" name="BUILDING" />
      <el-tab-pane label="科室分布" name="DEPARTMENT" />
    </el-tabs>
    <div style="position: relative;margin-top: 10px;">
      <span style="display: block;position: absolute;top: 10px;padding-left: 18px;box-sizing: border-box;">
       <a style="font-size: 40px;color: red;position: absolute;left: 0;top: -5px;">*</a>介绍内容
      </span>
    </div>
    <quill-editor
        style="padding-left: 0;padding-top: .0px;margin-top: 30px;"
        ref="editorRef" 
        v-model="params.content" class="ql-editor" 
        :options="editorOption"
        @blur="onEditorBlur($event)" 
        @focus="onEditorFocus($event)" 
        @change="onEditorChange($event)" 
      />
      <div style="width: 100%;text-align: center;">
        <el-button style="width: 100px;" icon="el-icon-delete"  @click="() => params.content = ''">清空</el-button>
        <el-button style="width: 100px;" icon="el-icon-tickets" :loading="loading" type="primary" @click="saveContent()"
        v-if="checkPer(['admin', 'unicameral:introduce:edit'])" 
        >保存</el-button>
      </div>
  </div>
</template>
  
<script>
import { Notification, Loading } from 'element-ui'
import { quillEditor } from 'vue-quill-editor'
import { uploadOss } from '@/api/uploadOss'
import * as introduceService from '@/api/unicameral/introduceService'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 新建的css文件的保存位置，如不同，需要修改
import "@/assets/styles/quillEditor.css";
import imageResize  from 'quill-image-resize-module'
Quill.register('modules/imageResize', imageResize )
import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop)

var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
Quill.register(Size, true)

export default {
  name: 'UnicameralIntroduce',
  components: {
    quillEditor
  },
  data() {
    return {
      params: {
        hosId: '',
        type: 'BRIEF',
        content: ''
      },
      loading: false,
      editorOption: {
        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: sizes }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6,false] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              // [{ font: ['songti'] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ['clean'], // 清除文本格式
              ['image', 'video'] // 链接、图片、视频
            ],
            handlers: {
              image: this.imageUploadOss
            }
          },
          imageDrop: true, // 拖动加载图片组件。
          imageResize: { //调整大小组件。
              displayStyles: {
                  backgroundColor: 'black',
                  border: 'none',
                  color: 'white'
              },
              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
          }
        },
        placeholder: '请输入正文'
      },
    }
  },
  mounted() {
    this.getContent()
  },
  methods: {
    tabClick() {
      // 清空内容
      this.params.content = ''
      this.getContent()
    },
    // 失去焦点事件
    onEditorBlur(quill) {
    },
    // 获得焦点事件
    onEditorFocus(quill) {
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      this.params.content = html
    },
    getContent() {
      const options = {
            fullscreen: false,
            target: document.querySelector('.platform-wrap')
        }
      const loadingInstance = Loading.service(options)
      this.params.content = ""
      introduceService.getIntroduce(this.params).then(res => {
        if(res.status == '200'){
          this.params.content = res.result
        }
      }).finally(() => loadingInstance.close())
    },
    saveContent() {
      this.loading = true;
      introduceService.saveIntroduce(this.params).then(res => {
        if(res.status == '200'){
          Notification.success('操作成功')
        }else {
          Notification.error('操作成功')
        }
      }).finally(() => this.loading = false)
    },
    imageUploadOss() {
      const { quill } = this.$refs.editorRef
      let fileInput = quill.container.querySelector('input.ql-image[type=file]')
      if (fileInput === null) {
        fileInput = document.createElement('input')
        fileInput.setAttribute('type', 'file')
        // 设置图片参数名
        fileInput.setAttribute('name', 'file')
        // 可设置上传图片的格式
        fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon')
        fileInput.classList.add('ql-image')
        // 监听选择文件
        fileInput.addEventListener('change', function() {
          const formData = new FormData()
          formData.append('file', fileInput.files[0])
          formData.append('imageUrl', 'hos/unicameral-introduce/')
          uploadOss(formData).then(res => {
            if (res.status === '200') {
              const length = quill.getSelection(true).index
              quill.insertEmbed(length, 'image', process.env.VUE_APP_DOMAIN_STATIC + res.result)
              quill.setSelection(length + 1)
            }
          }).catch(err => {
            console.log(err)
            Notification.error('图片上传失败')
          })
        })
      }
      fileInput.click()
    },
    imageUpload() {
      // var self = this
      const { quill } = this.$refs.editorRef
      let fileInput = quill.container.querySelector('input.ql-image[type=file]')
      if (fileInput === null) {
        fileInput = document.createElement('input')
        fileInput.setAttribute('type', 'file')
        // 设置图片参数名
        fileInput.setAttribute('name', 'file')
        // 可设置上传图片的格式
        fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon')
        fileInput.classList.add('ql-image')
        // 监听选择文件
        fileInput.addEventListener('change', () => {
          const formData = new FormData()
          formData.append('file', fileInput.files[0])
          // let length = self.quill.getSelection(true).index;
          // quill.insertEmbed(length, 'image', data.data.data.url);
          // quill.insertEmbed(length, 'title', data.data.data.fileName);
          // quill.setSelection(length + 1)
        })
        quill.container.appendChild(fileInput)
      }
      fileInput.click()
    }
  }
}
</script>
<style scoped lang="scss">
.codeJs {
  font-size: 11pt;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}
::v-deep .el-tabs {
    margin-bottom: 0px;
}
// ::v-deep .ql-editor{
// height:260px;
// }
</style>
<style>
.CodeMirror-hints{
  z-index: 8888!important;
}
</style>
离别又见离别
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
vue-quill-editor 使用-图片上传
csdn姚宏波
04-24 4099
vue 项目开发中，文本编辑器的选择很多，一些熟悉的文本编辑器都可以使用，如UEditor、wangEditor，这里介绍基于 vue 的一个文本编辑器插件 vue-quill-editor 此插件基于 quill，所以使用 cdn 节点方式引用时，还需要引用 quill.js 使用 npm 安装时，只需要安装 vue-quill-editor即可，因为会自动下载依赖 npm inst...
vue-quill-editor富文本编辑器使用步骤
热门推荐
qq_44782585的博客
03-18 5万+
vue-quill-editor的安装和配置，实现工具栏自定义数据格式，以及鼠标经过提示中文释义
vue-quill-editor使用
jiangjiang_ing的博客
06-08 717
<template> <quill-editor v-model="form.content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFoc...
vue-quill-editor的使用
weixin_55510188的博客
02-15 1771
1、安装vue-quill-editor模块：$nmp installvue-quill-editor --save 2、安装quill-image-extend-module模块（可选，用于将图片上传到服务器）：$nmpinstallquill-image-extend-module --save 3、自定义中文样式（可选），src/assets/css/global.css: /* 富文本编辑器 */ .editor { line-height: normal !important; }...
详解vue中使用vue-quill-editor富文本小结（图片上传）
12-11
vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html...
Vue-Quill-Editor富文本编辑器的使用教程
12-29
本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图：    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor...
vue-quill-editor 自定义图片上传至OSS -> 相关文件
06-18
import {policy} from './policy' import {getUUID} from '@/utils' 后台代码
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 642
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
Niucode的博客
04-26 269
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 290
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 359
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 506
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
xu_duo_i的博客
04-25 402
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
党务学习|基于SprinBoot+vue的大学生党务学习平台(源码+数据库+文档)
伟庭的博客
04-27 711
大学生党务学习平台管理系统按照操作主体分为管理员和用户。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。大学生党务学习平台管理系统可以提高大学生党务学习平台信息管理问题的解决效率，优化大学生党务学习平台信息处理流程，保证大学生党务学习平台信息数据的安全，它是一个非常可靠，非常安全的应用程序。大学生党务学习平台管理系统；入党申请,党课Mysql数据库；Java语言。
vue 快速入门 系列 —— 玩转 CMS
最新发布
ZL4120505的博客
04-29 704
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
el-tree 或 el-tree-select 根据条件，控制节点的显示隐藏
IT_dabai的博客
04-25 304
要求el-tree-select 的节点根据节点数据状态来进行显示隐藏（状态字段为status，显示：‘1’，隐藏：‘0’）

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值