wangEditor 富文本详解(中)

简介: 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

目录
相关文章
|
29天前
|
JavaScript
Vue项目中使用wangEditor富文本输入框(推荐)
Vue项目中使用wangEditor富文本输入框(推荐)
|
10月前
vue3 wangEditor富文本自定义上传本地图片
Vue3和WangEditor都提供了上传本地图片的功能,可以结合使用实现自定义上传本地图片。
694 0
|
10月前
|
前端开发
vue3 中wangEditor富文本编辑器上传图片功能
vue3 中wangEditor富文本编辑器上传图片功能
206 0
|
11月前
|
前端开发 JavaScript 容器
|
29天前
|
JavaScript
Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
|
存储 JavaScript 前端开发
【前端系列】- 富文本组件(mavon-editor)
mavon-editor是一款基于vue的markdown编辑器,可以用来做文本的编辑,比如是某种业务需要发送公告、个人博客等,都可以用到,操作也十分简单。
3280 0
【前端系列】- 富文本组件(mavon-editor)
|
JavaScript
VUE~富文本简单使用~tinymce
VUE~富文本简单使用~tinymce
764 0
VUE~富文本简单使用~tinymce
|
24天前
|
前端开发 JavaScript 编译器
wangEditor 富文本详解(上)
wangEditor 富文本详解(上)
35 0
|
24天前
|
JSON JavaScript API
wangEditor 富文本详解(下)
wangEditor 富文本详解(下)
75 0
|
29天前
|
资源调度 JavaScript 前端开发
vue--使用wangEditor富文本
vue--使用wangEditor富文本
67 0

热门文章

最新文章