vue集成一个支持图片缩放拖拽的富文本编辑器
需求：
根据业务要求，需要能够上传图片，且上传的图片能在移动端中占满屏幕宽度，故需要能等比缩放上传的图片，还需要能拖拽、缩放、改变图片大小。尝试多个第三方富文本编辑器，很难找到一个完美符合自己要求的编辑器。经过多次尝试，最终选择了wangEditor富文本编辑器。 最初使用的是vue2Editor富文本编辑器，vue2Editor本身是不支持图片拖拽的，但是提供了可配置图片拖拽的方法，需要借助Quill.js来实现图片拖拽。虽然满足了业务需求，但是在移动端展示的效果不是很理想。 此次编辑器主要是上传的富文本需要在移动端进行展示，为了达到理想效果，需要能修改图片百分比，当设置img标签的width属性为100% 时，就可以满足需求。最近发新版本（第四版 v4）的wangEditor可以满足需求，最终选择了它用于实际开发中。
效果图：
代码案例及相关配置如下：
安装插件
1 2 3 | npm i wangeditor --save// oryarn add wangeditor |
编辑器配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | <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> |
注： 具体参数配置请参考编辑器文档使用说明。
组件中使用抽离的编辑器：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <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集成一个支持图片缩放拖拽的富文本编辑器的详细内容