wangeditor基本使用及上传图片/视频到七牛云

官方首页：https://www.wangeditor.com/

官方文档：https://www.wangeditor.com/doc/

基本使用

使用方式

下载

可以使用npm安装也可以使用CDN进行连接

npm 安装 npm i wangeditor --save

CDN 链接 https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js

使用CDN js 外链引入

<div id="div1">
    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>

<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    // 或者 const editor = new E( document.getElementById('div1') )
    editor.create()
</script>

使用npm安装

在需要使用wangeditor的组建中进行引入

import E from "wangeditor";

然后再created函数中进行创建

//创建 
const editor = new E(this.$refs.editor);
//或者通过dom节点创建
//const editor = new E(document.getElementById('richText');


//初始化
editor.create()

html结构是

<template>
  <div>
    <div id="richText" ref="editor"></div>
  </div>
</template>

设置高度、z-index、配置placeholder

设置方式相同

在创建和初始化之前书写就可以

//创建 
const editor = new E(this.$refs.editor);
//或者通过dom节点创建
//const editor = new E(document.getElementById('richText');

      // 设置高度
      editor.config.height = 500;
      // 配置z-index
      editor.config.zIndex = 500;
      // 配置placeholder
      editor.config.placeholder = "自定义 placeholder 提示文字";
      // editor.config.placeholder = '' // 不想使用 placeholder ，赋值为空字符串即可


//初始化
editor.create()

一个页面多个编辑器

在一个页面上创建多个编辑器的时候，可以直接在new后面添加多个

const editor1 = new E('#div1', '#div2')
editor1.create()

const editor2 = new E('#div3')
editor2.create()

自动 focus

编辑器初始化时，默认会自动 focus 到编辑区域。可通过如下操作，取消自动 focus 。

如果只有一个富文本编辑可以直接忽略，如果有其他的就需要取消自动focus

const editor = new E('#div1')

// 取消自动 focus
editor.config.focus = false

editor.create()

自定义 alert

编辑器 customAlert 是对全局的alert做了统一处理，默认为 window.alert。

如觉得浏览器自带的alert体验不佳，可自定义 alert，以便于达到与自身项目统一的alert效果。

const editor = new E('#div1')
 // 自定义 alert
      editor.config.customAlert = function (s, t) {
        console.log("s, t", s, t);
        /**
         * s 是指 错误提示
         * t 是指 类型
         */
        _this.$message({
          type:t,
          message:s
        })
        
      };

editor.create()

数据回显

在使用wangeditor的时候，有可能会存在再次编辑情况，再次编辑就需要将之前的文本进行回显，回显使用一下代码

const E = window.wangEditor
    const editor = new E('#div1')
    editor.create()
    editor.txt.html(回显的变量) // 重新设置编辑器内容

配置菜单

基本上按照官方文档书写就可以

自定义菜单

editor.config.menus

使用 editor.config.menus 定义显示哪些菜单和菜单的顺序。

想要那些菜单就写上那些

 const E = window.wangEditor
    const editor = new E('#div1')

    // 配置菜单栏，删减菜单，调整顺序
    editor.config.menus = [
        'bold',
        'head',
        'link',
        'italic',
        'underline'
    ]

    editor.create()

editor.config.excludeMenus

使用 editor.config.excludeMenus 当只需剔除少数菜单的时候，直接设置不需要的菜单

不想要那些菜单就写上那些

 const E = window.wangEditor
    const editor = new E('#div1')

    // 配置菜单栏，设置不需要的菜单
    editor.config.excludeMenus = [
        'emoticon',
        'video'
    ]

    editor.create()

【注意】不要同时使用 editor.config.menus 和 editor.config.excludeMenus，以免引起冲突和混乱。

所有菜单

默认情况下会显示所有的菜单，配置如下：

// 默认情况下，显示所有菜单
editor.config.menus = [
    'head',
    'bold',
    'fontSize',
    'fontName',
    'italic',
    'underline',
    'strikeThrough',
    'indent',
    'lineHeight',
    'foreColor',
    'backColor',
    'link',
    'list',
    'todo',
    'justify',
    'quote',
    'emoticon',
    'image',
    'video',
    'table',
    'code',
    'splitLine',
    'undo',
    'redo',
]

配置颜色

编辑器的字体颜色和背景色，可以通过 editor.config.colors 自定义配置

字体颜色和背景颜色同时生效

const E = window.wangEditor
const editor = new E('#div1')

// 配置颜色（文字颜色、背景色）
editor.config.colors = [
    '#000000',
    '#eeece0',
    '#1c487f',
    '#4d80bf'
]

editor.create()

配置字体

编辑器的字体，可以通过 editor.config.fontNames 配置。

const E = window.wangEditor
const editor = new E('#div1')

// 配置字体
editor.config.fontNames = [
    //方式一
    // 对象形式 v4.6.16
    {name:"黑体",value:"黑体"},
    {name:"绝绝字体",value:"Times New Roman"}
    
    //方式二
    // 字符串形式
    '黑体',
    '仿宋',
    '楷体',
    '标楷体',
    '华文仿宋',
    '华文楷体',
    '宋体',
    '微软雅黑',
    'Arial',
    'Tahoma',
    'Verdana',
    'Times New Roman',
    'Courier New',
]

editor.create()

配置字号

编辑器的字号，可以通过 editor.config.fontSizes 配置。

const E = window.wangEditor
const editor = new E('#div1')

editor.config.fontSizes = {
    'x-small': { name: '10px', value: '1' },
    'small': { name: '13px', value: '2' },
    'normal': { name: '16px', value: '3' },
    'large': { name: '18px', value: '4' },
    'x-large': { name: '24px', value: '5' },
    'xx-large': { name: '32px', value: '6' },
    'xxx-large': { name: '48px', value: '7' },
}

editor.create()

【特别注意】上述配置中

key 的值（即 x-small small normal 等这些）不可改变，key 不可增加，只能减少。
value: '1 - 7' 也不可改变，也不可增加，只能减少。而且，value 和 key 必须对应起来，例如 small 就必须对应 2

因此，上述配置中，你只能修改 name 。但修改之后，不会生效，还需要做一些调整。

以 'large': { name: '18px', value: '4' } 这个举例。编辑器设置这个 font-size ，会生成 <font size="4">...</font> 。所以，你还需要增加下面的 css 代，让 size="4" 对应到 font-size: 18px; 。

font[size="4"] {
    font-size: 18px;
}

编辑器页面需要该 css ，回显页面也需要该 css 。

配置行高

编辑器的行高，可以通过 editor.config.lineHeights 配置。

const E = window.wangEditor
const editor = new E('#div1')

// 配置行高
editor.config.lineHeights = ['1', '1.15', '1.6', '2', '2.5', '3']

editor.create()

配置表情图标

通过 editor.config.emotions 可配置表情图标。表情菜单的 panel 中，支持多 tab 。

const SINA_URL_PATH = 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal'

const E = window.wangEditor
const editor = new E('#div1')

editor.config.emotions = [
    {
        title: '新浪', // tab 的标题
        type: 'image', // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
        content: [
            { alt: '[坏笑]', src: `${SINA_URL_PATH}/50/pcmoren_huaixiao_org.png` },
            { alt: '[舔屏]', src: `${SINA_URL_PATH}/40/pcmoren_tian_org.png` },
            { alt: '[污]', src: `${SINA_URL_PATH}/3c/pcmoren_wu_org.png` },
        ]
    },
    {
        title: 'emoji',  // tab 的标题
        type: 'emoji', // 'emoji' / 'image'
        // emoji 表情，content 是一个数组即可
        content: '                🤔  🤐'.split(/\s/),
    }
]

editor.create()

配置全屏功能

配置属性

编辑器创建之前, 可以使用 editor.config.showFullScreen = true 来展示全屏功能按钮, 默认是true, 就是不加这个属性默认展示全屏功能按钮

注意：工具栏和编辑器区域分离的时候不支持全屏功能

<div id="div1">
    <p>欢迎使用 wangEditor 编辑器</p>
</div>

<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')

    // 配置全屏功能按钮是否展示
    editor.config.showFullScreen = true

    editor.create()
</script>

设置菜单栏提示

隐藏菜单栏提示

编辑器的菜单栏提示，可以通过 editor.config.showMenuTooltips 配置。

const E = window.wangEditor
const editor = new E('#div1')

// 隐藏菜单栏提示
editor.config.showMenuTooltips = false

editor.create()

设置菜单栏提示为上标还是下标

可以通过editor.config.menuTooltipPosition配置显示上标还是下标。

const E = window.wangEditor
const editor = new E('#div1')

// 菜单栏提示为上标（默认配置）
editor.config.menuTooltipPosition = 'up'

// 菜单栏提示为下标
// editor.config.menuTooltipPosition = 'down'

// 以上配置二选一

editor.create()

回调函数

onchange

配置 onchange 回调函数

配置 onchange 函数之后，用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发 onchange 函数执行。

如果需要修改 onchange 触发的延迟时间（ onchange 会在用户无任何操作的 xxx 毫秒之后被触发），可通过 onchangeTimeout 配置。更多信息请见配置历史记录

const E = window.wangEditor;
const editor = new E("#div1");

// 配置 onchange 回调函数
editor.config.onchange = function (newHtml) {
  console.log("change 之后最新的 html", newHtml);
};
// 配置触发 onchange 的时间频率，默认为 200ms
editor.config.onchangeTimeout = 500; // 修改为 500ms

editor.create();

onSelectionChange

配置 onSelectionChange 回调函数

v4.7.5+版本支持

配置 onSelectionChange 函数之后，用户选区操作（鼠标选中文字，ctrl+a 全选等）会自动触发onSelectionChange 函数执行。

其中回调参数有 3 个是text,html,selection,分别为当前选择文本,当前选中的html,原生selection对象

const E = window.wangEditor;
const editor = new E("#div1");
// 配置 onSelectionChange 回调函数
editor.config.onSelectionChange = function (newSelection) {
  console.log("onSelectionChange", newSelection);
  /**
    {
       text:'wangeditor', // 当前选择文本
       html: '<p>wangeditor</p>', // 当前选中的html
       selection: selection, // 原生selection对象
    }
   */
};
editor.create();

onfocus 和 onblur

编辑区域 focus（聚焦）和 blur（失焦）时触发的回调函数。

在失焦的时候可以通过函数进行自动保存功能

const E = window.wangEditor
const editor = new E('#div1')

editor.config.onblur = function (newHtml) {
    console.log('onblur', newHtml) // 获取最新的 html 内容
}
editor.config.onfocus = function (newHtml) {
    console.log('onfocus', newHtml) // 获取最新的 html 内容
}

editor.create()

插入网络图片的回调事件

可以将插入的图片保存到自己的服务器，方式原地址的图片丢失

const E = window.wangEditor
const editor = new E('#div1')

// 插入网络图片的回调
editor.config.linkImgCallback = function (src,alt,href) {
    console.log('图片 src ', src)
    console.log('图片文字说明',alt)
    console.log('跳转链接',href)
}

editor.create()

应该是先检查图片然后在执行回调函数，执行顺序也是先检查在执行回调

插入网络视频的回调事件

与插入网络图片的回调事件相同

使用 editor.config.onlineVideoCallback 可以自定义检查插入网络视频后的回调。

const E = window.wangEditor
const editor = new E('#div1')

// 自定义检查插入视频的回调
editor.config.onlineVideoCallback = function (video) {
  // 自定义回调内容，内容成功插入后会执行该函数
  console.log('插入视频内容', video)
}

editor.create()

内容检查

插入链接的校验

使用 editor.config.linkCheck 可以自定义检查插入的链接。

const E = window.wangEditor
const editor = new E('#div1')

// 自定义检查插入的链接
editor.config.linkCheck = function(text, link) {
    // 以下情况，请三选一

    // 1. 返回 true ，说明检查通过
    return true

    // // 2. 返回一个字符串，说明检查未通过，编辑器会阻止链接插入。会 alert 出错误信息（即返回的字符串）
    // return '链接有 xxx 错误'

    // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止链接插入。
    // 此处，你可以自定义提示错误信息，自由发挥
}

editor.create()

插入网络图片的校验

使用 editor.config.linkImgCheck 可以自定义检查插入图片的链接。

const E = window.wangEditor
const editor = new E('#div1')

// 自定义检查插入图片的链接
// 参数中的imgSrc、alt、href分别代表图片地址、图片文本说明和跳转链接
// 后面两个参数是可选参数
editor.config.linkImgCheck = function(imgSrc,alt,href) {
    // 以下情况，请三选一

    // 1. 返回 true ，说明检查通过
    return true

    // // 2. 返回一个字符串，说明检查未通过，编辑器会阻止图片插入。会 alert 出错误信息（即返回的字符串）
    // return '图片 src 有 xxx 错误'

    // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止图片插入。
    // 此处，你可以自定义提示错误信息，自由发挥
}

editor.create()

插入网络视频的校验

使用 editor.config.onlineVideoCheck 可以自定义检查插入网络视频的内容。

const E = window.wangEditor
const editor = new E('#div1')

// 自定义检查插入视频的链接
editor.config.onlineVideoCheck = function(video) {
    // 编辑器会根据返回的内容做校验：比如以下几种情况

    // 1. 返回 true ，说明检查通过
    return true

    // 2. 返回一个字符串，说明检查未通过，编辑器会阻止视频插入。会 alert 出错误信息（即返回的字符串）
    // return '插入的视频 有 xxx 错误'

    // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止视频插入。
    // 此处，你可以自定义提示错误信息，自由发挥
}

editor.create()

粘贴过滤

关闭粘贴样式的过滤

【注意】本文不适用于 IE11

从其他地方（如网页、word 等）复制文本到编辑器中，编辑器会默认过滤掉复制文本的样式，这样可以让编辑器内容更加简洁。因为复制过来的文本样式，可能会比较混乱，且不可控。

true表示采用过滤（格式化），false表示不采用过滤（格式化）

可通过设置 editor.config.pasteFilterStyle = false 来关闭样式过滤。

忽略粘贴内容中的图片

上传粘贴的图片后面具体说

【注意】本文不适用于 IE11

从其他页面（如网页、word 等）复制过来的内容，除了包含文字还可能包含图片，这些图片一般都是外域的（可能会有防盗链处理，导致图片不显示）。

可以通过配置 editor.config.pasteIgnoreImg = true 来忽略粘贴的图片。如果复制的内容有图片又有文字，则只粘贴文字，不粘贴图片。

自定义处理粘贴的文本内容

【注意】本文不适用于 IE11

使用者可通过 editor.config.pasteTextHandle 对粘贴的文本内容进行自定义的过滤、处理等操作，然后返回处理之后的文本内容。编辑器最终会粘贴用户处理之后并且返回的的内容。

可以通过这个函数检测是否具有敏感文字

const E = window.wangEditor
const editor = new E('#div1')

// 配置粘贴文本的内容处理
editor.config.pasteTextHandle = function (pasteStr) {
    // 对粘贴的文本进行处理，然后返回处理后的结果
    return pasteStr + '巴拉巴拉'
}

editor.create()

上传图片

默认情况下不显示上传之有连接图片，连接图片就是将图片地址和alt文本输入即可。

上传图片分为base64保存、上传到自己的服务器一级其他OSS存储，其他看官网

base64保存

 // base64 保存图片
editor.config.uploadImgShowBase64 = true

这样就直接将图片的base64保存到代码中，但是代码量可能会很长

上传到自己的服务器

如果想完全自己实现图片上传的过程，如上传图片到某个云服务器，可以使用如下代码。

editor.config.customUploadImg = function (resultFiles, insertImgFn) {
    // resultFiles 是 input 中选中的文件列表
    // insertImgFn 是获取图片 url 后，插入到编辑器的方法

    // 上传图片，返回结果，将图片插入到编辑器中
    insertImgFn(imgUrl)
}

以上是官方代码，在函数体中可以获取接口进行传递，需要注意的是resultFiles是一个数组

//上传到服务器
editor.config.customUploadImg = function (resultFiles, insertImgFn) {
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后，插入到编辑器的方法
    
    //这是一个全局方法，将图片转成base64
_this.GlobalMethod.getBase64(resultFiles[0]).then((res) => {
  let params = {
    img: res,//base64文件
    name: "article",//文件夹名称
    classify: "article",//分类
  };
    //将base64传递给后端
  _this.Post(_this._URL.upBase64Img, params).then((res) => {
    if (res.code == "000000") {
      // 上传图片，返回结果，将图片插入到编辑器中
      // insertImgFn(imgUrl)
        //后端返回全路径地址
      insertImgFn(res.data);
    } else {
      _this.$message.error(res.message);
    }
  });
});
};

我的方法是将图片转成base64，将base64传递给后端php进行保存

getBase64方法

// 将图片转成base64
/**
 * @param {图片参数} file 
 * @returns  返回的是base64编码
 */
export const getBase64 = (file) => {
  return new Promise(function (resolve, reject) {
      let reader = new FileReader();
      let imgResult = "";
      reader.readAsDataURL(file);
      reader.onload = function () {
          imgResult = reader.result;
      };
      reader.onerror = function (error) {
          reject(error);
      };
      reader.onloadend = function () {
          resolve(imgResult);
      };
  })
}

后端php接口

<?php
/*
 * @描述: 图片上传接口-base64单张上传
 * @版本: 
 * @Author: lzb
 * @Date: 2021-12-09 17:38:42
 * @LastEditors: lzb
 * @LastEditTime: 2021-12-13 14:29:25
 * @FilePath: \serve\other\uploadImg\upBase64Img.php
 */

    header("Content-type: text/html; charset=utf-8"); 
    header('Access-Control-Allow-Origin:http:*');

 // 引入base64图片保存函数
include_once '../methods/base64Img.php';

// 接受前端传递的数据
$img = $_POST['img'];//base64图片
$name = $_POST['name'];//图片名称
$classify = $_POST['classify'];//存储类型

// 图片保存总目录
  define("WWWROOT",str_ireplace(str_replace("/","\\",$_SERVER['PHP_SELF']),'',__FILE__)."\\");
   $path = WWWROOT  . "imagess/";//服务器地址，图片地址

/**
 $img   base64图片信息
 $path  图片目录
 $name  图片名称
 $classify  图片存储分类
 $imgAddress   是一个数组，得到图片本地地址和url地址
 */
// 注意 如果是多张的话就需要调用多次函数，
$imgAddress = base64_image_content($img,$path,$name,$classify);
// echo json_encode($im1);
$imgSize = $imgAddress['0'];//本地地址
$imgUrl = $imgAddress['1'];//url地址
// echo $imgSize;
// 判断是否有值并进行返回
if(file_exists($imgSize)){
  echo json_encode(array(
    "message" => "上传成功",
    "code" => '000000',
    "data" => $imgUrl
));
}else{
  echo json_encode(array(
    "message" => "上传失败",
    "code" => '000001',
));
}

注意点：

在上传之前需要在上传位置创建文件夹

上传到七牛云

由于我的服务器比较小，经常上传图片会造成卡顿，因此将图片上传到七牛云进行保存

在wangeditor v3版本可以直接上传到七牛云，但是在v4版本没法直接上传，需要通过自己进行实现

在使用七牛云的时候需要将qiniu-js安装并引入进入

//npm install qiniu-js
import * as qiNiu from "qiniu-js";

// 上传到七牛云
editor.config.customUploadImg = function (resultFiles, insertImgFn) {
  console.log("resultFiles", resultFiles);
  // resultFiles 是 input 中选中的文件列表
  // insertImgFn 是获取图片 url 后，插入到编辑器的方法
  //有可能会上传多张图片,上传多张图片就需要进行遍历
  resultFiles.map((item) => {
    // _this.getUploadImg(item, insertImgFn);
    _this.getUploadFile(item, insertImgFn);
  });
};

在这里使用了getUploadFile函数，在函数中需要先获取七牛云的token，然后配置config等信息，上传完成之后会收到文件名称，将文件名称和七牛云绑定的域名连接即可，参考七牛云js SDK编写

// 上传图片/视频到七牛云
getUploadFile(file, Rendering) {
  // 获取七牛云的token
  this.Get(this._URL.createdqiniu).then((res) => {
    this.QiniuData.token = res;

      //配置信息
    var config = {
      useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false
      region: qiNiu.region.z1, //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域
      /**qiniu.region.z0: 代表华东区域
          qiniu.region.z1: 代表华北区域
          qiniu.region.z2: 代表华南区域
          qiniu.region.na0: 代表北美区域
          qiniu.region.as0: 代表东南亚区域
      */
    };

      //额外的信息
    var putExtra = {
      fname: "",//文件原文件名
    params: {},//object，用来放置自定义变量
    mimeType: null // null || array，用来限定上传文件类型，指定null时自动判断文件类型
    };



let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取后缀
      
    // 设置唯一的文件名
    const key =
      new Date().getTime() +
      Math.random().toString().substr(2, 5) +
      "." +
      suffix;

/**
     * file: Blob 对象，上传的文件
     * key: 文件资源名
     * token: 上传验证信息，前端通过接口请求后端获得
     * config: object
     * putExtra
     */
      const observable = qiNiu.upload(
      file,
      key,
      this.QiniuData.token,
      putExtra,
      config
    );
// 文件上传
    var observer = {
    //  正在上传 接收上传进度信息
    next(res) {
        // 上传进度  parseInt(res.total.percent)
          console.log("next-res",res, parseInt(res.total.percent))
        // if(parseInt(res.total.percent)==100){
        //     console.log("success")
        // }
    },
    // 接收上传错误信息
    error(err) {
      this.$message.error('文件上传失败')
      console.log(err)
    },

    // 接收上传完成后的信息
    complete(res) {
        //  console.log("complete-res", res)
          Rendering("http://updatafiles.ybrecord.cn/" + res.key);
    }
  };
  var subscription = observable.subscribe(observer); // 上传开始

  });
},

上传视频

上传视频和上传图片基本上一样

只是所用函数不同

如果想完全自己实现视频上传的过程，如上传视频到某个云服务器，可以使用如下代码。

editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
    // resultFiles 是 input 中选中的文件列表
    // insertVideoFn 是获取视频 url 后，插入到编辑器的方法

    // 上传视频，返回结果，将视频地址插入到编辑器中
    insertVideoFn(videoUrl)
}

PS：配置自定义插入视频 editor.config.customInsertVideo 也可以在这里起作用。

我的代码同样是上传到七牛云

// 上传视频
      editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
      console.log("resultFiles, insertVideoFn", resultFiles, insertVideoFn)
          // resultFiles 是 input 中选中的文件列表
          // insertVideoFn 是获取视频 url 后，插入到编辑器的方法
       _this.getUploadFile(resultFiles[0], insertVideoFn);
          // 上传视频，返回结果，将视频地址插入到编辑器中
          // insertVideoFn(videoUrl)
      }

以上是我所用的wangeditor方法级属性，其他请看官网