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基本对象
Jan 11 Javascript
JS实现日期加减的方法
Nov 29 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
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/12/03 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
php中__toString()方法用法示例
2016/12/07 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
python中子类继承父类的__init__方法实例
2016/12/15 Python
Python用for循环实现九九乘法表
2018/05/31 Python
numpy中矩阵合并的实例
2018/06/15 Python
python递归函数绘制分形树的方法
2018/06/22 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
python使用建议技巧分享(三)
2020/08/18 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
班主任寄语大全
2014/04/04 职场文书
争先创优公开承诺书
2014/08/30 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
先进党员事迹材料
2014/12/24 职场文书
敬老院活动感想
2015/08/07 职场文书
2016教师节问候语
2015/11/10 职场文书
分家协议书范本
2016/03/22 职场文书