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读取cookies信息(记录用户名)
Jan 10 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
javascript清空table表格的方法
May 14 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
js实现网页定位导航功能
Mar 07 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
浅析VUE防抖与节流
Nov 24 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学习之PHP变量
2006/10/09 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
js如何获取兄弟、父类等节点
2014/01/06 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python 功能和特点(新手必学)
2015/12/30 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
外贸采购员求职的自我评价
2013/11/26 职场文书
申报职称专业技术个人的自我评价
2013/12/12 职场文书
税务干部鉴定材料
2014/02/11 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
博士生导师推荐信
2014/07/08 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
装配出错检讨书
2014/09/23 职场文书
海弦WR-800F
2022/04/05 无线电
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android