Jsを使用してFCKeditorエディタでコンテンツを取得、挿入、変更する。
あるシステムで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エディタのコンテンツは、スクリプトハウスの過去の記事または以下の関連記事を検索してください、あなたは将来的にもっとスクリプトハウスをサポートすることを願っています!.
関連
-
右スクロールバーを削除するSyntaxHighlighterメソッド
-
UEditorリッチテキストエディタでjsが画像のアドレスを取得する。
-
ueditor1.2.1 ハイパーリンクのデフォルトを変更する、ueditor editor open link in new window
-
オンラインエディタeWebEditorをIE8,IE9に対応させる方法
-
FCKeditor + SyntaxHighlighterでコードハイライトプラグインを作る
-
ckeditorプラグインの簡単な開発例
-
最新版CKEditorの設定方法とプラグイン(Plugin)の書き方例
-
ueditorのエディタが画像をアップロードできない問題の解決法
-
ブラウザfckeditorは、画像をアップロードすることはできません後IE9は、ポップアップフローティングコンテンツは、解決策を表示しません
-
CKEditorをアンエスカレーションする2つの方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
UEditorエディターの使用を前提とした開発 細かい配慮がなされている
-
UeditorとCKeditorの使用方法と設定方法
-
IE10、IE11でのFCKEditorの非互換性の問題を解決しました。
-
Baidu ueditorコンポーネント画像をアップロードした後、どのようにimgにalt属性を設定する
-
fckeditor エディタでのカスタムページ区切り
-
Ueditor BaiduエディターのHtmlモード自動置換スタイルソリューション
-
デフォルトの新しいウィンドウを開く修正方法にリンクを追加するdecmsのckeditorエディタ
-
UEditorエディターでカスタムアップロード画像やファイルのパスを変更する方法
-
FckeditorエディタによるPHP環境での画像アップロード設定 詳細チュートリアル
-
Baiduのエディタueditorのフォアグラウンドコードハイライトは、自動的に解決策をラインアップすることはできません