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

之前有个项目，用到了FCKeditor编辑器，需求是在编辑器里加个自定义按钮，点一下就能删除或添加内容。本来以为很简单，结果折腾了俩小时，愣是没搞出来——到底是我太笨，还是这插件开发本身就太难？后来换了个思路，直接通过JS操作编辑器内容，事情反而一下子就解决了。

通过JS方式来处理

思路其实不复杂：在页面里放一个checkbox，选中时往编辑器内容里插入一个特殊标记“{#book#}”，取消选中时再把它删掉。这个标记后续会被替换成其他内容，相当于一个占位符。

添加/删除复选框

对应的JS逻辑也很直接，核心就是获取编辑器实例，然后操作它的innerHTML。注意这里的'txtContent'是FCKeditor的控件ID。

这个方案的好处是绕开了插件开发，直接在页面层面解决问题，省时省力。当然，如果你需要更复杂的交互，还是得回头啃插件开发文档，但大部分场景下，JS直接操作已经够用。

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

既然已经用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() ; 
}

这些方法覆盖了插入、获取、设置、统计字数、执行命令等常见场景，基本上日常开发够用了。如果遇到更特殊的需求，再去翻官方文档也不迟。话说回来，FCKeditor虽然老了一点，但核心API设计得挺清晰的，用熟了之后效率很高。