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 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
jQuery 选择器详解
Jan 19 Javascript
jquery图形密码实现方法
Mar 11 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
JavaScript实现移动端拖动元素
Nov 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php学习之运算符相关概念
2011/06/09 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
在Django中创建第一个静态视图
2015/07/15 Python
Python学生信息管理系统修改版
2018/03/13 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
python 切换root 执行命令的方法
2019/01/19 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
上海期货面试题
2014/01/31 面试题
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技