Js를 사용하여 FCKeditor 편집기의 컨텐트 가져오기, 삽입 및 변경

이전에 한 시스템에서 FCKeditor 편집기를 사용했는데, 프로젝트 수요로 인해 FCKeditor에 사용자 정의 단추를 추가하여 자신의 수요를 실현하기 위해
주로 이 단추를 눌렀을 때 FCKeditor 편집기의 내용을 삭제하거나 추가합니다
사실 매우 간단한 수요인데, 원래는 FCKeditor에서 쉽게 실현될 수 있을 것이라고 생각했다
Google에서 사용자 정의 단추, 플러그인 개발을 검색하고 2시간 가까이 탐색한 결과 결국 이루어지지 않았습니다. 제가 너무 멍청한지 사용자 정의 플러그인이 너무 어려운지 모르겠습니다.
JS 방식으로 처리
1. 페이지에 checkbox 요소를 추가하고 이벤트를 바인딩합니다. 이 요소를 선택하면 FCKeditor 내용에 "{#book#}"문자열을 추가합니다. (이 문자열은 적당한 때에 다른 내용으로 바인딩됩니다.) 선택을 취소하면 삭제됩니다.
확인란 추가/제거
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 편집기를 조작하는 내용에 관해서는 저희 이전의 글이나 아래의 관련 글을 검색해 주십시오. 앞으로 많은 응원 부탁드립니다!