WangEditor富文本编辑器图片拖放

最新推荐文章于 2024-08-14 15:16:27 发布

置顶

「已注销」

最新推荐文章于 2024-08-14 15:16:27 发布

阅读量2.7k

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/SK_21/article/details/109225566

版权

本文介绍了如何使用wangEditor富文本编辑器实现图片100%宽屏显示并支持拖拽功能。针对移动端展示的需求，通过调整图片width属性至100%，确保在不同设备上填充屏幕。作者比较了vue2Editor和wangEditor，最终选择wangEditor进行实际开发。

摘要由CSDN通过智能技术生成

富文本编辑器（图片可以100%宽屏）

业务需求：

根据业务要求，需要能够上传图片，且上传的图片能在移动端中占满屏幕宽度，故需要能等比缩放上传的图片，还需要能拖拽、缩放、改变图片大小。尝试多个第三方富文本编辑器，很难找到一个完美符合自己要求的编辑器。经过多次尝试，最终选择了wangEditor富文本编辑器。
最初使用的是vue2Editor富文本编辑器，vue2Editor本身是不支持图片拖拽的，但是提供了可配置图片拖拽的方法，需要借助Quill.js来实现图片拖拽。虽然满足了业务需求，但是在移动端展示的效果不是很理想。
此次编辑器主要是上传的富文本需要在移动端进行展示，为了达到理想效果，需要能修改图片百分比，当设置img标签的width属性为 100% 时，就可以满足需求。最近发新版本（第四版 v4）的wangEditor可以满足需求，最终选择了它用于实际开发中。

效果图：

在这里插入图片描述

代码案例及相关配置如下：

安装插件

npm i wangeditor --save
// or
yarn add wangeditor

编辑器配置

<template>
	<div class="w_editor">
		<!-- 富文本编辑器 -->
		<div id="w_view"></div>
	</div>
</template>

<script>
// 引入富文本
import WE from "wangeditor";
// 引入elementUI Message模块（用于提示信息）
import {
    Message } from "element-ui";

export default {
   
	name: "WEditor",
	props: {
   
		// 默认值
		defaultText: {
    type: String, default: "" },
		// 富文本更新的值
		richText: {
    type