您的位置：首页 > 产品设计 > UI/UE

ueditor 定制使用

2015-07-22 14:24 676 查看

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 单图多图上传功能定制

相关文章推荐

新的分享

章节导航