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>

使用这种方式，可以调整到任意高度（无右下角拖拽把手，但鼠标移到下边框时，会呈上下双箭头状）：

注：第二种方式未考虑查看源代码区域的高度，所以如果使用第二种方式，还应该隐藏查看源代码按钮，或者同时调整源代码区域的高度。

两种为wangEditor添加拖拽调整高度的方式：CSS3和jQuery UI的更多相关文章

  1. 为Bootstrap模态对话框添加拖拽移动功能

    请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> < ...

  2. winform中文本框添加拖拽功能

    对一个文本框添加拖拽功能: private void txtFolder_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataP ...

  3. RCP：给GEF编辑器添加拖拽辅助线

    当图形边缘碰触时,会产生一条帮助拖拽的辅助线 这里需要三个类: 1.SnapToGeomotry 2.SnapToGuide(非必须) 3.SnapFeedbackPolicy

  4. 为UniDBEdit添加拖拽属性

    不知是作者Fashard的疏忽还是有意,UniDBEdit的拖拽属性居然没有发布出来(其他组件都已发布).加上其实也很简单. 打开source目录下的uniDBEdit.pas单元,在TUniDBEd ...

  5. 拖拽调整Div大小

    今天写了一天这个jquery插件: 可以实现对div进行拖拽来调整大小的功能. (function ($) { $.fn.dragDivResize = function () { var delta ...

  6. element-ui 弹出添加拖拽功能

    1.新建dialog.js文件2.在main.js 中引入dialog.js  import ‘./utils/dialog.js’3. 使用:<el-dialog v-dialogDrag&g ...

  7. 可拖拽和带预览图的jQuery文件上传插件ssi-uploader

    插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非 ...

  8. 为Bootstrap Modal（模态框）全局添加拖拽操作

    在js中绑定方法 $(document).on("show.bs.modal", ".modal", function(){ $(this).draggable ...

  9. MVC两种获取上传的文件数据变量的方式

    第一种方式,在控制器中利用HttpPostedFileBase参数对象获取. [HttpPost] public ActionResult SaveFile(HttpPostedFileBase up ...

随机推荐

  1. 【转】UWP 捕获全局异常

    转自:http://www.cnblogs.com/youngytj/p/4749004.html 异步(async)方法中的异常无法被App的UnhandledException捕获的问题 这是一个 ...

  2. 在转换为 UTC 时大于 DateTime.MaxValue 或小于 DateTime.MinValue 的 DateTime 值无法系列化为 JSON

    看到这个错往往会感到莫名其妙! 其原因其实是数据库的DateTime最小值和C#的DateTime不一样 Sql Server DateTime 类型必须介于 1/1/1753 12:00:00 AM ...

  3. Spring MVC 返回json数据 报406错误 问题解决方案

    将jackson jar包改为jackson-databind-2.5.0.jar  jackson-core-2.5.0.jar  jackson-annotations-2.5.0.jar(这个版 ...

  4. 【锋利的Jquery】读书笔记五

    jquery表单 表格操作 表单从基本的得到和失去焦点表单验证 <script type="text/javascript"> $(function(){ $(&quo ...

  5. hdu 3842 Machine Works(cdq分治维护凸壳)

    题目链接:hdu 3842 Machine Works 详细题解: HDU 3842 Machine Works cdq分治 斜率优化 细节比较多,好好体会一下. 在维护斜率的时候要考虑x1与x2是否 ...

  6. 记录下 js各种证件的正则验证

    身份证 /(^\d{15}$)|(^\d{17}([0-9]|X)$)/    护照 /^[a-zA-Z0-9]{3,21}$/   /^(P\d{7})|(G\d{8})$/    军官证或士兵证 ...

  7. 面试经典——从输入 URL 到页面加载完的过程中都发生了什么事情？

    想要更加了解http协议,猛戳这里 1)把URL分割成几个部分:协议.网络地址.资源路径.其中网络地址指示该连接网络上哪一台计算机,可以是域名或者IP地址,可以包括端口号:协议是从该计算机获取资源的方 ...

  8. XTU 1243 2016

    $2016$长城信息杯中国大学生程序设计竞赛中南邀请赛$A$题 循环节. 循环节为$2016$,从数据范围以及题目中的一句话也能间接的体会出应该是有循环节的,并且循环节可能是$2016$. Feel ...

  9. js得到当前页面的url信息方法

    js得到当前页面的url信息方法:http://www.cnblogs.com/zuosong160522/p/5755615.html js获取url传递参数,js获取url?后面的参数:http: ...

  10. [SQL基础教程] 3-1 对表进行聚合查询

    [SQL基础教程] 3-1 对表进行聚合查询 聚合函数 用于合计的函数称为聚合函数或者集合函数 COUNT SUM AVG MAX MIN SELECT COUNT(*) FROM table; SE ...