• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
方的豆豆 显示全部楼层 发表于 2021-10-25 19:53:24 |阅读模式 打印 上一主题 下一主题
需求:


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


代码案例及干系配置如下:


安装插件
  1. npm i wangeditor --save
  2. // or
  3. yarn add wangeditor
复制代码
编辑器配置
  1. <template>
  2.         <div class="w_editor">
  3.                 <!-- 富文本编辑器 -->
  4.                 <div id="w_view"></div>
  5.         </div>
  6. </template>
  7. <script>
  8. // 引入富文本
  9. import WE from "wangeditor";
  10. // 引入elementUI Message模块(用于提示信息)
  11. import { Message } from "element-ui";
  12. export default {
  13.         name: "WEditor",
  14.         props: {
  15.                 // 默认值
  16.                 defaultText: { type: String, default: "" },
  17.                 // 富文本更新的值
  18.                 richText: { type: String, default: "" }
  19.         },
  20.         data() {
  21.                 return {
  22.                         // 编辑器实例
  23.                         editor: null,
  24.                         // 富文本菜单选项配置
  25.                         menuItem: [
  26.                                 "head",
  27.                                 "bold",
  28.                                 "fontSize",
  29.                                 "fontName",
  30.                                 "italic",
  31.                                 "underline",
  32.                                 "indent",
  33.                                 "lineHeight",
  34.                                 "foreColor",
  35.                                 "backColor",
  36.                                 "link",
  37.                                 "list",
  38.                                 "justify",
  39.                                 "image",
  40.                                 "video"
  41.                         ]
  42.                 };
  43.         },
  44.         watch: {
  45.                 // 监听默认值
  46.                 defaultText(nv, ov) {
  47.                         if (nv != "") {
  48.                                 this.editor.txt.html(nv);
  49.                                 this.$emit("update:rich-text", nv);
  50.                         }
  51.                 }
  52.         },
  53.         mounted() {
  54.                 this.initEditor();
  55.         },
  56.         methods: {
  57.                 // 初始化编辑器
  58.                 initEditor() {
  59.                         // 获取编辑器dom节点
  60.                         const editor = new WE("#w_view");
  61.                         // 配置编辑器
  62.                         editor.config.showLinkImg = false; /* 隐藏插入网络图片的功能 */
  63.                         editor.config.onchangeTimeout = 400; /* 配置触发 onchange 的时间频率,默认为 200ms */
  64.                         editor.config.uploadImgMaxLength = 1; /* 限制一次最多能传几张图片 */
  65.                         // editor.config.showFullScreen = false; /* 配置全屏功能按钮是否展示 */
  66.                         editor.config.menus = [...this.menuItem]; /* 自定义系统菜单 */
  67.                         // editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* 限制图片大小 */;
  68.                         editor.config.customAlert = err => {
  69.                                 Message.error(err);
  70.                         };
  71.                         // 监控变化,同步更新数据
  72.                         editor.config.onchange = newHtml => {
  73.                                 // 异步更新组件富文本值的变化
  74.                                 this.$emit("update:rich-text", newHtml);
  75.                         };
  76.                         // 自定义上传图片
  77.                         editor.config.customUploadImg = (resultFiles, insertImgFn) => {
  78.                                 /**
  79.                                  * resultFiles:图片上传文件流
  80.                                  * insertImgFn:插入图片到富文本
  81.                                  * 返回结果为生成的图片URL地址
  82.                                  * */
  83.                                 // 此方法为自己封赚改写的阿里云图片OSS直传插件。
  84.                                 this.$oss(resultFiles[0], resultFiles[0]["name"]).then(url => {
  85.                                         !!url && insertImgFn(url); /* oss图片上传,将图片插入到编辑器中 */
  86.                                 });
  87.                         };
  88.                         // 创建编辑器
  89.                         editor.create();
  90.                         this.editor = editor;
  91.                 }
  92.         },
  93.         beforeDestroy() {
  94.                 // 销毁编辑器
  95.                 this.editor.destroy();
  96.                 this.editor = null;
  97.         }
  98. };
  99. </script>
复制代码
注: 详细参数配置请参考编辑器文档利用阐明。
组件中利用抽离的编辑器:
  1. <template>
  2.         <div class="editor">
  3.                 <el-card shadow="never">
  4.                         <div slot="header" class="clearfix">
  5.                                 <span>富文本编辑器</span>
  6.                         </div>
  7.                         <div class="card_center">
  8.                                 <WEditor :defaultText="defaultText" :richText.sync="richText" />
  9.                         </div>
  10.                 </el-card>
  11.         </div>
  12. </template>
  13. <script>
  14. // 引入封装好的编辑器
  15. import WEditor from "@/components/WEditor";
  16. export default {
  17.         name: "Editor",
  18.         components: { WEditor },
  19.         data() {
  20.                 return {
  21.                         // 默认值
  22.                         defaultText: "",
  23.                         // 富文本更新的值
  24.                         richText: ""
  25.                 };
  26.         },
  27.         created() {
  28.                 // 等待组件加载完毕赋值
  29.                 this.$nextTick(() => {
  30.                         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>`;
  31.                 });
  32.         }
  33. };
  34. </script>
复制代码
以上就是vue集成一个支持图片缩放拖拽的富文本编辑器的详细内容,更多关于vue 富文本编辑器的资料请关注脚本之家别的干系文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作