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 相关文章推荐
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
javascript中this指向详解
Apr 23 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
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
编写自己的php扩展函数
2006/10/09 PHP
Zend Guard一些常见问题解答
2008/09/11 PHP
ucenter通信原理分析
2015/01/09 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
全球性的在线商店:Vogca
2019/05/10 全球购物
舞蹈教师自荐信
2014/01/27 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
刑事和解协议书范本
2014/11/19 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
爱国主义主题班会
2015/08/14 职场文书
导游词之张家界
2019/10/31 职场文书
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫