基于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版本引发的问题解决
Oct 14 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
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
融入意大利的咖啡文化
2021/03/03 咖啡文化
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
一些不错的js函数ajax
2008/08/20 Javascript
javascript 三种编解码方式
2010/02/01 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
高考考python编程是真的吗
2020/07/20 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
制药工程专业毕业生推荐信
2013/12/24 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
品牌宣传方案
2014/03/21 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
安全宣传标语
2014/06/10 职场文书
市场营销毕业求职信
2014/08/07 职场文书
趣味运动会广播稿
2014/09/13 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书