富文本编辑器wangEditor（2）

最新推荐文章于 2024-05-22 17:32:05 发布

蛋道

最新推荐文章于 2024-05-22 17:32:05 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/macgigo/article/details/119035205

版权

回调函数：

onchang：用户操作导致内容变化后会自动触发的函数（包括但不限于鼠标点击，键盘打字等）

// 配置 onchange 回调函数 newHtml是触发时编辑框中的html内容
editor.config.onchange = function (newHtml) {
  console.log("change 之后最新的 html", newHtml);
};

我们也可以设置触发延迟时间（ms为单位）

editor.config.onchangeTimeout = 500; // 修改为 500ms

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

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

// 配置 onSelectionChange 回调函数
editor.config.onSelectionChange = function (newSelection) {
//只有一个参数，但参数中有三个key
  console.log("onSelectionChange", newSelection);
  /**
    {
       text:'wangeditor', // 当前选择文本
       html: '<p>wangeditor</p>', // 当前选中的html
       selection: selection, // 原生selection对象
    }
   */
};

onfocus 和 onblur：失去焦点，获得焦点触发的回调函数

//newHtml是触发时编辑框中的html内容
editor.config.onblur = function (newHtml) {
    console.log('onblur', newHtml) // 获取最新的 html 内容
}
editor.config.onfocus = function (newHtml) {
    console.log('onfocus', newHtml) // 获取最新的 html 内容
}

插入网络图片与视频的回调事件：（重点：网络图片！！）

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

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

内容校验：

内容校验一共有三个api：其内容大同小异，所以一块说；
三个api分别是：插入链接的校验（linkCheck），插入网络图片的校验（linkImgCheck），插入网络视频的校验（onlineVideoCheck）
插入链接有两个参数：text（插入的文字），link（插入的链接）
插入网络图片有三个参数：imgSrc（图片地址）,alt（图片错误显示说明）,href（跳转链接）
插入网络视频则是有一个参数：video（视频内容）

校验则需要返回值，下面用代码说明（以插入链接举例）

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

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

    // // 2. 返回一个字符串，说明检查未通过，编辑器会阻止链接插入。会 alert 出错误信息（即返回的字符串）
    // return '链接有 xxx 错误'
    return ’链接xxxxx‘
    // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止链接插入。
    // 此处，你可以自定义提示错误信息，自由发挥
    return undefined;
    this.$message({
    icon:error,
    title:Error,
    content:'xxxxxx'
})
}

粘贴过滤

（所有粘贴过滤都无法适用于IE11）

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

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

editor.config.pasteFilterStyle = false

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

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

editor.config.pasteIgnoreImg = true

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

// 配置粘贴文本的内容处理，（最好有返回值，也可以没有，相当于屏蔽粘贴）
editor.config.pasteTextHandle = function (pasteStr) {
    // 对粘贴的文本进行处理，然后返回处理后的结果
    return pasteStr + 'xxxxx'
}

上传图片与上传视频

上传图片与上传视频大部分功能相同，此处重点说明上传图片（上传视频几乎没用过…）

配置服务端接口：

// 图片配置 server 接口地址
editor.config.uploadVideoServer = '/api/upload-video'
//视频配置 server 接口地址
editor.config.uploadVideoServer = '/api/upload-video'

（重点）从服务端返回的数据必须是 application/json 的如下格式，否则会报错

//图片返回格式
{
    // errno 即错误代码，0 表示没有错误。
    //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个数组，返回图片Object，Object中包含需要包含url、alt和href三个属性,它们分别代表图片地址、图片文字说明和跳转链接,alt和href属性是可选的，可以不设置或设置为空字符串,需要注意的是url是一定要填的。
    "data": [
        {
            url: "图片地址",
            alt: "图片文字说明",
            href: "跳转链接"
        },
        {
            url: "图片地址1",
            alt: "图片文字说明1",
            href: "跳转链接1"
        },
        "……"
    ]
}
//视频返回格式
{
    // errno 即错误代码，0 表示没有错误。
    //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个对象，返回视频的线上地址
    "data": {
        "url": "视频1地址",
    }
}

（如服务端无法返回这种格式，那么只能写一个自定义上传函数了，后面会说）

限制大小与格式：

图片：

//默认限制图片大小是 5M ，可以自己修改。
editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
//配置格式
editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
//默认格式
['jpg', 'jpeg', 'png', 'gif', 'bmp']
//如不想限制类型，则可以写一个空数组；
editor.config.uploadImgAccept = []

视频：

//默认限制视频大小是 1024m ，可以自己修改
editor.config.uploadVideoMaxSize = 1 * 1024 * 1024 * 1024 // 1024m
//限制类型
editor.config.uploadVideoAccept = ['mp4']

（这里重点说一下限制大小问题）
我们上传图片或者视频可能偶尔会碰到413状态码：
413 Request Entity Too Large（请求实体太大）
一般情况都是请求体超过了代理设置的大小（nginx 默认大小1M）
这里写一下nginx的解决方式：
首先找到nginx的配置文件；（nginx.conf）
然后在http中加入如下代码（client_max_body_size）：

# 省略 N 行

http {

    # 省略 N 行

    client_max_body_size  100m; # 允许客户端上传文件最大为 100M

    # 省略 N 行

    server {
        # 省略 N 行
    }
}

自定义上传参数：

图片：

//上传时可自定义传递一些参数，例如传递验证的 token 等。
editor.config.uploadImgParams = {
    token: 'xxxxx',
    x: 100
}
//如果需要将参数拼接到 url 中，可再加上如下配置。
editor.config.uploadImgParamsWithUrl = true

视频：

editor.config.uploadVideoParams = {
    token: 'xxxxx',
    x: 100
}
//如果需要将参数拼接到 url 中，可再加上如下配置。
editor.config.uploadImgParamsWithUrl = true

自定义 fileName

上传图片时，可自定义 filename ，即在使用 formData.append(name, file) 添加图片文件时，自定义第一个参数。

editor.config.uploadFileName = 'your-custom-fileName'

视频同理：

editor.config.uploadVideoName = 'your-custom-fileName'

自定义 header

上传时添加 http 请求的 header 。

editor.config.uploadImgHeaders = {
    Accept: 'text/x-json',
    a: 100,
}

视频同样：

editor.config.uploadVideoHeaders = {
    Accept: 'text/x-json',
    a: 100,
}

withCredentials（跨域传递 cookie）

//跨域上传中如果需要传递 cookie 需设置 withCredentials 。
editor.config.withCredentials = true
//视频的api
editor.config.withVideoCredentials = true

自定义 timeout 时间（即上传接口最大等待时间）（单位是ms）

//图片默认为10s
editor.config.uploadImgTimeout = 5 * 1000
//视频默认为五分钟
editor.config.uploadVideoTimeout =  1000 * 60 * 5

一次上传几张图片或视频：

图片：

//默认为 100 张，需要限制可自己配置。
editor.config.uploadImgMaxLength = 5

视频无法调整，一次只能上传一个

回调函数:

可使用回调函数，对上传的不同阶段，做相应处理。代码示例如下。
图片：

editor.config.uploadImgHooks = {
    // 上传图片之前
    before: function(xhr) {
        console.log(xhr)

        // 可阻止图片上传
        return {
            prevent: true,
            msg: '需要提示给用户的错误信息'
        }
    },
    // 图片上传并返回了结果，图片插入已成功
    success: function(xhr) {
        console.log('success', xhr)
    },
    // 图片上传并返回了结果，但图片插入时出错了
    fail: function(xhr, editor, resData) {
        console.log('fail', resData)
    },
    // 上传图片出错，一般为 http 请求的错误
    error: function(xhr, editor, resData) {
        console.log('error', xhr, resData)
    },
    // 上传图片超时
    timeout: function(xhr) {
        console.log('timeout')
    },
    // 图片上传并返回了结果，想要自己把图片插入到编辑器中
    // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
    customInsert: function(insertImgFn, result) {
        // result 即服务端返回的接口
        console.log('customInsert', result)

        // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
        insertImgFn(result.data[0])
    }
}

视频：

editor.config.uploadVideoHooks = {
    // 上传视频之前
    before: function(xhr) {
        console.log(xhr)

        // 可阻止视频上传
        return {
            prevent: true,
            msg: '需要提示给用户的错误信息'
        }
    },
    // 视频上传并返回了结果，视频插入已成功
    success: function(xhr) {
        console.log('success', xhr)
    },
    // 视频上传并返回了结果，但视频插入时出错了
    fail: function(xhr, editor, resData) {
        console.log('fail', resData)
    },
    // 上传视频出错，一般为 http 请求的错误
    error: function(xhr, editor, resData) {
        console.log('error', xhr, resData)
    },
    // 上传视频超时
    timeout: function(xhr) {
        console.log('timeout')
    },
    // 视频上传并返回了结果，想要自己把视频插入到编辑器中
    // 例如服务器端返回的不是 { errno: 0, data: { url : '.....'} } 这种格式，可使用 customInsert
    customInsert: function(insertVideoFn, result) {
        // result 即服务端返回的接口
        console.log('customInsert', result)

        // insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可
        insertVideoFn(result.data.url)
    }
}

其他的api就不细说了（官方文档），最后重点说一下自定义上传图片：

我们在服务端无法返回文本编辑规定格式数据的时候，则只能用自定义上传来写（几乎没几个上传是那种格式返回的，如果后端不特意做接口，几乎必须要自定义上传）
首先是api：

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

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

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

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

（这里重点讲图片）
api中给了resutFiles（上传的文件列表），但是这种文件的形式是无法上传到服务端的（大部分）
所以我们必须要进行转化再进一步上传；
首先是常规转化方式：

 editor.config.customUploadImg = function (resultFiles, insertImgFn) {
    // resultFiles 是 input 中选中的文件列表
    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
    let param = new FormData();
    param.append('file', resultFiles[0]);
    //上传请求
      that.$http.post('file/upload',param
    ).then(res=>{
      insertImgFn(res.filePath)
    })
    // 上传图片，返回结果，将图片插入到编辑器中
    // insertImgFn(imgUrl)
}

这里则是转化成为file模式（这里后端固定只传一张，所以我只拿resultFiles[0]）；
而我们有时候则是base64转化图片，则是另一种方式：

 editor.config.customUploadImg = function (resultFiles, insertImgFn) {
    // resultFiles 是 input 中选中的文件列表
    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
     var file = resultFiles[0];           //获取文件对象
            console.log(file.type);             //输出文件类型
            if(!/image/.test(file.type)){
                return;
            };
            var reader = new FileReader();
            reader.readAsDataURL(file);         //读取图片文件
            reader.onload = function(){
            var param = this.result
            }
 //上传请求
      that.$http.post('file/upload',param
    ).then(res=>{
      insertImgFn(res.filePath)
    })
    // 上传图片，返回结果，将图片插入到编辑器中
    // insertImgFn(imgUrl)
}