FCKEditor定制两则

阅读更多

FCKEditor是一个非常强大的RichEditor, 它提供的在线编辑功能极其丰富, 不过有时候我们会根据项目需要进行一些定制, 最近的一个项目就涉及到两个定制的地方
第一个地方,希望对在页面中插入本地图片, 这个就是要修改image dialog, 我们首选找到FCKEditor\editor\dialog\fck_image文件夹, 对话框中的事件脚本都写在fck_image.js里面, 由于我们只是插入本地图片, 因为我们只需要一个图像tab, 因此将其他的tab页去掉, 只保留这一句:

// Set the dialog tabs.
window.parent.AddTab( 'Info', FCKLang.DlgImgInfoTab ) ;

接下来就是要修改dialog文件夹下的html模板文件:fck_image.html, 只保留divInfo DIV下的内容, 其他几个div都干掉, 在divInfo中有一个浏览服务器的按钮, 那个我们也要去掉, 加上我们自己打开本地文件的file input元素,修改如下:

	
		

		

	


	
		Short Description

		

	

这里我们定义了一个方法:SetImage(this.value), 需要在fck_image.js中加上改方法:

function SetImage(value){
	value = value.replace(/\\/g,"/");
	txtUrl.value = "file:///" + value;
	UpdatePreview();
}

由于FCKEditor的架构非常清晰, 代码也是通俗易懂, 因此修改起来还是非常容易的, 这样我们的修改就大功告成了

接下来我们还有一个需要修改的就是定义toolbar, 比如这里我们需要去掉flash这个toolbar item, 修改更简单, 只需要在fckconfig.js中将:

FCKConfig.ToolbarSets["Default"] = [
	['Source','DocProps','-','Save','NewPage','-'],
	['Cut','Copy','Paste','PasteText','PasteWord','-'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
	['OrderedList','UnorderedList','-','Outdent','Indent'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Link','Unlink'],
	['Image','Flash','Table','Rule','SpecialChar','PageBreak'],
	['Style','FontFormat','FontName','FontSize'],
	['TextColor','BGColor']
] ;

里面的'Flash'去掉即可