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 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 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
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
php compact 通过变量创建数组
2016/11/15 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Python中with及contextlib的用法详解
2017/06/08 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
八一慰问活动方案
2014/02/07 职场文书
销售员岗位职责
2014/06/09 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书