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. oracle if else 判断

    CREATE OR REPLACE FUNCTION fn_GetClassifyBymxmjazfs (v_azfs varchar2,v_mx varchar2,v_mj varchar2) re ...

  2. 使用pip安装报错的处理方法_2

    终端更新pip出错 sudo pip install --upgrade pip : 1.ReadTimeoutError: HTTPSConnectionPool(host='pypi.Python ...

  3. Selenium也是一个用于Web应用程序测试的工具

    Selenium也是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE.Mozilla Firefox.Mozilla Suite ...

  4. Netty(6)源码-服务端与客户端创建

    原生的NIO类图使用有诸多不便,Netty向用户屏蔽了细节,在与用户交界处做了封装. 一.服务端创建时序图 步骤一:创建ServerBootstrap实例 ServerBootstrap是Netty服 ...

  5. ArrayList、HashSet、HashTable、List、Dictionary的区别

    在C#中,数组由于是固定长度的,所以常常不能满足我们开发的需求. 由于这种限制不方便,所以出现了ArrayList. ArrayList.List<T> ArrayList是可变长数组,你 ...

  6. 我理解的session和cookie

    tomcat管理session 理解tomcat是如何生成session的. 当用户请求到web资源有request.getSession()这段代码的时候,request首先会对请求的url判读是否 ...

  7. MySQL连接无法解析HOST主机名

    #1042 - Can't get hostname for your address 使用IP链接或域名链接都可能遇到这个问题 解决办法: my.ini 或 my.cnf 末尾添加 skip-nam ...

  8. openstack私有云布署实践【10.1 计算nova - kxcontroller节点配置（科兴环境）】

    一.首先登录kxcontroller1创建kx_nova数据库,并赋于远程和本地访问的权限.     mysql -u root -p   CREATE DATABASE kx_nova; GRANT ...

  9. mysql 数据库知识

    order by 字段    将查到的list集合按指定字段升序排序 order by 字段 DESC   将查到的list集合按指定字段降序排序 GROUP BY 语句用于结合合计函数,根据一个或多 ...

  10. Objective-C Runtime 运行时之二：成员变量与属性(转载)

    在前面一篇文章中,我们介绍了Runtime中与类和对象相关的内容,从这章开始,我们将讨论类实现细节相关的内容,主要包括类中成员变量,属性,方法,协议与分类的实现. 本章的主要内容将聚集在Runtime ...