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. <span>什么意思

    <span> 在CSS定义中属于一个行内元素,在行内定义一个区域,也就是一行内可以被 <span> 划分成好几个区域,从而实现某种特定效果. <span> 本身没有 ...

  2. CodeForces 157C Message

    $dp$. $dp[i][j]$表示$s[i]$到$s[j]$和$t[lent-1+i-j]$到$t[lent-1]$有$dp[i][j]$位相同,然后枚举一遍$dp[i][j]$就可以算出答案了. ...

  3. maven自定义骨架

    Maven 的 archetype 技术,为新建标准化的工程框架提供了方便.为自定义一套工程框架标准,可参考以下步骤操作: 1,创建一个项目的原型 2,在项目根目录执行命令:mvn archetype ...

  4. 使用spring-data-redis操作redis

    redis.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...

  5. Java线程如何返回数据

    前言 当开发者从单线程开发模式过渡到多线程环境,一个比较棘手的问题就是如何在一个线程中返回数据,众所周知,run()方法和start()方法不会返回任何值. 笔者在学习<Java Network ...

  6. JavaScript忍者秘籍——原型

    概要:本篇博客主要介绍JavaScript的原型 1.对象实例化 - 初始化的优先级 初始化操作的优先级如下: ● 通过原型给对象实例添加的属性 ● 在构造器函数内给对象实例添加的属性 在构造器内的绑 ...

  7. 关于CSRF的攻击

    CSRF攻击的原理: 1.当用户成功登陆网站A时,浏览器纪录本次会话cookie. 2.未退出网站A,点击了恶意网站B上的图片或者其他诱骗信息. 3.恶意网站B上的诱骗信息超链接到了网站A上面,冒充用 ...

  8. NOIP2010-普及组初赛C语言解析

    第十六届全国青少年信息学奥林匹克联赛初赛试题 一.单项选择题 (共20题,每题1.5分,共计30分.每题有且仅有一个正确选项.) 1．2E+03表示(  D  ). A．2.03          B ...

  9. Java与JavaScript中判断两字符串是否相等的区别

    JavaScript是一种常用的脚本语言,这也决定了其相对于其他编程语言显得并不是很规范.在JavaScript中判断两字符串是否相等 直接用==,这与C++里的String类一样.而Java里的等号 ...

  10. html 页面太长滚动时，固定页面菜单标签，或者导航标签的位置，fixed/stickUp the position

    有时你曾经需要把页面上的某些东西当页面太长发滚动的时候保留置顶位置显示,或许你有别的实现方式,我这个仅供参考, 源代码: /*global $, jQuery, alert*/ (function ( ...