百度編輯器UEditor自定義工具欄Toolbars

百度編輯器默認的工具欄如圖:javascript

默認很是強大,功能衆多,可是不少功能都是不經常使用的(好比google地圖,被河蟹了),這裏對其進行改造,省去不經常使用的。css

在其配置文件 ueditor/ueditor.config.js 中(大約35行),咱們發現工具欄的默認配置項 toolbars,是【】形式包裹的數據格式。對不經常使用的功能,直接在【[ ]】數組裏面刪除html

一、默認的工具欄圖標是一行排列的,先對其進行分組,分爲三行java

方法爲將外圍【】拆分爲二維數組形式,即將外圍【】包含的內部 [],拆分爲三個 [] 並列的形式:數組

效果如圖:編輯器

二、精簡型工具欄配置以下:工具

效果如圖:ui

 

附:百度編輯器調用,及初始化方法google

<!DOCTYPE html>
<html>
<head>
	<title>UEditor</title>
	<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="ueditor/ueditor.all.js"></script>
	<script type="text/javascript" src="ueditor/ueditor.parse.js"></script>
	<link rel="stylesheet" href="ueditor/themes/default/css/ueditor.css"/>
</head>
<body>
	<script type=\"text/javascript\">
		//初始化編輯器並傳入參數,自定義工具欄Toolbars
		var editor = new baidu.editor.ui.Editor({
			textarea:'$textareaid',
			toolbars:[
				[
	                'fullscreen', 'source', '|', 'bold', 'italic', 'link', 'unlink', '|',
	                'insertorderedlist', 'insertunorderedlist',  '|',
	                'selectall', 'removeformat', 'formatmatch', 'cleardoc', '|',                
	                'searchreplace', 
            	]			
			]
		});
    	editor.render('$textareaid'); 
	</script>

	<textarea name="content" id="textareaid">……</textarea>

</body>
</html>

初始化方法也能夠用 UE.getEditor('textareaid', {參數名:參數值}) 方式,多個 參數鍵值對 之間用逗號隔開。如:code

相關文章
相關標籤/搜索