在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】

news2024/11/20 19:37:38

Quill 官网:https://quilljs.com//

一、Quill的安装与使用(初级)

1、下载安装

npm install vue-quill-editor --save

        这里建议使用管理员命令窗口的形式,找到自己的项目,如下图所示。然后进行安装(目的:避免权限不足导致的下载失败)

在这里插入图片描述

2、挂载(局部挂载)

        在某个vue页面中引入,。不进行全局引入。我这里采用的是部分页面引入的形式

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' //引入插件

export default {
  components: {
    quillEditor
  }

       提示:如果想要全局引入、就在main.js中引入就行。(如果极个别页面使用的情况下,直接在单独页面引入就可以了)

import VueQuillEditor from 'vue-quill-editor'
// 引入相关css
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor);

3、模块使用(quill富文本编辑器)

// html文件
<quill-editor
        class="ql-editor"
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)" 
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
</quill-editor>
 
// 插件引入
import { quillEditor } from 'vue-quill-editor'
-------------------------------------------
components: {
	quillEditor
},
 
// 事件方法
onEditorBlur(e){
  console.log(e, '失去焦点事件');
},
onEditorFocus(e){
  console.log(e, '获得焦点事件');
},
onEditorChange(e){
  console.log(e, '内容改变事件');
},

 
// 富文本功能配置
editorOption:{
  modules:{
    toolbar:[
        ['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','video']    //上传图片、上传视频
        ]
      }
},

实战案例代码(如果看上边的实在不知道放置的位置,就看一下下方的例子。这个案例,可以跳过)

<template>
  <div class="myMain">
    <div>
      <div class="table-title">公告信息</div>
    </div>
    <div class="row">
      <div style="margin-top: 20px">
        <div style="border: 1px solid #c9c9c9">
          <div class="panel-heading">公告信息表</div>
          <div class="panel-body">
            <div style="width: 100%">
              <div class="nx-table-header" style="">
                <div style="float: left; margin-bottom: 10px">
                  <el-button
                    type="primary"
                    size="small"
                    round
                    @click="addNewTypeInfo()"
                    >添加</el-button
                  >
                </div>
                <div
                  style="float: left; margin-bottom: 10px; margin-left: 10px"
                ></div>
              </div>
              <div>
                <!--    ====================================添加公告信息====================================-->
                <el-dialog
                  title="添加公告信息"
                  :visible.sync="adddialogVisible"
                  width="40%"
                  @close="closeDialog"
                >
                  <hr />
                  <div style="height: 425px; overflow: auto">
                    <quill-editor
                      ref="myQuillEditor"
                      v-model="content"
                      :options="editorOption"
                      @blur="onEditorBlur($event)"
                      @focus="onEditorFocus($event)"
                      @change="onEditorChange($event)"
                      style="height: 400px"
                    />
                  </div>

                  <hr />
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="adddialogVisible = false"
                      >取 消</el-button
                    >
                    <el-button
                      type="primary"
                      round
                      @click="submitForm('TypeInfoForm')"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
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";


export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      content: "<h2>I am Example</h2>",
      editorOption: {
        modules: {
          toolbar: [
            ["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", "video"], //上传图片、上传视频
          ],
          },
        },
      },
      adddialogVisible: false,
    };
  },
  methods: {
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    onEditorReady(quill) {
      console.log("editor ready!", quill);
    },
    onEditorChange({ quill, html, text }) {
      console.log("editor change!", quill, html, text);
      this.content = html;
    },

    //添加公告信息窗口
    addNewTypeInfo() {
      this.adddialogVisible = true;
    },
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  created() {
    this.showAllUserInfo();
  },
};
</script>

4、实际效果展示

      工具栏中的工具可以使用,图片上传也可以使用,不过上传的图片大小不能改变。向下方图片所示,图片太大了。
在这里插入图片描述

二、图片缩放(进阶)

      vue-quill-editor的两个插件:quill-image-drop-modulequill-image-resize-module 可以帮助实现上传图片的缩放和拖拽功能。

1、下载安装

npm install quill-image-drop-module -S    //允许粘贴图像并将其拖放到编辑器中。
npm install quill-image-resize-module -S  //允许调整图像大小

2、修改配置

2.1 vue2中配置文件修改

build/webpack.base.conf.js添加, 然后配置下面的代码:

  • 1、const webpack = require('webpack')

  • 2、在js规则中添加exclude

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
    ]
  }

3、插件设置

plugins: [
    new webpack.ProvidePlugin({
      'window.Quill': 'quill'
    })
  ],

具体位置如下图所示,

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2 vue3中配置文件修改

// vue cli3.0用法
chainWebpack: (config) => {
    config.plugin('provide').use(webpack.ProvidePlugin,[{
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
    }])
}

3、js引入增加新的引入

// imageResize  首字母必须小写否则会报错,错误语如下
// quill Cannot import ImageResize. Are you sure it was registered?
import imageResize  from 'quill-image-resize-module'
Quill.register('modules/imageResize', imageResize )
import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop)

在这里插入图片描述

4、修改editorOption里面配置

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

在这里插入图片描述

5、效果展示

在这里插入图片描述
在这里插入图片描述

三、后语

       可以上传视频、可以将上传的图片上传到服务器等等。有需要会进一步探讨,目前需要做的就是收集这些数据,然后放入数据库存储。

资料参考:https://www.cnblogs.com/meiyanstar/p/12909755.html

资料参考:图片缩放

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/542507.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RBTree改造,并模拟实现setmap

目录 RBTree改造 给红黑树增加迭代器 前置 前置-- RBT细节改造 模拟set 模拟map RBTree改造 给红黑树增加迭代器 前置 前置的作用是找下一个较大的节点。 假如我们it指向的是5&#xff0c;it则是将it指向6。加入it指向的是7&#xff0c;则it则是将it指向8。 也就是说…

三十八、流控效果、

1、流控效果 流控效果是指请求达到流控阈值时应该采取的措施&#xff0c;包括三种&#xff1a; 快速失败&#xff1a;达到阈值后&#xff0c;新的请求会被立即拒绝并抛出FlowException异常。是默认的处理方式。 warm up&#xff1a;预热模式&#xff0c;对超出阈值的请求同样是…

chatgpt赋能Python-python3m

Python 3: 一个新时代的编程语言 在编程的世界里&#xff0c;Python 3可能是当前最为热门的编程语言。Python 3是Python语言的最新版本&#xff0c;代码更加现代化&#xff0c;更加简洁易懂&#xff0c;比Python 2更加易于使用。这篇文章将介绍Python 3的各种特性&#xff0c;…

Git回滚详解

文章目录 git restore撤销工作区文件更改撤销暂存区文件更改 git checkoutgit revert冲突解决具体操作 git resetreset 的作用第 1 步&#xff1a;移动 HEAD&#xff08;--soft&#xff09;第 2 步&#xff1a;更新暂存区&#xff08;--mixed&#xff09;第 3 步&#xff1a;更…

如何写好英文论文中的句子?(下)

1 前情提要 大家先看完上一篇文章如何写好英文论文中的句子&#xff1f;&#xff08;上&#xff09;&#xff0c;再接着往下翻。 10 先说名词&#xff0c;再用代词&#xff08;it、they&#xff09;指代该名词 11 否定词放在句子开头附近 12 否定词的正确位置&#xff1a;助动…

消息通知之系统层事件发布相关流程

前言 Openharmony 3.1Release中存在消息通知的处理&#xff0c;消息通知包括系统层事件发布、消息订阅、消息投递与处理&#xff0c;为了开发者能够熟悉消息的处理流程&#xff0c;本篇文章主要介绍系统层事件发布的相关流程。 整体流程 代码流程 发布消息 { eventAction)w…

自定义颜色编辑选取对话框

一、简介 Qt中已经有一些封装好的对话框&#xff0c;比如QMessageBox、QColorDialog等&#xff0c;使用起来快捷方便&#xff0c;但缺点是我们无法为它们自定义样式&#xff0c;所以可能难以“融入”我们的项目。既然如此&#xff0c;那就自己做一个把。抱着这样的想法&#x…

Android SELinux安全机制与权限管理那些事

文章目录 前言权限管理系统应用特权应用历史漏洞广播的保护机制CVE-2020-0391 SELinux 前言 在 Android 漏洞挖掘和安全研究过程中&#xff0c;不可避免地会涉及到跟 Android SELinux 安全机制打交道&#xff0c;比如当你手握一个 System 应用的路径穿越的漏洞的时候想去覆写其…

DS:基于鸢尾花数据集利用多种数据降维技术(PCA、SVD、MDS、LDA、T-SNE)实现三维可视化

DS&#xff1a;基于鸢尾花数据集利用多种数据降维技术(PCA、SVD、MDS、LDA、T-SNE)实现三维可视化 目录 基于鸢尾花数据集利用多种数据降维技术(PCA、SVD、MDS、LDA、T-SNE)实现三维可视化 # 1、加载示例数据集&#xff08;鸢尾花数据集&#xff09; # 2、数据预处理 # T1、…

媒体专访是品牌初创阶段宣传的重要手段

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 很早以前&#xff0c;有位前辈跟我讲&#xff0c;人的成功分两种&#xff0c;一种是借助平台成功&#xff0c;一种是自己创业成功&#xff0c; 前者成功的概率很大&#xff0c;只需要选好…

【5.18】二、黑盒测试方法—因果图与决策表法

目录 2.3 因果图与决策表法 2.3.1 因果图设计法 2.3.2 决策表 2.3.3 实例&#xff1a;三角形决策表 2.3.4 实例&#xff1a;工资发放决策表 2.3 因果图与决策表法 等价类划分法与边界值分析法主要侧重于输入条件&#xff0c;却没有考虑这些输入之间的关系&#xff0c;如…

单链表和双向链表如何执行删除操作

在实际的软件开发中&#xff0c;从链表中删除一个数据无外乎这两种情况&#xff1a; 删除结点中“值等于某个给定值”的结点&#xff1b;删除给定指针指向的结点。 1.从头结点开始一个一个依次遍历对比&#xff0c;直到找到值等于给定值的结点&#xff0c;然后再通过我前面讲…

LeetCode高频算法刷题记录4

文章目录 1. 二叉树的最近公共祖先【中等】1.1 题目描述1.2 解题思路1.3 代码实现 2. 全排列【中等】2.1 题目描述2.2 解题思路2.3 代码实现 3. 相交链表【简单】3.1 题目描述3.2 解题思路3.3 代码实现 4. 合并 K 个升序链表【困难】4.1 题目描述4.2 解题思路4.3 代码实现 5. 环…

chatgpt赋能Python-python3_4怎么下载

Python3.4的下载和安装 Python是一种流行的编程语言&#xff0c;它被广泛用于算法学习、数据分析和网站开发等领域。Python3.4是Python编程语言的一个版本&#xff0c;它在性能和功能方面都得到了改进。如果你希望学习Python3.4或者使用它开发项目&#xff0c;那么你需要下载并…

Jetpack Compose中的附带效应简介及使用

前言 附带效应是指LaunchedEffect、DisposableEffect、rememberCoroutineScope、rememberUpdatedState、produceState 、derivedStateOf的使用。附带效应这4个字在google官方文档上的表达与解释挺让人难以理解的。其实个人认为准确的描述应该是外部产生的数据向Compose状态作用…

chatgpt赋能Python-python3_8_1怎么用

Python3.8.1使用指南&#xff1a;让您的编程更加高效 Python是一种流行的高级编程语言&#xff0c;它以简洁明了的语法和丰富的库而著称。如果您是一名新手或有经验的程序员&#xff0c;Python都是一个很好的选择。在Python3.8.1中&#xff0c;新的功能和改进将进一步提高Pyth…

chatgpt赋能Python-python2的n次方程序

Python2的N次方程序&#xff1a;一个实用的编程工具 Python2是广泛使用的编程语言之一&#xff0c;它是一种强大且灵活的开源语言&#xff0c;被广泛应用于科学计算、数据分析、Web开发等领域。在Python2中&#xff0c;N次方程序是一种非常基础的程序&#xff0c;但是它在实际…

二叉树的基本认识(一)

要了解二叉树&#xff0c;就必然要知道什么是树&#xff0c;树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的…

C++类模板的具体化

目录 分类 代码 分析 一、类模板 一&#xff09;代码 二&#xff09;注意事项 三&#xff09;运行结果 二、完全具体化的模板类 一&#xff09;代码 二&#xff09;注意事项 三&#xff09;执行结果 三、部分具体化的模板类 一&#xff09;代码 二&#xff09;注…

【研发工具】Yapi接口管理平台内网Centos8下搭建

1 环境依赖安装 环境要求 nodejs&#xff08;7.6) &#xff08;本文安装12.18.3&#xff09; mongodb&#xff08;2.6&#xff09;&#xff08;本文安装5.0.17&#xff09; 1.1 安装Nodejs 1.1.1 下载安装包 下载地址&#xff1a;https://nodejs.org/zh-cn/download/这里下载…