备案控制台
开发者社区 云计算 文章 正文

wangEditor 富文本详解（中）

2024-05-20 33
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： wangEditor 富文本详解（中）

wangEditor 富文本详解（上）https://developer.aliyun.com/article/1513305?spm=a2c6h.13148508.setting.32.f8774f0euyBLtl

3. 菜单配置

各个菜单项的详细配置。

3.1 通用方法

要配置哪个菜单，首先要知道这个菜单的 key 。执行 editor.getAllMenuKeys() 可获取编辑器所有菜单，从中找到自己想要的菜单 key 即可。

const handleCreated = (editor) => {
  const result = editor.getAllMenuKeys();
  console.log(result);
};

找到菜单 key 之后，可以先看看菜单的当前配置，再自行修改。

const handleCreated = (editor) => {
  const result = editor.getMenuConfig("uploadImage"); // 获取 uploadImage 的当前配置
  console.log(result);
};

3.2 颜色

<script setup lang="ts">
  import { ref } from "vue";
  import Rich from "@/components/Rich.vue";
 
  let richHtml = ref("");
  let editorConfig = ref({
    MENU_CONF: {
      color: {
        colors: ["#000", "#333", "#666"],
      },
    },
  });
</script>
 
<template>
  <div class="page-rich">
    <Rich v-model="richHtml" :editorConfig="editorConfig" />
  </div>
</template>

3.3 字号

<script setup lang="ts">
  import { ref } from "vue";
  import Rich from "@/components/Rich.vue";
 
  let richHtml = ref("");
  let editorConfig = ref({
    MENU_CONF: {
      fontSize: {
        fontSizeList: [
          // 元素支持两种形式
          //   1. 字符串；
          //   2. { name: 'xxx', value: 'xxx' }
 
          "12px",
          "16px",
          { name: "24px", value: "24px" },
          "40px",
        ],
      },
    },
  });
</script>
 
<template>
  <div class="page-rich">
    <Rich v-model="richHtml" :editorConfig="editorConfig" />
  </div>
</template>

3.4 字体

<script setup lang="ts">
  import { ref } from "vue";
  import Rich from "@/components/Rich.vue";
 
  let richHtml = ref("");
  let editorConfig = ref({
    MENU_CONF: {
      fontFamily: {
        fontFamilyList: [
          // 元素支持两种形式
          //   1. 字符串；
          //   2. { name: 'xxx', value: 'xxx' }
 
          "黑体",
          "楷体",
          { name: "仿宋", value: "仿宋" },
          "Arial",
          "Tahoma",
          "Verdana",
        ],
      },
    },
  });
</script>
 
<template>
  <div class="page-rich">
    <Rich v-model="richHtml" :editorConfig="editorConfig" />
  </div>
</template>

3.5 行高

<script setup lang="ts">
  import { ref } from "vue";
  import Rich from "@/components/Rich.vue";
 
  let richHtml = ref("");
  let editorConfig = ref({
    MENU_CONF: {
      lineHeight: {
        lineHeightList: ["1", "1.5", "2", "2.5"],
      },
    },
  });
</script>
 
<template>
  <div class="page-rich">
    <Rich v-model="richHtml" :editorConfig="editorConfig" />
  </div>
</template>

3.6 表情

<script setup lang="ts">
  import { ref } from "vue";
  import Rich from "@/components/Rich.vue";
 
  let richHtml = ref("");
  let editorConfig = ref({
    MENU_CONF: {
      emotion: {
        emotions: "😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉".split(" "),
      },
    },
  });
</script>
 
<template>
  <div class="page-rich">
    <Rich v-model="richHtml" :editorConfig="editorConfig" />
  </div>
</template>

3.7 链接

checkLink 校验链接、parseLinkUrl 转换链接 url

<script setup lang="ts">
  import { ref } from "vue";
  import Rich from "@/components/Rich.vue";
 
  let richHtml = ref("");
 
  // 自定义校验链接
  const customCheckLinkFn = (text, url) => {
    if (!url) {
      return;
    }
    if (url.indexOf("http") !== 0) {
      return "链接必须以 http/https 开头";
    }
    return true;
 
    // 返回值有三种选择：
    // 1. 返回 true ，说明检查通过，编辑器将正常插入链接
    // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）
    // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
  };
 
  // 自定义转换链接 url
  const customParseLinkUrl = (url) => {
    if (url.indexOf("http") !== 0) {
      return `http://${url}`;
    }
    return url;
  };
 
  let editorConfig = ref({
    MENU_CONF: {
      insertLink: {
        checkLink: customCheckLinkFn, // 也支持 async 函数
        parseLinkUrl: customParseLinkUrl, // 也支持 async 函数
      },
    },
  });
</script>
 
<template>
  <div class="page-rich">
    <Rich v-model="richHtml" :editorConfig="editorConfig" />
  </div>
</template>

3.8 图片

<script setup lang="ts">
  import { ref } from "vue";
  import Rich from "@/components/Rich.vue";
 
  let richHtml = ref("");
 
  // 自定义校验图片
  const customCheckImageFn = (src, alt, url) => {
    if (!src) {
      return;
    }
    if (src.indexOf("http") !== 0) {
      return "图片网址必须以 http/https 开头";
    }
    return true;
 
    // 返回值有三种选择：
    // 1. 返回 true ，说明检查通过，编辑器将正常插入图片
    // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）
    // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
  };
 
  // 转换图片链接
  const customParseImageSrc = (src) => {
    if (src.indexOf("http") !== 0) {
      return `http://${src}`;
    }
    return src;
  };
 
  let editorConfig = ref({
    MENU_CONF: {
      // 插入图片
      insertImage: {
        onInsertedImage(imageNode) {
          if (imageNode == null) return;
 
          const { src, alt, url, href } = imageNode;
          console.log("inserted image", src, alt, url, href);
        },
        checkImage: customCheckImageFn, // 也支持 async 函数
        parseImageSrc: customParseImageSrc, // 也支持 async 函数
      },
      // 编辑图片
      editImage: {
        onUpdatedImage(imageNode) {
          if (imageNode == null) return;
 
          const { src, alt, url } = imageNode;
          console.log("updated image", src, alt, url);
        },
        checkImage: customCheckImageFn, // 也支持 async 函数
        parseImageSrc: customParseImageSrc, // 也支持 async 函数
      },
    },
  });
</script>
 
<template>
  <div class="page-rich">
    <Rich v-model="richHtml" :editorConfig="editorConfig" />
  </div>
</template>

3.9 上传图片

3.9.1 服务端地址

必填，否则上传图片会报错。

let editorConfig = ref({
  MENU_CONF: {
    uploadImage: {
      server: "/api/upload",
    },
  },
});

正常情况要求服务端返回体如下，如果不满足可以查看自定义插入。

// 上传成功返回
{
    "errno": 0, // 注意：值是数字，不能是字符串
    "data": {
        "url": "xxx", // 图片 src ，必须
        "alt": "yyy", // 图片描述文字，非必须
        "href": "zzz" // 图片的链接，非必须
    }
}
 
// 上传失败返回
{
    "errno": 1, // 只要不等于 0 就行
    "message": "失败信息"
}
3.9.2 基本配置
let editorConfig = ref({
  MENU_CONF: {
    uploadImage: {
      // form-data fieldName ，默认值 'wangeditor-uploaded-image'
      fieldName: "your-custom-name",
 
      // 单个文件的最大体积限制，默认为 2M
      maxFileSize: 1 * 1024 * 1024, // 1M
 
      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,
 
      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ["image/*"],
 
      // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
      meta: {
        token: "xxx",
        otherKey: "yyy",
      },
 
      // 将 meta 拼接到 url 参数中，默认 false
      metaWithUrl: false,
 
      // 自定义增加 http  header
      headers: {
        Accept: "text/x-json",
        otherKey: "xxx",
      },
 
      // 跨域是否传递 cookie ，默认为 false
      withCredentials: true,
 
      // 超时时间，默认为 10 秒
      timeout: 5 * 1000, // 5 秒
    },
  },
});
3.9.3 回调函数
let editorConfig = ref({
  MENU_CONF: {
    uploadImage: {
      // 上传之前触发
      onBeforeUpload(file) {
        // file 选中的文件，格式如 { key: file }
        return file;
 
        // 可以 return
        // 1. return file 或者 new 一个 file ，接下来将上传
        // 2. return false ，不上传这个 file
      },
 
      // 上传进度的回调函数
      onProgress(progress) {
        // progress 是 0-100 的数字
        console.log("progress", progress);
      },
 
      // 单个文件上传成功之后
      onSuccess(file, res) {
        console.log(`${file.name} 上传成功`, res);
      },
 
      // 单个文件上传失败
      onFailed(file, res) {
        console.log(`${file.name} 上传失败`, res);
      },
 
      // 上传错误，或者触发 timeout 超时
      onError(file, err, res) {
        console.log(`${file.name} 上传出错`, err, res);
      },
    },
  },
});
3.9.4 自定义插入

如果服务端的返回体，不满足所需格式，可以使用 customInsert 自定义插入。

let editorConfig = ref({
  MENU_CONF: {
    uploadImage: {
      customInsert(res, insertFn) {
        // res 即服务端的返回结果
 
        // 从 res 中找到 url alt href ，然后插入图片
        insertFn(url, alt, href);
      },
    },
  },
});
3.9.5 自定义上传

如果不想使用 wangEditor 自带的上传功能，例如你要上传到阿里云 OSS 。可以通过 customUpload 来自定义上传。

let editorConfig = ref({
  MENU_CONF: {
    uploadImage: {
      async customUpload(file, insertFn) {
        // file 即选中的文件
        // 自己实现上传，并得到图片 url alt href
        // 最后插入图片
        insertFn(url, alt, href);
      },
    },
  },
});
3.9.6 自定义选择图片

如果不想使用 wangEditor 自带的选择文件功能，例如你有自己的图床，或者图片选择器。可以通过 customBrowseAndUpload 来自己实现选择图片、上传图片，并插入图片。

let editorConfig = ref({
  MENU_CONF: {
    uploadImage: {
      customBrowseAndUpload(insertFn) {
        // 自己选择文件
        // 自己上传文件，并得到图片 url alt href
        // 最后插入图片
        insertFn(url, alt, href);
      },
    },
  },
});
3.9.7 base64 插入图片
let editorConfig = ref({
  MENU_CONF: {
    uploadImage: {
      // 小于该值就插入 base64 格式（而不上传），默认为 0
      base64LimitSize: 5 * 1024, // 5kb
    },
  },
});

3.10 视频

onInsertedVideo 插入视频之后的回调、checkVideo 校验视频链接、parseVideoSrc 转换视频链接

<script setup lang="ts">
  import { ref } from "vue";
  import Rich from "@/components/Rich.vue";
 
  let richHtml = ref("");
  // 自定义校验视频
  const customCheckVideoFn = (src, poster) => {
    if (!src) {
      return;
    }
    if (src.indexOf("http") !== 0) {
      return "视频地址必须以 http/https 开头";
    }
    return true;
 
    // 返回值有三种选择：
    // 1. 返回 true ，说明检查通过，编辑器将正常插入视频
    // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）
    // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
  };
 
  // 自定义转换视频
  const customParseVideoSrc = (src) => {
    if (src.includes(".bilibili.com")) {
      // 转换 bilibili url 为 iframe （仅作为示例，不保证代码正确和完整）
      const arr = location.pathname.split("/");
      const vid = arr[arr.length - 1];
      return `<iframe src="//player.bilibili.com/player.html?bvid=${vid}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>`;
    }
    return src;
  };
  let editorConfig = ref({
    MENU_CONF: {
      insertVideo: {
        onInsertedVideo(videoNode) {
          if (videoNode == null) return;
 
          const { src } = videoNode;
          console.log("inserted video", src);
        },
        checkVideo: customCheckVideoFn, // 也支持 async 函数
        parseVideoSrc: customParseVideoSrc, // 也支持 async 函数
      },
    },
  });
</script>
 
<template>
  <div class="page-rich">
    <Rich v-model="richHtml" :editorConfig="editorConfig" />
  </div>
</template>

3.11 上传视频

3.11.1 服务端地址

必填，否则上传图片会报错。

let editorConfig = ref({
  MENU_CONF: {
    uploadVideo: {
      server: "/api/upload",
    },
  },
});

正常情况要求服务端返回体如下，如果不满足可以查看自定义插入。

// 上传成功返回
{
    "errno": 0, // 注意：值是数字，不能是字符串
    "data": {
        "url": "xxx", // 视频 src ，必须
        "poster": "xxx.png" // 视频封面图片 url ，可选
    }
}
 
// 上传失败返回
{
    "errno": 1, // 只要不等于 0 就行
    "message": "失败信息"
}
3.11.2 基本配置
let editorConfig = ref({
  MENU_CONF: {
    uploadVideo: {
      // form-data fieldName ，默认值 'wangeditor-uploaded-video'
      fieldName: "your-custom-name",
 
      // 单个文件的最大体积限制，默认为 10M
      maxFileSize: 5 * 1024 * 1024, // 5M
 
      // 最多可上传几个文件，默认为 5
      maxNumberOfFiles: 3,
 
      // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ["video/*"],
 
      // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
      meta: {
        token: "xxx",
        otherKey: "yyy",
      },
 
      // 将 meta 拼接到 url 参数中，默认 false
      metaWithUrl: false,
 
      // 自定义增加 http  header
      headers: {
        Accept: "text/x-json",
        otherKey: "xxx",
      },
 
      // 跨域是否传递 cookie ，默认为 false
      withCredentials: true,
 
      // 超时时间，默认为 30 秒
      timeout: 15 * 1000, // 15 秒
    },
  },
});
3.11.3 回调函数
let editorConfig = ref({
  MENU_CONF: {
    uploadVideo: {
      // 上传之前触发
      onBeforeUpload(file) {
        // file 选中的文件，格式如 { key: file }
        return file;
 
        // 可以 return
        // 1. return file 或者 new 一个 file ，接下来将上传
        // 2. return false ，不上传这个 file
      },
 
      // 上传进度的回调函数
      onProgress(progress) {
        // progress 是 0-100 的数字
        console.log("progress", progress);
      },
 
      // 单个文件上传成功之后
      onSuccess(file, res) {
        console.log(`${file.name} 上传成功`, res);
      },
 
      // 单个文件上传失败
      onFailed(file, res) {
        console.log(`${file.name} 上传失败`, res);
      },
 
      // 上传错误，或者触发 timeout 超时
      onError(file, err, res) {
        console.log(`${file.name} 上传出错`, err, res);
      },
    },
  },
});
3.11.4 自定义插入

如果服务端的返回体，不满足所需格式，可以使用 customInsert 自定义插入。

let editorConfig = ref({
  MENU_CONF: {
    uploadVideo: {
      customInsert(res, insertFn) {
        // res 即服务端的返回结果
 
        // 从 res 中找到 url poster ，然后插入视频
        insertFn(url, poster);
      },
    },
  },
});
3.11.5 自定义上传

如果不想使用 wangEditor 自带的上传功能，例如你要上传到阿里云 OSS 。可以通过 customUpload 来自定义上传。

let editorConfig = ref({
  MENU_CONF: {
    uploadVideo: {
      async customUpload(file, insertFn) {
        // file 即选中的文件
        // 自己实现上传，并得到视频 url poster
        // 最后插入视频
        insertFn(url, poster);
      },
    },
  },
});
3.11.6 自定义选择视频

如果不想使用 wangEditor 自带的选择文件功能，例如你有自己的图床，或者视频文件选择器。可以通过 customBrowseAndUpload 来自己实现选择视频、上传视频，并插入视频

let editorConfig = ref({
  MENU_CONF: {
    uploadVideo: {
      customBrowseAndUpload(insertFn) {
        // 自己选择文件
        // 自己上传文件，并得到视频 url poster
        // 最后插入视频
        insertFn(url, poster);
      },
    },
  },
});

wangEditor 富文本详解（下）https://developer.aliyun.com/article/1513315?spm=a2c6h.13148508.setting.30.f8774f0euyBLtl

文章标签：
对象存储
yqcoder
目录
相关文章
你挚爱的强哥
|
1月前
|
JavaScript
Vue项目中使用wangEditor富文本输入框（推荐）
Vue项目中使用wangEditor富文本输入框（推荐）
你挚爱的强哥
101 0
.星空.
|
10月前
|
前端开发
vue3 中wangEditor富文本编辑器上传图片功能
vue3 中wangEditor富文本编辑器上传图片功能
.星空.
242 0
无妄的罪
|
10月前
vue3 wangEditor富文本自定义上传本地图片
Vue3和WangEditor都提供了上传本地图片的功能，可以结合使用实现自定义上传本地图片。
无妄的罪
740 0
程序员王天
|
11月前
|
前端开发 JavaScript 容器
三行代码，完美解决vue-quill-editor富文本样式失效问题
只用三行代码哦
程序员王天
292 0
怒放吧德德
|
存储 JavaScript 前端开发
【前端系列】- 富文本组件(mavon-editor)
mavon-editor是一款基于vue的markdown编辑器，可以用来做文本的编辑，比如是某种业务需要发送公告、个人博客等，都可以用到，操作也十分简单。
怒放吧德德
3350 0
【前端系列】- 富文本组件(mavon-editor)
你挚爱的强哥
|
1月前
|
JavaScript
Vue在Element UI下使用富文本框插件quill-editor（我个人不推荐用这个复杂的富文本插件）
Vue在Element UI下使用富文本框插件quill-editor（我个人不推荐用这个复杂的富文本插件）
你挚爱的强哥
253 0
孟文鑰
|
JavaScript
VUE~富文本简单使用~tinymce
VUE~富文本简单使用~tinymce
孟文鑰
774 0
VUE~富文本简单使用~tinymce
yqcoder
|
1月前
|
前端开发 JavaScript 编译器
wangEditor 富文本详解（上）
wangEditor 富文本详解（上）
yqcoder
55 0
yqcoder
|
1月前
|
JSON JavaScript API
wangEditor 富文本详解（下）
wangEditor 富文本详解（下）
yqcoder
121 0
破浪前进
|
1月前
|
资源调度 JavaScript 前端开发
vue--使用wangEditor富文本
vue--使用wangEditor富文本
破浪前进
83 0