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

文章主要介绍了vue集成一个支持图片缩放拖拽的富文本编辑器，帮助大家更好的理解和使用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;
   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) => {
    
    // 此方法为自己封赚改写的阿里云图片OSS直传插件。
    this.$oss(resultFiles[0], resultFiles[0]["name"]).then(url => {
     !!url && insertImgFn(url);
    });
   };
   // 创建编辑器
   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://www.guangfuqiang.com/file/upload/202203/31/094151481.pngwidth="30%" style="text-align: center; max-width: 100%;"></p>`;
  });
 }
};
</script>

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

来源：脚本之家

链接：https://www.jb51.net/article/205012.htm