基于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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
直接生成打开窗口代码,不必下载
May 14 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
node.js制作一个简单的登录拦截器
Feb 10 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 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 SQL之where语句生成器
2009/03/24 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
Python连接mysql数据库的正确姿势
2016/02/03 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
python实现图像拼接
2020/03/05 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
致400米运动员广播稿
2014/02/07 职场文书
丧事主持词大全
2014/04/02 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
病媒生物防治方案
2014/05/13 职场文书
安全宣传标语
2014/06/10 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
经理岗位职责
2015/02/02 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
python代码实现扫码关注公众号登录的实战
2021/11/01 Python