CKEditor学習ノート2(CKEditor基本配置修正)
7533 ワード
第二篇では、この5つの問題をめぐって基本的な配置を行う.
1、ToolbarSetをカスタマイズして、いくつかの機能を削除します.
2、いくつかのよく使うフォントを加えます.
3、「回車」と「Shift+回車」の改行を修正する
4、編集エリアのスタイルファイルを変更する
5、表情写真を交換する
これらの情報の構成は、config.jsファイルを通じて行うことができます.もちろん、自分のプロファイルを作成することもできます.
私のステップを参照してもいいです.
1、まずディレクトリcustomを作成し、次にこのディレクトリ内にmyConfig.jsプロファイルを新規作成します.
2、JavaScript呼び出し方式二(前の内容)は、次のように修正されました.
はい、テーマに切り込むべきです.ハハ.
1、まず、CKEditorが提供しているToolbarSetを調べてみます.
基本ツールセット
ツールセットの名前はtoolbar_と言います.プレフィックス+ツールセット名のために、自分のツールセットを作成します.
注意:削除する時、その構造を破壊しないでください.
myConfig.js
まず理解しなければならない概念があります.
例えば、今はフォーラムサイトがあります.他の人の文章を引用して、自分のコメントを追加してもいいです.(他の人のコメントと自分のコメントを区別すべきです.ですから、他の人のコメントの内容にスタイルを追加したいですが、この時に問題があります.この編集エリアのスタイルを変更するときに役立ちます.
この時にも二つのやり方があります.
方式一:
1、ckeditorディレクトリのcontents.cssファイルを見つけたら、必要なスタイルを追加します.(今はこうすればコードの重複性がありますよ.)
2、myConfig.js追加配置
1、ckeditorディレクトリの下でcssフォルダを作成し、CKEditor編集エリアで使用されるスタイルを置くために、myCss.cssを新規作成します.
2、contents.cssファイル内で、@import url(css/mys.css)を通じて自分のcssファイルを導入します.
3、myConfig.js追加配置
アリ旺表情写真
myConfig.js(タスク:5表情写真の交換)
まずディレクトリをダウンロードして、ckeditor/plugins/smileディレクトリの下に置きます.
今の表情枠は最大幅、最大高さ、スクロールバーの効果が設定されていないので、効果はあまりよくないです.この問題を解決するのはEasyです.CSSファイルを修正する必要があります.
ckeditor/skins/kama/dialog.cssファイル追加
.ckeudialogguu{overflow-y:scroll;overflow-x:hidden;max-width:650 px;max-height:455 px;
皆さんにも分かりますように、私の説明をお願いします.次はCKEditor+CKFind forJava統合についてお話しします.
1、ToolbarSetをカスタマイズして、いくつかの機能を削除します.
2、いくつかのよく使うフォントを加えます.
3、「回車」と「Shift+回車」の改行を修正する
4、編集エリアのスタイルファイルを変更する
5、表情写真を交換する
これらの情報の構成は、config.jsファイルを通じて行うことができます.もちろん、自分のプロファイルを作成することもできます.
私のステップを参照してもいいです.
1、まずディレクトリcustomを作成し、次にこのディレクトリ内にmyConfig.jsプロファイルを新規作成します.
2、JavaScript呼び出し方式二(前の内容)は、次のように修正されました.
CKEDITOR.replace( 'editor1',
{
customConfig : "/CKEditorSample/custom/myConfig.js"
});はい、テーマに切り込むべきです.ハハ.
1、まず、CKEditorが提供しているToolbarSetを調べてみます.
基本ツールセット
CKEDITOR.config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];CKEDITOR.config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];ツールセットの名前はtoolbar_と言います.プレフィックス+ツールセット名のために、自分のツールセットを作成します.
注意:削除する時、その構造を破壊しないでください.
myConfig.js
CKEDITOR.editorConfig = function( config )
{
}config.toolbar_mytool =
[
{ name: 'document', items : [ 'Source','-','Save'] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];// ： 、 、
config.font_names = "Arial;Times New Roman;Verdana";config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;まず理解しなければならない概念があります.
例えば、今はフォーラムサイトがあります.他の人の文章を引用して、自分のコメントを追加してもいいです.(他の人のコメントと自分のコメントを区別すべきです.ですから、他の人のコメントの内容にスタイルを追加したいですが、この時に問題があります.この編集エリアのスタイルを変更するときに役立ちます.
この時にも二つのやり方があります.
方式一:
1、ckeditorディレクトリのcontents.cssファイルを見つけたら、必要なスタイルを追加します.(今はこうすればコードの重複性がありますよ.)
2、myConfig.js追加配置
config.contentsCss = "ckeditor/contents.css"1、ckeditorディレクトリの下でcssフォルダを作成し、CKEditor編集エリアで使用されるスタイルを置くために、myCss.cssを新規作成します.
2、contents.cssファイル内で、@import url(css/mys.css)を通じて自分のcssファイルを導入します.
3、myConfig.js追加配置
config.contentsCss = "ckeditor/contents.css"アリ旺表情写真
myConfig.js(タスク:5表情写真の交換)
まずディレクトリをダウンロードして、ckeditor/plugins/smileディレクトリの下に置きます.
//
config.smiley_path = CKEDITOR.basePath + 'plugins/smiley/wangwang/';
//
config.smiley_images = [
'1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif',
'12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif','21.gif',
'22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif','31.gif',
'32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif','41.gif',
'42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif','50.gif','51.gif',
'52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif','60.gif','61.gif',
'62.gif','63.gif','64.gif','65.gif','66.gif','67.gif','68.gif','69.gif','70.gif','71.gif',
'72.gif','73.gif','74.gif','75.gif','76.gif','77.gif','78.gif','79.gif','80.gif','81.gif',
'82.gif','83.gif','84.gif','85.gif'];
//
config.smiley_columns = 8;今の表情枠は最大幅、最大高さ、スクロールバーの効果が設定されていないので、効果はあまりよくないです.この問題を解決するのはEasyです.CSSファイルを修正する必要があります.
ckeditor/skins/kama/dialog.cssファイル追加
.ckeudialogguu{overflow-y:scroll;overflow-x:hidden;max-width:650 px;max-height:455 px;
皆さんにも分かりますように、私の説明をお願いします.次はCKEditor+CKFind forJava統合についてお話しします.