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. FineReport中以jws方式调用WebService数据源方案

    在使用WebService作为项目的数据源时,希望报表中也是直接调用这个WebService数据源,而不是定义数据连接调用对应的数据库表,这样要怎么实现呢? 在程序中访问WebService应用服务, ...

  2. Linux之初体验

    预备作业03--我的Linux初体验 学习基于VirtualBox虚拟机安装Ubuntu图文教程在自己笔记本上安装Linux操作系统 一开始以为这个项目很简单,以往也在自己的笔记本上看教程安装过软件, ...

  3. .net在网页中生成二维码和条形码

    二维码: 1.下载ThoughtWorks.QRCode.dll文件 2.创建Web项目,添加引用刚才下载的文件 3.在项目中添加aspx窗体,编写代码如下 <%@ Page Language= ...

  4. C++ STD inner_product函数

    C++ STD函数   inner_product是c++标准库封装的一个函数. 函数原型: 函数1: inner_product(beg1, end1, beg2, init) 函数2: inner ...

  5. Hive插数据报错

    报错信息: Failed with exception MetaException(message:javax.jdo.JDODataStoreException: Put request faile ...

  6. git忽略某些文件提交

    git忽略某些文件提交   在项目中有些配置文件不需要提交,但是有同学在后面开发中发现在.igonore文件中无论如何都无法忽略某些文件的提交.原因在这里: 已经维护起来的文件,即使加上了gitign ...

  7. html css jquery 回到顶部按钮

    今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...

  8. centos 6.5 安装openssl

    1.下载wget https://www.openssl.org/source/openssl-1.0.2h.tar.gz 2.解压tar zxf openssl-1.0.2h.tar.gzcd op ...

  9. strutsprepareAndExecuteFiter

    FilterDispatcher是早期struts2的过滤器,后期的都用StrutsPrepareAndExecuteFilter了,如 2.1.6.2.1.8.StrutsPrepareAndExe ...

  10. json的遍历

    第一种json结构: var jsongood = {"goods":[{"parentId":"null","productId ...