基于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 相关文章推荐
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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中函数的形参与实参的问题说明
2010/09/01 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
Django中cookie的基本使用方法示例
2018/02/03 Python
Python中的函数作用域
2018/05/07 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python数字类型math库原理解析
2020/03/02 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
运动会广播稿200米
2014/01/27 职场文书
关于环保的建议书
2014/05/12 职场文书
管理提升方案
2014/06/04 职场文书
运动会演讲稿100字
2014/08/25 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
城南旧事电影观后感
2015/06/16 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers