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. web页面在微信里打开，字体颜色不正常显示

    问题:写的web项目在微信里的webview里打开(iphone手机),会出现颜色的不识别.写的是白色,数字的部分会过了3-5秒后,变成黑色! 原因:在iphone手机里,数字的部分(具体的长度没有测 ...

  2. overflow属性及其在ios下卡顿问题解决

    overflow属性:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp overflow:scroll/auto;在手机页面滑动不流畅问题: ...

  3. 使用node.js编写脚本将JSON数据转换为SQL语句

    安装依赖模块 当node.js脚本在运行的时候,需要很多支持模块,这些模块存储在node_modules文件夹中.该脚本在执行过程中需要使用到fs.string-format两个支持模块,作用分别是: ...

  4. PHP判断一个变量是否可以通过foreach进行遍历

    <?php if( !is_array( $items ) && !$items instanceof Traversable ) //Throw exception here ...

  5. sqlcipher for android

    github 地址 https://github.com/sqlcipher/android-database-sqlcipher 官网教程 https://www.zetetic.net/sqlci ...

  6. python3 验证用户名密码

    输入用户名,密码,匹配通过,不匹配报错 import getpass user = input('input username: ') pwd = getpass.getpass('input pas ...

  7. 关于Objective-C Associated Objects

    一.相关函数 与Associated Objects相关的函数有三个 1 void objc_setAssociatedObject(id object, const void *key, id va ...

  8. [SQL基础教程] 2-1 SELECT语句基础

    [SQL基础教程] 2-1 SELECT语句基础 列的查询 Syntax SELECT<列名>,..... FROM<表名>; SELECT col_1, col_2 FROM ...

  9. uiscrollview 事件冲突

    self.scrollView.panGestureRecognizer.delaysTouchesBegan = YES;设置scrollView的延迟接收点击触摸事件,关闭触摸事件 self.sc ...

  10. 使用Java注解开发自动生成SQL

    使用注解开发的好处就是减少配置文件的使用.在实际过程中,随着项目越来越复杂,功能越来越多,会产生非常多的配置文件.但是,当配置文件过多,实际维护过程中产生的问题就不容易定位,这样就会徒劳的增加工作量. ...