ueditor 定制使用

最新推荐文章于 2025-06-20 11:46:17 发布

原创最新推荐文章于 2025-06-20 11:46:17 发布 · 4.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ueditor #单图 #多图 #上传 #功能定制

javaweb ueditor 专栏收录该内容

3 篇文章

订阅专栏

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>