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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
javascript Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
js中的闭包实例展示
Nov 01 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
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
求职简历中个人的自我评价
2013/12/01 职场文书
一句话工作感言
2014/03/01 职场文书
分层教学实施方案
2014/03/19 职场文书
学校献爱心活动总结
2014/07/08 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
股权投资协议书
2016/03/23 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android