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 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
Javascript 日期处理之时区问题
Oct 08 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
Angular路由简单学习
Dec 26 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
VUE实时监听元素距离顶部高度的操作
Jul 29 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
PHP安全编程之加密功能
2006/10/09 PHP
社区(php&amp;&amp;mysql)五
2006/10/09 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
如何利用python查找电脑文件
2018/04/27 Python
django允许外部访问的实例讲解
2018/05/14 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
捷科时代的软件测试笔试题
2015/11/09 面试题
应聘教师自荐信
2013/10/12 职场文书
八年级英语教学反思
2014/01/09 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
实习生个人总结范文
2015/02/28 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript