富文本编辑器umeditor

简称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