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

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

安装插件

npm i wangeditor --save// oryarn 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' style='text-align: center; max-width: 100%;'></p>`;});}};</script>

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