jquery可定制的在线UEditor编辑器


Posted in Javascript onNovember 17, 2015

UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器,具有轻量,可定制,注重用户体验等特点,允许自由使用和修改代码,适用于前台快速简单回复框或后台内容编辑器。

使用方法:

因为本插件是百度「FEX前端研发团队」开发,在官方有较强细的中文文档,本文的目的只是让朋友们知道了解有这么个好插件而已,因此文档手册、下载、实例全链接到官方。
下载你需的要的语言版本,然后解压,在解压目录建立一个名为demo的html文件,代码如下

<!DOCTYPE HTML>
<html>
 
<head>
 <meta charset="UTF-8">
 <title>ueditor demo</title>
</head>
 
<body>
 <!-- 加载编辑器的容器 -->
 <script id="container" name="content" type="text/plain">
 这里写你的初始化内容
 </script>
 <!-- 配置文件 -->
 <script type="text/javascript" src="ueditor.config.js"></script>
 <!-- 编辑器源码文件 -->
 <script type="text/javascript" src="ueditor.all.js"></script>
 <!-- 实例化编辑器 -->
 <script type="text/javascript">
 var ue = UE.getEditor('container');
 </script>
</body> 
</html>

OK,完成以上工作,用浏览器打开demo.html,如果你看到以下的画面,那么恭喜你,初次部署成功!

jquery可定制的在线UEditor编辑器

如何使用?另一个详细的使用方法:
建立一个demo.html文件,首先在需要添加编辑器的地方加入以下代码,使用style可以设置编辑器的宽度和高度。

<script type="text/plain" id="myEditor" style="width:98%;height:240px;"> 
 <p>内容区域</p> 
</script>

然后,将UMeditor相关js和css文件加载。相关文件可以在本站下载或者直接到UMeditor官网下载最新版本。

<script src="http://libs.useso.com/js/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="umeditor.config.js"></script> 
<script type="text/javascript" charset="utf-8" src="umeditor.min.js"></script> 
<link href="themes/default/css/umeditor.min.css" type="text/css" rel="stylesheet">

接下来,我们开始调用编辑器:

<script type="text/javascript"> 
 var um = UM.getEditor('myEditor'); 
</script>

现在我们可以打开浏览器预览编辑器效果了。
定制选项
UMeditor提供了丰富的选项设置,用户可以根据自己项目需求适当定制。
获取编辑器里的内容可以使用如下代码,你还可以获取纯文本内容。

UM.getEditor('myEditor').getContent();

判断编辑器是否有内容,可以使用如下代码:

var cont = UM.getEditor('myEditor').hasContents(); 
 if(cont==true){ 
 alert('有内容。'); 
 }else{ 
 alert('无内容。'); 
 }

如果把编辑器放入表单form中,设置好action路径,就可以提交表单传送编辑器里的内容了。如:

<form action="server.php" method="post"> 
 <script id="container" name="content" type="text/plain" style="width:98%;height:240px;">这里写你的初始化内容</script> 
 <button type="submit" class="btn">提交</button> 
</form>

我们可以设置工具栏里允许使用的工具图标,如以下是简单的定制几个常用的工具图标:

var editor = UM.getEditor('container',{ 
 toolbar: 
 ['bold italic underline fullscreen', 'link unlink','| justifyleft justifycenter justifyright justifyjustify |', 'emotion image video | map'] 
 
});

UMeditor提供了许多工具,可以根据需求定制,如表格编辑、列表布局、多媒体插入、图片上传、地图调用等等。UMeditor提供了服务端的几种语言版本,主要是用于上传图片的处理。用户可以设置上传路径、上传文件类型限制、大小限制等等。只需设置一下即可应用。

使用效果:

jquery可定制的在线UEditor编辑器

以上就是本文的全部内容,希望能够帮助大家更好的使用UMeditor编辑器。

Javascript 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
jQuery 选择器详解
Jan 19 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
JS实现选项卡实例详解
Nov 17 #Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 #Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 #Javascript
Jquery easyui 实现动态树
Nov 17 #Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 #Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 #Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 #Javascript
You might like
怎样在UNIX系统下安装php3
2006/10/09 PHP
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
php统计数组元素个数的方法
2015/07/02 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
layui获取多选框中的值方法
2018/08/15 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
pycharm 使用心得(四)显示行号
2014/06/05 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
python @classmethod 的使用场合详解
2019/08/23 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
Python利用命名空间解析XML文档
2020/08/10 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
大四毕业生学习总结的自我评价
2013/10/31 职场文书
生物专业个人自荐信范文
2013/11/29 职场文书
应用艺术毕业生的自我评价
2013/12/04 职场文书
研究生求职自荐书
2014/06/23 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
投标售后服务承诺书
2015/04/29 职场文书