魔改 wangEditor V4（编辑器高度）

前言

之前有网友提出根据内容动态设置编辑器的高度和拖拽更改编辑器的高度这样的需求，然而这样的需求毕竟比较小众。但是我个人呢刚好对这些比较“奇”的东西感兴趣，所以抽时间试了下。

使用的时候不建议同时使用两个功能

一、写一个监听器

根据你自己的需求取舍，这不是必须的，你也可以把更新DOM操作放在业务代码中

之所以写这个监听器呢，主要是为了把数据渲染这个操作放在一个地方处理

虽然用了 IE 可以支持的 Object.defineProperty，但是代码中的 ES6（解构、模板字面量） 语法在 IE 中是无法运行的，需要编译成 ES5 代码

二、实现【拖拽修改编辑器高度】

三、实现【根据内容动态更新编辑器高度】

四、将功能运用到 wangEditor 中

五、完整的代码

/** * 数据监听实现 * @param {Object} editor wangEditor 的实例 * @param {String} prop editor.config 的属性名 * @param {Function} change prop 值发生变化时的回调 * @param {Function}  validate 设置 prop 值前的数据验证和处理 */function define({ editor, prop, change, validate }) {    if (typeof validate != 'function') {        validate = function (value) {            return {                valid: true,    // 验证的结果。true: 验证通过；false: 验证失败。                data: value     // 处理后的值，不需要处理直接返回即可            }        }    }    let temp = editor.config[prop]    Object.defineProperty(editor.config, prop, {        enumerable: true,        configurable: true,        get: function () {            return temp        },        set: function (value) {            const { valid, data } = validate(value)            if (valid && data !== temp) {                temp = data                change(temp)            }            return temp        }    })}// 拖拽改变编辑器的高度function dragReSize(editor) {    // 将一个 HTML 字符串转换为由 wangEditor.$（一个类 jQuery 的东东） 包裹的实例对象    const reel = wangEditor.$('<div style="position: absolute;bottom: 0;left: 0;width: 100%;background-color: aqua;cursor: pointer;border-top: 3px solid #c9d8db;"></div>')    // 将这个实例添加到 wangEditor 的编辑区容器中    editor.$textContainerElem.append(reel)    // 添加鼠标事件    reel.on('mousedown', function mousedown(down) {        let last = down        // 鼠标移动，更新 wangEditor 实例中的 height 配置项        function mousemove(move) {            editor.config.height += (move.clientY - last.clientY)            last = move        }        // 在鼠标弹起事件中移除事件监听        function mouseup() {            document.removeEventListener('mousemove', mousemove)            document.removeEventListener('mouseup', mouseup)        }        // 将鼠标事件绑定到 document 上        document.addEventListener('mousemove', mousemove)        document.addEventListener('mouseup', mouseup)    })}/** * 根据内容动态设置编辑器高度 * @param {wangEditor} editor wangEditor 实例 * @param {Number} max 编辑器的最大高度 * @param {Number} min 编辑器的最小高度 */function equalAltitude({ editor, max, min }) {    editor.config.onchange = function () {        const last = Array.prototype.slice.call(editor.$textElem.elems[0].children, -1)[0]        if (last) {            const height = last.offsetTop + last.clientHeight            editor.config.height = height < min ? min : height > max ? max : height        }    }}const editor = new wangEditor('.editor')// 对 editor.config.height 进行响应式处理define({    editor: editor,    prop: 'height',    change(value) {        editor.$textContainerElem.css('height', `${value}px`)    },    validate(value) {        const data = parseFloat(value)        return {            valid: !isNaN(data),   // 数据校验：设置的值只能为数字            data: data,            // 此处返回的是被处理后的数据        }    }})// 因为动态更新编辑器高度涉及到 wangEditor 的 onchange 回调，// 而 onchange 必须在 create 前的配置才有效，所以放在 create 前。equalAltitude({    editor: editor,    min: 300,    max: 800})editor.create()// 拖拽功能是编辑器存在了才将我们的节点添加进行，所以放在 create 之后dragReSize(editor)复制代码