要使用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 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录