wangEditor是一款優秀的Web富文本編輯器，但如果能像KindEditor那樣支持拖拽調整高度就更好了。有兩種方式可以為wangEditor添加這一功能，這里使用的wangEditor版本為2.1.22。
第一種方式是最簡單，也是比較完美的一種方式：為編輯器元素添加值為vertical的resize CSS樣式：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生CSS方式</title> <meta charset="utf-8" /> <link href="Content/wangEditor/css/wangEditor.css" rel="stylesheet" /> <script src="Scripts/jquery-3.1.1.js"></script> <script src="Scripts/wangEditor.js"></script> <style> #editor { resize: vertical; } </style> </head> <body> <div id="editor"></div> <script> var editor = new wangEditor("editor"); editor.create(); </script> </body> </html>
這樣，編輯器的右下角就變成了可以拖動的把手（值vertical使其僅可垂直拖動）：
使用這種方式，在Chrome里，無法將編輯器的高度拖動到比原始高度更小，而在FireFox里，可以拖動到任意大小。
第二種方式是使用jQuery UI的resizable組件。使用這種方式的優點是可以讓編輯器的整個下邊框可以拖動，但由於編輯器和resizable組件難以完美結合，導致這種方法略微復雜，並且會導致編輯器的全屏功能無法正常使用。代碼如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery UI方式</title> <meta charset="utf-8" /> <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" /> <link href="Content/wangEditor/css/wangEditor.css" rel="stylesheet" /> <script src="Scripts/jquery-3.1.1.js"></script> <script src="Scripts/jquery-ui-1.12.1.js"></script> <script src="Scripts/wangEditor.js"></script> </head> <body> <div id="editor"></div> <script> var editor = new wangEditor("editor"); // 由於這種方式導致全屏功能異常，所以應該移除全屏按鈕 editor.config.menus = $.grep(editor.config.menus, function (menu) { return menu != "fullscreen"; }); editor.create(); // 類為wangEditor-container的元素是wangEditor為編輯器元素包裹的最外層元素，應使其成為resizable組件，而不是包含編輯器文本內容的元素（即ID為editor的div元素） $(".wangEditor-container").resizable({ // 只讓下邊框可以拖動 handles: "s", // 拖動時，不斷調整內層編輯器文本區域的高度 resize: setTextAreaHeight }); // 調整瀏覽器窗口大小時，也要同時調整編輯器文本區域的高度 $(window).bind("resize", setTextAreaHeight); // 調整編輯器內層文本區域高度的函數，計算方法是編輯器包裝元素高度減工具欄高度，再減文本區域的垂直margin和padding之和 function setTextAreaHeight() { $("#editor").height($(".wangEditor-container").height() - $(".wangEditor-menu-container").height() - 20); } </script> </body> </html>
使用這種方式，可以調整到任意高度（無右下角拖拽把手，但鼠標移到下邊框時，會呈上下雙箭頭狀）：
注：第二種方式未考慮查看源代碼區域的高度，所以如果使用第二種方式，還應該隱藏查看源代碼按鈕，或者同時調整源代碼區域的高度。