vue集成一个支持图片缩放拖拽的富文本编辑器

需求:

根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽、缩放、改变图片大小。尝试多个第三方富文本编辑器,很难找到一个完美符合自己要求的编辑器。经过多次尝试,最终选择了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: String, default: "" }

},

data() {

return {

// 编辑器实例

editor: null,

// 富文本菜单选项配置

menuItem: [

"head",

"bold",

"fontSize",

"fontName",

"italic",

"underline",

"indent",

"lineHeight",

"foreColor",

"backColor",

"link",

"list",

"justify",

"image",

"video"

]

};

},

watch: {

// 监听默认值

defaultText(nv, ov) {

if (nv != "") {

this.editor.txt.html(nv);

this.$emit("update:rich-text", nv);

}

}

},

mounted() {

this.initEditor();

},

methods: {

// 初始化编辑器

initEditor() {

// 获取编辑器dom节点

const editor = new WE("#w_view");

// 配置编辑器

editor.config.showLinkImg = false; /* 隐藏插入网络图片的功能 */

editor.config.onchangeTimeout = 400; /* 配置触发 onchange 的时间频率,默认为 200ms */

editor.config.uploadImgMaxLength = 1; /* 限制一次最多能传几张图片 */

// editor.config.showFullScreen = false; /* 配置全屏功能按钮是否展示 */

editor.config.menus = [...this.menuItem]; /* 自定义系统菜单 */

// editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* 限制图片大小 */;

editor.config.customAlert = err => {

Message.error(err);

};

// 监控变化,同步更新数据

editor.config.onchange = newHtml => {

// 异步更新组件富文本值的变化

this.$emit("update:rich-text", newHtml);

};

// 自定义上传图片

editor.config.customUploadImg = (resultFiles, insertImgFn) => {

/**

* resultFiles:图片上传文件流

* insertImgFn:插入图片到富文本

* 返回结果为生成的图片URL地址

* */

// 此方法为自己封赚改写的阿里云图片OSS直传插件。

this.$oss(resultFiles[0], resultFiles[0]["name"]).then(url => {

!!url && insertImgFn(url); /* oss图片上传,将图片插入到编辑器中 */

});

};

// 创建编辑器

editor.create();

this.editor = editor;

}

},

beforeDestroy() {

// 销毁编辑器

this.editor.destroy();

this.editor = null;

}

};

</script>

注: 具体参数配置请参考编辑器文档使用说明。

组件中使用抽离的编辑器:

<template>

<div class="editor">

<el-card shadow="never">

<div slot="header" class="clearfix">

<span>富文本编辑器</span>

</div>

<div class="card_center">

<WEditor :defaultText="defaultText" :richText.sync="richText" />

</div>

</el-card>

</div>

</template>

<script>

// 引入封装好的编辑器

import WEditor from "@/components/WEditor";

export default {

name: "Editor",

components: { WEditor },

data() {

return {

// 默认值

defaultText: "",

// 富文本更新的值

richText: ""

};

},

created() {

// 等待组件加载完毕赋值

this.$nextTick(() => {

this.defaultText = `<p style="text-align: center; "><img src="https://tr-mba.oss-cn-beijing.aliyuncs.com/picture/202010/20_222430_8011.png" width="30%" style="text-align: center; max-width: 100%;"></p>`;

});

}

};

</script>

以上就是vue集成一个支持图片缩放拖拽的富文本编辑器的详细内容,更多关于vue 富文本编辑器的资料请关注其它相关文章!

以上是 vue集成一个支持图片缩放拖拽的富文本编辑器 的全部内容, 来源链接: utcz.com/p/238884.html

回到顶部