使用Js获取和更改FCKeditor编辑器里的内容

之前在一个系统里使用了FCKeditor编辑器，由于项目需求需要在FCKeditor里添加一个自定义的按钮用于实现自己的需求

主要是在点击该按钮时删除或添加FCKeditor编辑器里的内容

其实是一个很简单的需求，本来以为在FCKeditor可以很容易的实现

在Google上搜索自定义按钮,插件开发，经过近二个小时的摸索最终还是没有实现不知是我太笨还是自定义插件太难啦

无奈只能通过JS方式来处理

1.在页面中添加checkbox元素并绑定事件,选中该元素时将在FCKeditor内容里添加"{#book#}"字符串(该字符串会在适当的时候被替换成其他内容),取消选中时则删除

<label><input type="checkbox" id="lineBook"   onclick="chk_but();"/>添加/删除复选框</label> 

　　

2.添加Js处理FCKeditor内容(添加或删除"{#book#}"字符串),'txtContent'为FCKeditor的ID控控件ID

<script type = "text/javascript" >
//"添加/删除复选框"点击时如果按钮选中则添加"{#book#}"字符串到FCK内容里，反之删除字符串
//lineBook为FCK的ID号
function chk_but() {
	if (window.FCKeditorAPI !== undefined && FCKeditorAPI.GetInstance('txtContent') !== undefined) {
		if (document.getElementById('lineBook').checked) {
			FCKeditorAPI.GetInstance('txtContent').EditorDocument.body.innerHTML += "{#book#}";
		} else {
			FCKeditorAPI.GetInstance('txtContent').EditorDocument.body.innerHTML = FCKeditorAPI.GetInstance('txtContent').EditorDocument.body.innerHTML.replace("{#book#}", "");
		}
	}
} //end function chk_lineBook()
//内容里如果有{#book#}则选中"添加/删除复选框"
if (document.getElementById('txtContent').value.indexOf('{#book#}') >= 0 
	&& window.FCKeditorAPI !== undefined 
	&& FCKeditorAPI.GetInstance('txtContent') !== undefined) {
	document.getElementById('lineBook').checked = true;
} 
</script>

　　

参考：

官网：http://ckeditor.com/

获取或更改内容值：http://bbs.csdn.net/topics/360086762

创建插件：http://docs.cksource.com/FCKeditor_2.x/Developers_Guide/Customization/Plug-ins