使用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

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

//向编辑器插入指定代码 function insertHTMLToEditor(codeStr){
      VAR oEditor = FCKeditorAPI.GetInstance("content");
     oEditor.InsertHtml(codeStr);
 // "html"为HTML文本}
//获取编辑器中HTML内容function getEditorHTMLContents() {
     var oEditor = FCKeditorAPI.GetInstance("content");
     return(oEditor.GetXHTML(false));
}
// 获取编辑器中文字内容function getEditorTextContents() {
     var oEditor = FCKeditorAPI.GetInstance("content");
     return(oEditor.EditorDocument.body.innerText);
}
// 设置编辑器中内容function SetEditorContents(ContentStr) {
     var oEditor = FCKeditorAPI.GetInstance("content") ;
     oEditor.SetHTML(ContentStr) ;
}
//向编辑器插入指定代码 function insertHTMLToEditor(codeStr){
       var oEditor = FCKeditorAPI.GetInstance( "content ");
   if (oEditor.EditMode==FCK_EDITMODE_WYSIWYG){
         oEditor.InsertHtml(codeStr);
   }
else{
         return false;
   }
 }
 //统计编辑器中内容的字数 function getLength(){
       var oEditor = FCKeditorAPI.GetInstance( "content ");
       var oDOM = oEditor.EditorDocument;
       var iLength ;
   if(document.all){
         iLength = oDOM.body.innerText.length;
   }
else{
         var r = oDOM.createRange();
         r.selectNodeContents(oDOM.body);
         iLength = r.toString().length;
   }
       alert(iLength);
 }
 //执行指定动作 function ExecuteCommand(commandName){
       var oEditor = FCKeditorAPI.GetInstance( "content ") ;
       oEditor.Commands.GetCommand(commandName).Execute() ;
 }
    

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

• JS操作Fckeditor的一些常用方法(获取、插入等)
• @L_777_1@
• js判断FCKeditor内容是否为空的两种形式
• FCKeditorAPI 手册 js操作获取等
• fckeditor常用Js,获取fckeditor内容,统计fckeditor字数,向fckeditor写入指定代码
• Js FCKeditor的值获取和修改的代码小结
• javascript fckeditor编辑器取值与赋值实现代码
• FCKEditor常用Js代码,获取FCK内容,统计FCK字数,向FCK写入指定代码
• FCKeditor提供了一个完整的JavaScript API
• javascript 获取FCKeditor内容
• extjs fckeditor集成代码
• JSP 页面中使用FCKeditor控件(js用法)
• jsp fckeditor 上传中文图片乱码问题的解决方法

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！