若依框架前后分离版本富文本增加图片上传及移动和放大缩小

最新推荐文章于 2024-03-27 21:59:51 发布
最新推荐文章于 2024-03-27 21:59:51 发布
阅读量2.3k 收藏 8
点赞数 2
文章标签： webpack javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lpping90/article/details/130886738
版权

1，vue.config.js里增加

在上面增加
const webpack = require('webpack')

在下面增加
config.plugin('provide').use(webpack.ProvidePlugin, [{
      // 'window.Quill': 'quill'
      'window.Quill': 'quill'
    }])

 

2，安装引用包

npm install quill-image-drop-module --save
npm i quill-image-resize-module --save 
npm install quill-image-extend-module --save
npm install jquery --save-dev

 3，在Ediotr/index.vue里增加引用

import $ from 'jquery';

import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop);
import { ImageExtend } from 'quill-image-extend-module'
// quill-image-resize-module该插件是用于控制上传的图片的大小
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageExtend);
Quill.register('modules/imageResize', ImageResize);

 4，modules下增加代码

imageDrop: true,
//图片拖拽
imageResize:{
  // 图片缩放比例
  displayStyles:{
     backgroundColor:'black',
     border:'none',
     color:'white'
  },
  modules:[
    'Resize',
    'DisplaySize',
    'Toolbar'
  ]
},

 

配置到这可以进行图片的放大及缩小了，后面配置监听黏贴事件

5，修改div  editor代码，增加监听事件及监听方法

<div class="editor" ref="editor" :style="styles" @paste="handlePaste($event)" ></div>


handlePaste(evt) {
      let that = this
      if (evt.clipboardData &&
        evt.clipboardData.files &&
        evt.clipboardData.files.length) {
        evt.preventDefault();
        [].forEach.call(evt.clipboardData.files, (file) => {
          if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
            return;
          }
          const formData = new FormData();
          formData.append("file", file);//后台上传接口的参数名
          // 实现上传
          $.ajax({
            type: "post",
            url: process.env.VUE_APP_BASE_API +'/common/upload', // 上传的图片服务器地址
            data: formData,
            headers:{'Authorization': "Bearer " + getToken()},//必须
            dataType: "json",
            processData: false,
            contentType: false,//设置文件上传的type值，必须
            success: (response) => {
              if (response.code == 200 || response.code == 0) {
                //当编辑器中没有输入文本时，这里获取到的 range 为 null
                // 获取富文本组件实例
                let quill = that.Quill;
                var range = quill.selection.savedRange;
                //图片插入在富文本中的位置
                var index = 0;
                if (range == null) {
                  index = 0;
                } else {
                  index = range.index;
                }
                //将图片链接插入到当前的富文本当中
                quill.insertEmbed(index, "image", response.url);
                // 调整光标到最后
                quill.setSelection(index + 1); //光标后移一位
              }
            },
            error: function () {
              this.$message.error('上传失败！')
            },
          });
        });
      }
    },

 

 至此调整完毕。

附完整代码：

        

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      name="file"
      :show-file-list="false"
      :headers="headers"
      style="display: none"

      ref="upload"
      v-if="this.uploadUrl"
    >
    </el-upload>
    <div class="editor" ref="editor" :style="styles" @paste="handlePaste($event)" ></div>
  </div>
</template>

<script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getToken } from "@/utils/auth";

import $ from 'jquery';

import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop);
import { ImageExtend } from 'quill-image-extend-module'
// quill-image-resize-module该插件是用于控制上传的图片的大小
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageExtend);
Quill.register('modules/imageResize', ImageResize);

export default {
  name: "Editor",
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    /* 高度 */
    height: {
      type: Number,
      default: null,
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: null,
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false,
    },
    /* 上传地址 */
    uploadUrl: {
      type: String,
      default: "",
    }
  },
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken()
      },
      Quill: null,
      currentValue: "",
      options: {
        theme: "snow",
        bounds: document.body,
        debug: "warn",
        modules: {
          imageDrop: true,
          //图片拖拽
          imageResize:{
            // 图片缩放比例
            displayStyles:{
              backgroundColor:'black',
              border:'none',
              color:'white'
            },
            modules:[
              'Resize',
              'DisplaySize',
              'Toolbar'
            ]
          },
          // Resize 允许缩放， DisplaySize 缩放时显示像素 Toolbar 显示工具栏},
          // 工具栏配置
          toolbar: [
            ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"],                    // 引用  代码块
            [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
            [{ indent: "-1" }, { indent: "+1" }],            // 缩进
            [{ size: ["small", false, "large", "huge"] }],   // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
            [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
            [{ align: [] }],                                 // 对齐方式
            ["clean"],                                       // 清除文本格式
            ["link", "image"]                                // 链接、图片
          ],
        },
        placeholder: "请输入内容",
        readOnly: this.readOnly,
      },
    };
  },
  computed: {
    styles() {
      let style = {};
      if (this.minHeight) {
        style.minHeight = `${this.minHeight}px`;
      }
      if (this.height) {
        style.height = `${this.height}px`;
      }
      return style;
    },
  },
  watch: {
    value: {
      handler(val) {
        if (val !== this.currentValue) {
          this.currentValue = val === null ? "" : val;
          if (this.Quill) {
            this.Quill.pasteHTML(this.currentValue);
          }
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.Quill = null;
  },
  methods: {
    init() {
      const editor = this.$refs.editor;
      this.Quill = new Quill(editor, this.options);
      // 如果设置了上传地址则自定义图片上传事件
      if (this.uploadUrl) {
        debugger
        let toolbar = this.Quill.getModule("toolbar");
        toolbar.addHandler("image", (value) => {
          this.uploadType = "image";
          if (value) {
            this.$refs.upload.$children[0].$refs.input.click();
          } else {
            this.quill.format("image", false);
          }
        });
        toolbar.addHandler("video", (value) => {
          this.uploadType = "video";
          if (value) {
            this.$refs.upload.$children[0].$refs.input.click();
          } else {
            this.quill.format("video", false);
          }
        });
      }
      this.Quill.pasteHTML(this.currentValue);
      this.Quill.on("text-change", (delta, oldDelta, source) => {
        const html = this.$refs.editor.children[0].innerHTML;
        const text = this.Quill.getText();
        const quill = this.Quill;
        this.currentValue = html;
        this.$emit("input", html);
        this.$emit("on-change", { html, text, quill });
      });
      this.Quill.on("text-change", (delta, oldDelta, source) => {
        this.$emit("on-text-change", delta, oldDelta, source);
      });
      this.Quill.on("selection-change", (range, oldRange, source) => {
        this.$emit("on-selection-change", range, oldRange, source);
      });
      this.Quill.on("editor-change", (eventName, ...args) => {
        this.$emit("on-editor-change", eventName, ...args);
      });
    },
    handleUploadSuccess(res, file) {
      // 获取富文本组件实例
      let quill = this.Quill;
      // 如果上传成功
      if (res.code == 200 || res.code == 0) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.url为服务器返回的图片地址
        quill.insertEmbed(length, "image", res.url);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
    },
    handleUploadError() {
      this.$message.error("图片插入失败");
    },
    handlePaste(evt) {
      let that = this
      if (evt.clipboardData &&
        evt.clipboardData.files &&
        evt.clipboardData.files.length) {
        evt.preventDefault();
        [].forEach.call(evt.clipboardData.files, (file) => {
          if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
            return;
          }
          const formData = new FormData();
          formData.append("file", file);//后台上传接口的参数名
          // 实现上传
          $.ajax({
            type: "post",
            url: process.env.VUE_APP_BASE_API +'/common/upload', // 上传的图片服务器地址
            data: formData,
            headers:{'Authorization': "Bearer " + getToken()},//必须
            dataType: "json",
            processData: false,
            contentType: false,//设置文件上传的type值，必须
            success: (response) => {
              if (response.code == 200 || response.code == 0) {
                //当编辑器中没有输入文本时，这里获取到的 range 为 null
                // 获取富文本组件实例
                let quill = that.Quill;
                var range = quill.selection.savedRange;
                //图片插入在富文本中的位置
                var index = 0;
                if (range == null) {
                  index = 0;
                } else {
                  index = range.index;
                }
                //将图片链接插入到当前的富文本当中
                quill.insertEmbed(index, "image", response.url);
                // 调整光标到最后
                quill.setSelection(index + 1); //光标后移一位
              }
            },
            error: function () {
              this.$message.error('上传失败！')
            },
          });
        });
      }
    },
  },
};
</script>

<style>
.editor, .ql-toolbar {
  white-space: pre-wrap !important;
  line-height: normal !important;
}
.quill-img {
  display: none;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

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

lpping90
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Ruoyi框架学习--上传和下载
qq_39367410的博客
09-13 1万+
1、前端就是给了个按钮，点一下就开始文件上传了。2、然后开始上传走到后端来，运行核心方法：com.ruoyi.web.controller.system.SysProfileController3、其中牵扯到一个重要的文件上传方法：com.ruoyi.common.utils.file.FileUploadUtils下的。
vue插件之vue-quill-editor、quill-image-resize-module、quill-image-drop-module 引用报错
qq_39637445的博客
12-20 5797
vue-quill-editor、quill-image-resize-module、quill-image-drop-module 引用报错
若依前后端分离版本使用tinymce富文本编辑器
qq_53825610的博客
12-12 1581
若依前后端分离版本使用tinymce富文本编辑器。使用及问题解决
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
12-18
将Ueditor集成到YII框架中后，参照editor_config.js中的toolbars中的内容，更改options中标签可以给编辑器添加想要的功能： 因此要想添加文件和图片上传功能，应该加入以下两个标签： 文本编辑器中便出现了对应的两个选项： 但是点击上传图片按钮后发现，无法正常进行图片上传，文件上传也是失败的，问题都是Flash Player需要升级， 因此在火狐浏览器中安装对应的flash player组件，选择其中一个工作： 此时，文件上传和图片上传功能就能正常使用了： 上传路径的设置： 1. 需要将ueditor/ueditor1_2_2_0/文件夹下的PHP文件夹
Ruoyi框架上传文件
m0_55049655的博客
02-28 913
axios+json 默认情况下，axios将JavaScript对象序列化为JSON。what about?
quill-image-resize-module:Quill富文本编辑器的模块，允许调整图像大小
05-08
笔管ImageResize模块 Quill富文本编辑器的模块，允许调整图像大小。 另请参阅 ，该模块可为Quill启用复制粘贴和拖放功能。 演示版 用法 Webpack / ES6 import Quill from 'quill' ; import { ImageResize } from 'quill-image-resize-module' ; Quill . register ( 'modules/imageResize' , ImageResize ) ; const quill = new Quill ( editor , { // ... modules : { // ... imageResize : { // See optional "config" below } }
若依框架(RuoYi)系列视频教程 RuoYi-Vue前后端分离版本 118集
06-10
├──01 项目概述.mp4 82.26M ├──02 项目运行.mp4 54.43M ├──03 构建发布到Linux.mp4 41.68M ├──04 系统菜单介绍.mp4 64.41M ├──05 开发环境运行.mp4 34.77M ├──06 表结构介绍.mp4 76.26M ├──07 目录文件介绍.mp4 65.53M ├──08 主配置文件介绍.mp4 69.64M ├──09 Spring Boot 简介.mp4 32.75M ├──10 Spring Security 简介.mp4 18.37M ├──100 主子表代码生成详解.mp4 32.85M ├──101 3.4.0版本更新介绍.mp4 122.82M ├──102 使用undertow容器.mp4 23.32M ├──103 实现优雅关闭应用.mp4 13.40M ├──104 实现swagger文档增强.mp4 14.83M ├──105 实现excel表格增强.mp4 45.81M ├──106 实现mybatis增强.mp4 67.43M ├──107 实现离线IP地址定位.mp4 35.40M
使用富文本编辑器上传图片实例详解
10-20
主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下
4.若依框架上传文件
qq_27860623的博客
08-24 3633
若依框架上传文件。
Vue Element UI 之富文本插件实现图片调整大小（quill-image-resize-module）、图片粘贴（quill-image-drop-module）
倚树探星的博客
03-19 5540
quill-image-drop-module：允许粘贴图像并将其拖放到编辑器 quill-image-resize-module：允许调整图像大小 环境：vue cli3 第一次写这个功能，出现了一些意想不到的报错 Cannot read property 'imports' of undefined Cannot read property 'register' of undefined...
若依框架图片上传、富文本框编辑器功能
someday____的博客
11-22 9961
现在的需求是：实现一个项目展示模块，后端管理页面除了需要基础信息外，要加上一个图片上传和富文本框编辑器功能。 点击”图片存储地址”：可上传电脑任何位置的图片，并可对图片进行放大，缩小，和旋转。 存入数据库的图片以url地址存放 url直接百度可看到图片：
quill-image-drop-module 实现富文本内调整图片大小，去掉放缩时的对齐方式设置。
是秃子总会发光
03-02 1425
quill-image-drop-module 实现富文本内调整图片大小
若依框架文件上传
yhengf_520的专栏
04-26 1万+
前端： 采用el-upload上传，通过回调on-change方法中上传： <el-upload ref="uploadRef" action="" accept=".xlsx, .xls" :auto-upload="false" :on-change="handleChange" :show-file...
若依分离版本+SqlServer版本数据库
04-29
1、若依分离版本代码 2、数据由mysql变更为SqlServer 3、包含SqlServer数据库备份 4、下载用idea直接打开 5、启动方式和若依本身的启动顺序一样
JAVA著名免费框架若依前后端分离项目详细部署文档
08-21
第一部分：部署linux + nginx 第二部分：部署Windows+tomcat 第三部分：调用第三方api的跨域问题处理。 以及常见的部署后页面显示404 的问题处理。 （ruoyi平台简介： 若依是一套全部开源的快速开发平台，毫无保留给个人及企业免费使用。 前端采用Vue、Element UI。 后端采用Spring Boot、Spring Security、Redis & Jwt。 权限认证使用Jwt，支持多终端认证系统。 支持加载动态权限菜单，多方式轻松权限控制。 高效率开发，使用代码生成器可以一键生成前后端代码。）
基于Java网月科技公司门户网站设计实现(源码+lw+部署文档+讲解等)
热门推荐
java李阳勇的博客
09-21 3万+
随着信息技术在管理上越来越深入而广泛的应用，管理信息系统的实施在技术上已逐步成熟。本文介绍了网月科技公司门户网站的开发全过程。通过分析高校学生综合素质评价管理方面的不足，创建了一个计算机管理网月科技公司门户网站的方案。文章介绍了网月科技公司门户网站的系统分析部分，包括可行性分析等，系统设计部分主要介绍了系统功能设计和数据库设计。本网月科技公司门户网站管理员和用户。
若依前后端分离发布富文本框内容 以及uni-app微信小程序展示富文本框内容
最新发布
I_JAVA_U的博客
03-27 162
原文地址;
若依框架富文本框的实现
xyhxuyonghao的博客
10-06 2053
若依框架富文本框的实现
基于若依框架（RuoYi-master）实现的的文件上传功能
fuzhijieabc的博客
08-06 2万+
官网文档 注：在开发时，发现官方文档【上传下载】功能编写的不太准确，因而在此写篇文章以防日后以及看到的小伙伴们踩坑 具体步骤如下： 1、首先创建一张上传文件的表，例如： drop table if exists sys_file_info; create table sys_file_info ( file_id int(11) not null auto_increment comment '文件id', file_name var
html富文本设置只读
01-20
可以通过设置HTML元素的`contenteditable`属性来实现将富文本设置为只读。将`contenteditable`属性设置为`false`即可禁止用户对富文本进行编辑。 以下是一个示例代码： ```html <div contenteditable="false"> <!-- 在这里插入富文本内容 --> </div> ``` 在上述代码中，将`contenteditable`属性设置为`false`的`<div>`元素将变为只读状态，用户将无法编辑其中的富文本内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值