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 相关文章推荐
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
js实现不重复导入的方法
Mar 02 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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
社区(php&amp;&amp;mysql)五
2006/10/09 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
python版简单工厂模式
2017/10/16 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
分公司经理岗位职责
2013/11/11 职场文书
人事部经理岗位职责
2014/03/07 职场文书
促销活动总结
2014/04/28 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
民间借贷借条范本
2015/05/25 职场文书
音乐之声观后感
2015/06/04 职场文书
小学运动会宣传稿
2015/07/23 职场文书
停车场管理制度范本
2015/08/05 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python