wangEditor是一款优秀的Web富文本编辑器，但如果能像KindEditor那样支持拖拽调整高度就更好了。有两种方式可以为wangEditor添加这一功能，这里使用的wangEditor版本为2.1.22。

第一种方式是最简单，也是比较完美的一种方式：为编辑器元素添加值为vertical的resize CSS样式：

原生CSS方式

#editor {

resize: vertical;

}

var editor = new wangEditor("editor");

editor.create();

这样，编辑器的右下角就变成了可以拖动的把手(值vertical使其仅可垂直拖动)：

使用这种方式，在Chrome里，无法将编辑器的高度拖动到比原始高度更小，而在FireFox里，可以拖动到任意大小。

第二种方式是使用jQuery UI的resizable组件。使用这种方式的优点是可以让编辑器的整个下边框可以拖动，但由于编辑器和resizable组件难以完美结合，导致这种方法略微复杂，并且会导致编辑器的全屏功能无法正常使用。代码如下：

jQuery UI方式

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);

}

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

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

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

请自行下载使用到的Bootstrap库及jQuery库

< ...

winform中文本框添加拖拽功能

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

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

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

为UniDBEdit添加拖拽属性

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

拖拽调整Div大小

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

element-ui 弹出添加拖拽功能

1.新建dialog.js文件2.在main.js 中引入dialog.js  import ‘./utils/dialog.js’3. 使用:

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

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

为Bootstrap Modal(模态框)全局添加拖拽操作

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

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

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

随机推荐

RSA密钥生成与使用

RSA密钥生成与使用 openssl生成工具链接:http://pan.baidu.com/s/1c0v3UxE 密码:uv48 1. 打开openssl密钥生成软件打开 openssl 文件夹下的  ...

解决Win7 软件图标不显示--Win7图标异常，快捷方式不显示解决方法

电脑症状:WIN7的系统,桌面上的图标显示的不正常,快捷方式显示的是未知程序.看不到程序默认图标,快捷方式图标不显示. 解决方法:删除程序图标缓存即可.   将下面的内容复制到记事本保存为“Repai ...

Lock&plus;Condition 相对于 wait&plus;notify 的一个优势案例分析

问题的描述 启动3个线程打印递增的数字, 线程1先打印1,2,3,4,5, 然后是线程2打印6,7,8,9,10, 然后是线程3打印11,12,13,14,15. 接着再由线程1打印16,17,18, ...

alter table的用法

在数据库开发过程中,除了用得最多的数据库查询外,我们有时也需要去修改数据表的定义,比如在已存在的数据表中新增列和删除列等.这篇文章就总结一下alter table语句的用法. 示例代码如下. USE ...

给WordPress Page页面添加摘要输入框

默认情况下 WordPress Page 编辑页面没有摘要(Excerpt)输入框,所以对 WordPress 进行 SEO 的时候比较麻烦. 这个时候我们就可以通过以下代码给我 WordPress ...

linux入门教程&lpar;九&rpar; 文本编辑工具vim

前面多次提到过vim这个东西,它是linux中必不可少的一个工具.没有它很多工作都无法完成.早期的Unix都是使用的vi作为系统默认的编辑器的.你也许会有疑问,vi与vim有什么区别?可以这样简单理解 ...

用CImage类来显示PNG、JPG等图片

系统环境:Windows 7软件环境:Visual Studio 2008 SP1本次目的:实现VC单文档.对话框程序显示图片效果 CImage 是VC.NET中定义的一种MFC/ATL共享类,也是A ...

sass 学习

本来看了阮一峰和于江水两位老师的博客,有看了ionic自带的sass文件,原以为自己已经是很熟悉,精通了.可是我居然连ruby都不知道真实惭愧啊,辛亏看了www.sass.hk  我想这篇官方文档肯定 ...

SpringCache学习之操作redis

一.redis快速入门 1.redis简介 在java领域,常见的四大缓存分别是ehcache,memcached,redis,guava-cache,其中redis与其他类型缓存相比,有着得天独厚的 ...

星云链开发dapp，赚取100nas&lpar;价值近万)

前几天星云链主网正式上线,现在只要成功提交一个dapp即可获得100nas,1个nas 75元人民币左右.编写合约只要会javascript就可以写.活动持续两个月左右.下面简单介绍一下流程 首先注册 ...