ueditor 定制使用

ueditor截取其中的小功能

ueditor 是一个功能和强大的富文本编辑器,有时候我们只需要其中的图片视频还有附件上传的功能,我们该如何定制截取呢?

      以下是我个人的一些经验和尝试:
                     先上图:如何简化Ueditor(包括隐藏编辑框,底部状态框,定制toolsbar的按钮)
                    

        页面代码如下,关于代码中的注释都是我验证以后加入的,一定要认真看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.js"> </script>
    <script type="text/javascript" src="jquery.js"> </script>
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
    <style type="text/css">
         .edui-default .edui-editor-bottomContainer {
    		overflow: hidden;
    		display:none;
		}
		.edui-default .edui-editor-bottomContainer table {
		    width: 100%;
		    height: 0;
		    overflow: hidden;
		    border-spacing: 0;
		    display:none;
		}
		.edui-default .edui-editor-bottomContainer td {
		    white-space: nowrap;
		    border-top: 1px solid #ccc;
		    line-height: 20px;
		    font-size: 12px;
		    font-family: Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
		     display:none;
		}
		.edui-default .edui-editor-wordcount {
		    text-align: right;
		    margin-right: 5px;
		    color: #aaa;
		     display:none;
		} /* 以上的样式是为了隐藏编辑器底部的状态栏 */
    </style>
</head>
<body>

<p>测试渲染</p>
<div style="float:left;">
	<div style="float:left;width:80px;">定制按钮:</div>
	<div id="myeditorContainer" style="float:left;width:150px;"></span>
</div>

<div id="jsonShow">
</div>
<script type="text/javascript">
	$(function(){
		  var editorOption = {
			        //这里可以选择自己需要的工具按钮名称,从ueditor.config.js中选择适合自己的按钮
			        toolbars: [['insertvideo','insertimage','simpleupload','attachment']],
			        elementPathEnabled: false,
			        initialFrameWidth:130 //设置控件的宽度
			    };
		
		$("#myeditorContainer").append(" <div id=\"editor-img\" style=\"display:block\"></div>");
	 	var ue = UE.getEditor('editor-img',editorOption);
	 	ue.addListener("ready", function () {
	    	 $("#edui1_iframeholder").hide();//隐藏编辑区域
	    	 ue.execCommand('serverparam', {
	    		 'classid':'xxx'
	    		});
		});
	 	
	 	//多图片上传回显数据
	  	ue.addListener('beforeInsertImage', function (t, arg) {
			console.log(t);
			console.log(arg);
		}); 
	  	//但图片上传,修改 ueditor.all.js UE.plugin.register('simpleupload', function (){}
	    //修改它的回调函数 function callback(){}中的json处理
	});
 </script>
</body>
</html>


百度编辑器UEditor .NET版 v1.3.5,Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点。Ueditor基于BSD开源协议,除了具有代码精简、加载迅速的轻量级特质外,还采用了分层理念,使开发者可以根据实际应用和需求自由定制Ueditor编辑器划分为了三层架构。其中,核心层为开发者提供了诸如range、selection、domUtils类的底层API接口,中间的命令插件层不仅提供了大量的基础command,还允许开发者基于核心层进行command命令的开发,而面向用户端的界面层则可以提供自由定制的用户交互界面。Ueditor开源编辑器这种拥有可配性的模式,令开发者能够根据自身需要接入任何一层进行开发。 百度编辑器 v1.3.5 更新日志: 新增功能 asp后台的支持 添加本地自动保存功能 增加数据可视化展示功能 编辑器实例上添加isFocus,blur方法 新增在chrome下针对片的拖拽宽高功能 新增在高端浏览器下,qq截粘贴上传,拖拽片到编辑上传 添加表格插入列标题功能 添加设置表格可排序功能,支持表格在预览页排序 添加生成目录功能 优化修复 ie8以上版本使用w3cRange 使用grunt作为打包工具 修复了过滤规则对于script/style的内容的转码 自动寻址功能重构 修复下拉菜高度问题 针对ie默认带有的autolink功能,添加开启禁用选项,创建时传入autolink:false就可禁用ie的autolink功能 支持插入动态地 **API文档更新** 上传路径可配置,增加前后端路径验证 对uparse进行了拆分重构 随下载包提供各种功能说明文档 背景颜色功能重构,可以在预览页显示背景 重写了查找替换插件,解决ff下window.find方法失效的问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值