1. ホーム
  2. Web プログラミング
  3. ウェブ編集者

Jsを使用してFCKeditorエディタでコンテンツを取得、挿入、変更する。

2022-01-04 22:52:36

あるシステムでFCKeditorエディターを使用していましたが、プロジェクトの要件により、私のニーズを実装するためにFCKeditorにカスタムボタンを追加する必要がありました。

主な目的は、ボタンがクリックされたときに、FCKeditorエディタにコンテンツを削除または追加することです

実はとてもシンプルな要件で、FCKeditorに簡単に実装できると思ったのですが......。

JSの処理方法

1. チェックボックスが選択されると、FCKeditorのコンテンツに"{#book#}"という文字列を追加し(この文字列はいずれ他のものに置き換えられます)、非選択時にはこれを削除します。

<ブロッククオート

<label><input type="checkbox" id="lineBook" onclick="chk_but();"/> add/remove checkbox</label>

2. FCKeditorのコンテンツ("{#book#}"文字列の追加または削除)を処理するJsを追加、FCKeditorのIDコントロールIDに'txtContent'を追加。

<script type = "text/javascript" >
//"add/remove checkboxes" when clicked if the button is checked add "{#book#}" string to the FCK content, and vice versa remove the string
//lineBook is the ID number of FCK
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()
//check "Add/Remove checkboxes" if there is {#book#} in the content;
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

次に、FckeditorをJSで操作するための一般的な方法を紹介します。

//Insert the specified code into the editor 
function insertHTMLToEditor(codeStr){ 
 var oEditor = FCKeditorAPI.GetInstance("content");
 InsertHtml(codeStr); // "html" for HTML text
}
// Get the HTML content in the editor
function getEditorHTMLContents() {
 var oEditor = FCKeditorAPI.GetInstance("content");
 return(oEditor.GetXHTML(false));
}
// Get the text content in the editor
function getEditorTextContents() {
 var oEditor = FCKeditorAPI.GetInstance("content");
 return(oEditor.EditorDocument.body.innerText);
}
// Set the contents of the editor
function SetEditorContents(ContentStr) {
 var oEditor = FCKeditorAPI.GetInstance("content") ;
 oEditor.SetHTML(ContentStr) ;
}
//Insert the specified code into the editor 
function insertHTMLToEditor(codeStr){ 
  var oEditor = FCKeditorAPI.GetInstance( "content "); 
  if (oEditor.EditMode==FCK_EDITMODE_WYSIWYG){ 
    InsertHtml(codeStr). oEditor; 
  }else{ 
    return false; 
  } 
} 
// count the number of words in the editor 
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); 
} 
//Execute the specified action 
function ExecuteCommand(commandName){ 
  var oEditor = FCKeditorAPI.GetInstance( "content ") ; 
  GetCommand(commandName).Execute() ; 
}

この記事は、FCKeditorエディタのコンテンツを取得、挿入、変更するためにJsを使用することについてのすべてです、より関連するJs操作FCKeditorエディタのコンテンツは、スクリプトハウスの過去の記事または以下の関連記事を検索してください、あなたは将来的にもっとスクリプトハウスをサポートすることを願っています!.