简称UM,是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑器。 UM的主要特点就是容量和加载速度上的改变,主文件的代码量为139k,而且放弃了使用传统的iframe模式,采用了div的加载方式, 以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧,贴吧每天几亿的pv是对UM各种指标的最好测试平台。 当然随着代码的减少,UM的功能对于UE来说还是有所减少,但我们经过调研和大家对于UM提出的各种意见,提供了现在UM的功能版本, 虽然有删减,但也有增加,比如拖拽图片上传,chrome的图片拖动改变大小等。让UM能在功能和体积上达到一个平衡。UM还会提供 CDN方式,减少大家部署的成本。我们的目标不仅是要提高在线编辑的编辑体验,也希望能改变前端技术中关于富文本技术的门槛,让大家不再觉得这块是个大坑。
官网地址:http://ueditor.baidu.com/website/umeditor.html
JSP 使用说明:http://fex.baidu.com/ueditor/#server-jsp
组件包
template.min.js
umeditor.config.js
umeditor.min.js
zh-cn.js
请输入内容:
<form> <script type="text/plain" id="myEditor" style="width: 100%;height: 300px;"> <p>回显数据建议直接写在便签内,不建议使用API</p> </script> </form> <div class="row m-t-md"> <div class="col-sm-12"> <button id="get_cont" type="button" class="btn btn-sm btn-info">获取内容(带html)</button> </div> </div>
组件:
<script src="../js/plugins/umeditor/third-party/template.min.js" type="text/javascript"></script>
<script src="../js/plugins/umeditor/umeditor.config.js" type="text/javascript"></script>
<script src="../js/plugins/umeditor/umeditor.min.js" type="text/javascript"></script>
<script src="../js/plugins/umeditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
/*zdy-首行缩进*/
UM.registerUI('indent',function(name) {
var _this=this;
var $btn = $.eduibutton({
icon : name,
title: '首行缩进',
click : function(){
var reg_=/^<img/,
len_=_this.selection.getStartElementPath().length,
t_=$(_this.selection.getStartElementPath()[len_-2]);
t_.hasClass('js-indent')?t_.removeClass('js-indent').css('text-indent','0em'):
reg_.test(t_.html())?'':t_.addClass('js-indent').css('text-indent','2em');
}
});
this.addListener('selectionchange',function(){
//切换为不可编辑时,把自己变灰
var state = this.queryCommandState(name);
$btn.edui().disabled(state == -1).active(state == 1);
});
return $btn;
});
var ums = UM.getEditor('myEditor',{
toolbar:[
'source | undo redo | bold italic underline strikethrough | forecolor backcolor | indent image horizontal removeformat ',
'| justifyleft justifycenter justifyright |',
'insertorderedlist insertunorderedlist | paragraph | fontfamily fontsize' ,
],
autoHeightEnabled:false,
textarea:'xxx',
autoFloatEnabled:false
});
//获取内容带格式的
$('#get_cont').click(function(){
var arr = [];
arr.push(UM.getEditor('myEditor').getContent());
alert(arr.join("\n"));
});
组件: <link rel="stylesheet" href="../css/plugins/umeditor/themes/default/css/umeditor.css" />
创建编辑器:UM.getEditor('ID')
摧毁:destroy()
获取内容(带标签):getContent()
获取内容(纯文本):getContentTxt()
获取内容(纯文本,带格式):
getPlainTxt()
是否有内容:hasContents()
是否有焦点:isFocus()
写入内容:setContent('string', boolean) //为true时是追加内容
插入HTML内容:execCommand('insertHtml', 'string')
禁用/启用编辑:setDisabled('fullscreen')/setEnabled()
对月配置项的修改视情况而定: 1.在实例化编辑器时传入对应参数; 2.也可在 umeditor.config.js 中配置; //图片上传配置区 ,imageUrl:URL+"jsp/imageUp.jsp" //图片上传提交地址 ,imagePath:URL + "jsp/" //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置 ,imageFieldName:"upfile" //图片数据的key,若此处修改,需要在后台对应文件修改对应参数 ,textarea:'editorValue' // 提交表单时,服务器获取编辑器提交内容的所用的参数 ,toolbar:[] //工具栏 ,initialContent:'欢迎使用UMEDITOR!' //初始化编辑器的内容,也可以通过textarea/script给值,看官网例子 ,focus:false //初始化时,是否让编辑器获得焦点true或false ,readonly : false //编辑器初始化结束后,编辑区域是否是只读的,默认是false ,autoFloatEnabled:true //是否保持toolbar的位置不动,默认true