WangEditor如何拉动下方改变高度给出demo
要使用WangEditor来拉动下方改变高度,可以在初始化编辑器时设置autoHeight属性为false,并监听编辑器的resize事件。在resize事件中可以根据需要改变编辑器的高度。
以下是一个使用WangEditor实现拉动下方改变高度的demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WangEditor Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wangeditor@3.1.1/dist/wangEditor.min.css">
</head>
<body>
<div id="editor"></div>
<script src="https://cdn.jsdelivr.net/npm/wangEditor@3.1.1/dist/wangEditor.min.js"></script>
<script>
// 创建编辑器
const editor = new wangEditor('#editor');
// 设置autoHeight为false
editor.config.autoHeight = false;
// 监听resize事件
editor.config.onchange = function (newHtml) {
const editorElement = document.querySelector('#editor');
editorElement.style.height = editorElement.scrollHeight + 'px';
};
// 渲染编辑器
editor.create();
</script>
</body>
</html>
在这个demo中,我们创建了一个id为"editor"的div作为编辑器容器,并使用wangEditor构造函数创建了一个编辑器实例。然后设置了autoHeight属性为false,并监听了resize事件。在resize事件中,我们通过获取编辑器容器的scrollHeight来改变编辑器的高度。
你可以将上述代码保存为一个html文件,然后在浏览器中打开该文件,就可以看到一个可以拉动下方改变高度的WangEditor编辑器
原文地址: http://www.cveoy.top/t/topic/iS8W 著作权归作者所有。请勿转载和采集!