疯狂的菠菜

2008-01-20

FCKEditor定制两则

关键字: 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元素,修改如下:

<tr>
	<td>
		<input id="btnBrowse"  type="file" value="Browse Server"
						fcklang="DlgBtnBrowseServer" style="width: 100%;" onChange = "SetImage(this.value)"/><br />
		<input id="txtUrl" style="width: 100%;display:none" type="text" onblur="UpdatePreview();" /><br />
	</td>
</tr>
<tr>
	<td>
		<span fcklang="DlgImgAlt">Short Description</span><br />
		<input id="txtAlt" style="width: 100%" type="text" /><br />
	</td>
</tr>

这里我们定义了一个方法: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'去掉即可