基于jquery实现可定制的web在线富文本编辑器附源码下载


Posted in Javascript onNovember 17, 2015

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

基于jquery实现可定制的web在线富文本编辑器附源码下载

在线预览     源码下载

如何使用?

建立一个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提供了服务端的几种语言版本,主要是用于上传图片的处理。用户可以设置上传路径、上传文件类型限制、大小限制等等。只需设置一下即可应用。

Javascript 相关文章推荐
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
Node.js中看JavaScript的引用
Apr 22 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
js prototype深入理解及应用实例分析
Nov 25 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 #Javascript
jquery判断密码强度的验证代码
Apr 22 #Javascript
jquery实现邮箱自动填充提示功能
Nov 17 #Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 #Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 #Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 #Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 #Javascript
You might like
php设计模式 Delegation(委托模式)
2011/06/26 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
村委会贫困证明
2014/01/14 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
律政俏佳人观后感
2015/06/09 职场文书
建筑工程催款函
2015/06/24 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
Python的三个重要函数详解
2022/01/18 Python