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

2023-07-31 23:56:04 71

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

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

其实是一个很简单的需求，本来以为在FCKeditor可以很容易的实现
在Google上搜索自定义按钮,插件开发，经过近二个小时的摸索最终还是没有实现不知是我太笨还是自定义插件太难啦

通过JS方式来处理

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

添加/删除复选框

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


//"添加/删除复选框"点击时如果按钮选中则添加"{#book#}"字符串到FCK内容里，反之删除字符串
//lineBook为FCK的ID号
functionchk_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#}","");
}
}
}//endfunctionchk_lineBook()
//内容里如果有{#book#}则选中"添加/删除复选框"
if(document.getElementById('txtContent').value.indexOf('{#book#}')>=0
&&window.FCKeditorAPI!==undefined
&&FCKeditorAPI.GetInstance('txtContent')!==undefined){
document.getElementById('lineBook').checked=true;
}

参考：

官网：http://ckeditor.com/

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

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

接着给大家分享一下JS操作Fckeditor的一些常用方法

//向编辑器插入指定代码
functioninsertHTMLToEditor(codeStr){
varoEditor=FCKeditorAPI.GetInstance("content");
oEditor.InsertHtml(codeStr);//"html"为HTML文本
}
//获取编辑器中HTML内容
functiongetEditorHTMLContents(){
varoEditor=FCKeditorAPI.GetInstance("content");
return(oEditor.GetXHTML(false));
}
//获取编辑器中文字内容
functiongetEditorTextContents(){
varoEditor=FCKeditorAPI.GetInstance("content");
return(oEditor.EditorDocument.body.innerText);
}
//设置编辑器中内容
functionSetEditorContents(ContentStr){
varoEditor=FCKeditorAPI.GetInstance("content");
oEditor.SetHTML(ContentStr);
}
//向编辑器插入指定代码
functioninsertHTMLToEditor(codeStr){
varoEditor=FCKeditorAPI.GetInstance("content");
if(oEditor.EditMode==FCK_EDITMODE_WYSIWYG){
oEditor.InsertHtml(codeStr);
}else{
returnfalse;
}
}
//统计编辑器中内容的字数
functiongetLength(){
varoEditor=FCKeditorAPI.GetInstance("content");
varoDOM=oEditor.EditorDocument;
variLength;
if(document.all){
iLength=oDOM.body.innerText.length;
}else{
varr=oDOM.createRange();
r.selectNodeContents(oDOM.body);
iLength=r.toString().length;
}
alert(iLength);
}
//执行指定动作
functionExecuteCommand(commandName){
varoEditor=FCKeditorAPI.GetInstance("content");
oEditor.Commands.GetCommand(commandName).Execute();
}

到此这篇关于使用Js获取、插入和更改FCKeditor编辑器里的内容的文章就介绍到这了,更多相关Js操作FCKeditor编辑器内容请搜素毛票票以前的文章或下面相关文章，希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐