preface

Before, some netizens proposed the requirement of dynamically setting the height of the editor and dragging and dropping the height of the editor according to the content, however, such requirements are relatively small. But I was personally interested in these quirky things, so I took the time to try them out.

It is not recommended to use the two functions at the same time

Write a listener

Depending on your own needs, this is not necessary; you can also put DOM updates in your business code

The main reason for writing this listener is to put the data rendering operation in one place

Although Object. DefineProperty is supported by IE, the ES6 (deconstruction, template literals) syntax in the code does not work in IE and needs to be compiled into ES5 code

Drag and drop to modify editor height

Iii. Implement [dynamically update editor height according to content]

Apply functionality to wangEditor

Five, complete code

/** * @param {Object} editor wangEditor instance * @param {String} editor. Config property name * @param {Function} * @param {Function} validate */ Function define({editor, prop, change, validate }) { if (typeof validate ! = 'function') {validate = function (value) {return {valid: true, // Validate result. True: the authentication succeeds. False: The authentication fails. data: Value // The processed 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) {// Convert an HTML string to $const reel = wangEditor.$('<div style="position: absolute; bottom: 0; left: 0; width: 100%; background-color: aqua; cursor: pointer; border-top: 3px solid #c9d8db;" ></div>') // Add this instance to wangEditor's edit area container editor.$textContainerEm.append (reel) // Add the mouse event reel.on('mousedown', Function mousedown(down) {let last = down Function mousemove(move) {editor.config.height += (move.clienty - last.clienty) last = Move} / / remove event listeners in the mouse up event function mouseup () {document. The removeEventListener (" mousemove ", mousemove) document.removeEventListener('mouseup', Mouseup)} / / to bind mouse events to the document on the document. The addEventListener (" mousemove ", mousemove) document.addEventListener('mouseup', Mouseup)})}/** * Dynamically set editor height based on content * @param {wangEditor} editor wangEditor instance * @param {Number} Max Editor maximum height * @param */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')// Define ({editor: editor, prop: 'height', change(value) { editor.$textContainerElem.css('height', `${value}px`) }, validate(value) { const data = parseFloat(value) return { valid: ! IsNaN (data), // Data verification: the value can only be a number data: }}})// Since the dynamic update editor height involves the onchange callback of wangEditor, onchange must be configured before create, so it is placed before create. equalAltitude({ editor: editor, min: 300, max: 800})editor.create()// The drag function is to add our node to the editor, so put it after create dragReSize(editor)Copy the code