FCKEditor是一个非常强大的RichEditor, 它提供的在线编辑功能极其丰富, 不过有时候我们会根据项目需要进行一些定制, 最近的一个项目就涉及到两个定制的地方
第一个地方,希望对在页面中插入本地图片, 这个就是要修改image dialog, 我们首选找到FCKEditor\editor\dialog\fck_image文件夹, 对话框中的事件脚本都写在fck_image.js里面, 由于我们只是插入本地图片, 因为我们只需要一个图像tab, 因此将其他的tab页去掉, 只保留这一句:
接下来就是要修改dialog文件夹下的html模板文件:fck_image.html, 只保留divInfo DIV下的内容, 其他几个div都干掉, 在divInfo中有一个浏览服务器的按钮, 那个我们也要去掉, 加上我们自己打开本地文件的file input元素,修改如下:
这里我们定义了一个方法:SetImage(this.value), 需要在fck_image.js中加上改方法:
由于FCKEditor的架构非常清晰, 代码也是通俗易懂, 因此修改起来还是非常容易的, 这样我们的修改就大功告成了
接下来我们还有一个需要修改的就是定义toolbar, 比如这里我们需要去掉flash这个toolbar item, 修改更简单, 只需要在fckconfig.js中将:
里面的'Flash'去掉即可
第一个地方,希望对在页面中插入本地图片, 这个就是要修改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'去掉即可