最新版CKEditorの設定方法とプラグイン(Plugin)の書き方例
FCKEditorはjsフレームワークを書き換えてCKEditorと改名しました。初めてCKEditorのホームページでデモのインターフェースを見たとき、CKEditorのフレンドリーなインターフェースと強力な機能に圧倒されました。CKEditorは今日インターネット上で最高のオープンソースマルチメディアHTMLエディタであることは間違いない。
この記事では、CKEditorの設定方法と、記事のページネーションプラグインを例にしてCKEditor Pluginの書き方を簡単に説明します。公式サイトより http://ckeditor.com/download CKEditorの最新版をダウンロードし、解凍してください。
1. CKEditorのメソッドを呼び出す
コアとなるjsファイルをページに読み込みます: <script type="text/javascript" src="ckeditor/ckeditor. js"></script>, textareaを通常の方法で配置します。例えば、 & lt; textarea id="editor1″ name="editor1″ rows="10" cols="80">Initialize html content</textarea>.Textarea id="editor1″ name="とした場合、editは、"edit "となり、"textarea "は、"edit "となります。
そして、textareaの後にjsを書きます: <script type="text/javascript">CKEDITOR.replace('editor1');</script>
その他の呼び出しは、_samples ディレクトリで例を見ることができます。
2. パーソナライズツールバーの設定
ckeditorのデフォルトツールバーの多くは、一般的に使用されていない、または中国語に対応していないものが多くあります。これは、デフォルトツールバーを設定することで実現できます。最もクリーンな方法は、設定ファイルconfig.jsを直接修正することです。私のconfig.jsは、以下のように読み取れます。
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. for example:
// config.language = 'fr';
config.uiColor = '#ddd';
config.toolbar = 'Cms';
config.toolbar_Cms =
[
['Source','-'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-'],
['Undo','Redo','-','Find','Replace','RemoveFormat'], ['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule', '-'],['Maximize'],
'/',
['Bold','Italic','Underline','Strike','-'],
['FontSize'], ['TextColor','BGColor'],
['NumberedList','BulletedList','-','Outdent','Indent','pre'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['PageBreak', 'Page'].
];
config.filebrowserUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
config.fontSize_sizes = '10/10px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;28/28px;32/32px;48/48px;';
config.extraPlugins = 'apage';
};
3.エディタのテキストを14pxに変更する(デフォルトの12pxは中国語には不向きです)
1)ビジュアルエディターのデフォルトのフォントサイズ:ルートディレクトリのcontents.cssを修正し、bodyのfont-size: 12pxをfont-size: 14pxに変更します。
2) Source view font size: skinskamaeditor.css を修正し、最後に一文を追加: .cke_skin_kama textarea.cke_source { font-size:14px; }.
4. プラグイン作成手順とコード例
1) pluginsディレクトリにapageフォルダを新規作成し、apageの下に以下の内容のファイル:plugin.jsを新規作成します。
CKEDITOR.plugins.add( 'apage',
{
init : function( editor )
{
// Add the link and unlink buttons.
editor.addCommand( 'apage', new CKEDITOR.dialogCommand( 'apage' ) );
editor.ui.addButton( 'Page',
{
//label : editor.lang.link.toolbar,
label : 'Page",
//icon: 'images/anchor.gif',
command : 'apage'
} );
//CKEDITOR.dialog.add( 'link', this.path + 'dialogs/link.js' );
CKEDITOR.dialog.add( 'apage', function( editor )
{
return {
title : 'Article pagination',
minWidth : 350,
minHeight : 100,
contents : [
{
id : 'tab1',
label : 'First Tab',
title : 'First Tab',
elements :
[
{
id : 'pagetitle',
type : 'text',
label : 'Please enter the title of the next article<br /> (no input default use the current title + number form)'
}
]
}
],
onOk : function()
{
editor.insertHtml("[page="+this.getValueOf( 'tab1', 'pagetitle' )+"]");
}
};
} );
},
requires : [ 'fakeobjects' ]
} );
(2)ツールバーでページを追加し、宣言の構成では、拡張プラグインを追加する config.extraPlugins = 'apage'、これを達成するために2つの方法がありますが、メソッド1は、直接config.jsサンプルコード上記のこの記事の例では、追加しました。
CKEDITOR.replace( 'editor1', { extraPlugins : 'examenLink', toolbar : [ ['Undo','Redo','-','Cut','Copy','Paste'], ['ExamenLink','Bold',' Italic','Underline',], ['Link','Unlink','Anchor','-','Source'], ['Page'] ] });
この時点で、エディタに余分な空白のボタンが表示されているはずです。
空白のボタンに対応する方法は2つあります。
方法1:プラグインのコード、プラグインを修正し、アイコンが存在するものとして定義する。
方法2:エディタにLabelのテキストを表示させる。エディタを設置したページにcssを追加する必要があります(注:cke_button_apageの名前は実際のものと同じままです)。
<style type="text/css">
.cke_button_apage .cke_icon { display : none !important; }
.cke_button_apage .cke_label { display : inline !important; }
</style>
この記事のようにページネーションを挿入するだけで、ヘッダーを埋める必要がない場合は、プラグインのコードを修正するだけなのでさらに簡単です。この記事で紹介したすべてのコードは、RedMac Software チームの wiki でご覧ください。 http://www.teamwiki.cn/js/ckeditor_config_plugin
CKEditorの設定とプラグインの書き方例
CKEditorの構成
config.js
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. for example:
// config.language = 'fr';
config.uiColor = '#ddd';
config.toolbar = 'Cms';
config.toolbar_Cms =
[
['Source','-'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-'],
['Undo','Redo','-','Find','Replace','RemoveFormat'], ['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule', '-'],['Maximize'],
'/',
['Bold','Italic','Underline','Strike','-'],
['FontSize'], ['TextColor','BGColor'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['PageBreak','-','Page']
];
config.filebrowserUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
config.fontSize_sizes = '10/10px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;28/28px;32/32px;48/48px;';
config.extraPlugins = 'apage';
};
CKEditor paginationプラグイン1:次ページの記事タイトルを入力するようにする
CKEDITOR.plugins.add( 'apage',
{
init : function( editor )
{
// Add the link and unlink buttons.
editor.addCommand( 'apage', new CKEDITOR.dialogCommand( 'apage' ) );
editor.ui.addButton( 'Page',
{
//label : editor.lang.link.toolbar,
label : "Page",
//icon: 'images/anchor.gif',
command : 'apage'
} );
//CKEDITOR.dialog.add( 'link', this.path + 'dialogs/link.js' );
CKEDITOR.dialog.add( 'apage', function( editor )
{
return {
title : 'Article pagination',
minWidth : 350,
minHeight : 100,
contents : [
{
id : 'tab1',
label : 'First Tab',
title : 'First Tab',
elements :
[
{
id : 'pagetitle',
type : 'text',
label : 'Please enter the title of the next article<br /> (no input default use the current title + number form)'
}
]
}
],
onOk : function()
{
editor.insertHtml("[page="+this.getValueOf( 'tab1', 'pagetitle' )+"]");
}
};
} );
},
requires : [ 'fakeobjects' ]
} );
CKEditor paginationプラグイン2:改ページを直接挿入する
エディタのデフォルトのトランスコーディングのため、使用中は'page'から'を削除する必要があります。
CKEDITOR.plugins.add( 'apage',
{
var cmd = {
exec:function(editor){
editor.insertHtml("[[page]]");
}
}
init : function( editor )
{
// Add the link and unlink buttons.
editor.addCommand( 'apage', cmd );
editor.ui.addButton( 'Page',
{
//label : editor.lang.link.toolbar,
label : "Page",
//icon: 'images/anchor.gif',
command : 'apage'
} );
},
requires : [ 'fakeobjects' ]
} );
関連
-
オンラインエディタeWebEditorをIE8,IE9に対応させる方法
-
プラグイン開発方式のCKEDITOR二次開発
-
ckeditor syntaxhighlighter コードハイライタープラグイン 設定 共有
-
ZeroClipboardを使用したクロスブラウザでのクリップボードへのコピー問題の解決法
-
UEditorエディターでカスタムアップロード画像やファイルのパスを変更する方法
-
FckeditorエディタによるPHP環境での画像アップロード設定 詳細チュートリアル
-
FCKeditorがクロームで表示されない
-
SyntaxHighlighterに新しい言語を追加するための方法
-
CKEditorをアンエスカレーションする2つの方法
-
BrowserSyncで自動リフレッシュ開始
最新
-
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リッチテキストエディタでjsが画像のアドレスを取得する。
-
SyntaxHighlighterのコードハイライトで改行がない場合の対処法
-
IE10、IE11でのFCKEditorの非互換性の問題を解決しました。
-
ueditor1.2.1 ハイパーリンクのデフォルトを変更する、ueditor editor open link in new window
-
fckeditor エディタでのカスタムページ区切り
-
Baiduコンパイラのjsonエラーの問題を迅速に解決する方法
-
Ueditor BaiduエディターのHtmlモード自動置換スタイルソリューション
-
Baiduのエディタueditorコンテンツエディタが自動的にPタグ、およびPタグの置換を設定する
-
BaiduのUEditorは、統計ワードカウントの右下隅を変更するには、HTMLスタイルが含まれています
-
アメニティにおすすめの優秀なフロントエンド開発エディター数名