ASP の ckEditor の詳細な設定概要

コード

<script type=text/javascript src=ckeditor/ckeditor.js></script>

2. エディタが使用される場所に HTML コントロール <textarea> を挿入します。

<textarea id= TextArea1cols= 20 rows=2 class=ckeditor></textarea>

ASP.NET 環境の場合は、次のようにサーバー側コントロール <TextBox> を使用して

コードをコピーすること

も

ID=tbContent runat=server TextMode=MultiLine class=ckeditor></asp:TextBox>

class=ckeditor がコントロールに追加されることに注意してください。

3. 対応するコントロールをエディタ コードに置き換えます。

次のようにコードをコピーします。

<script type=text/javascript>

CKEDITOR.replace('TextArea1');

//ASP.NET で使用されるサーバー側コントロールの場合。環境 <TextBox >

CKEDITOR.replace('tbContent');

//<TextBox> コントロールがマスター ページにある場合は、

CKEDITOR.replace('<%=tbContent.ClientID.Replace(_,$) %>') と書き込みます。

</script>

をコピーするように

エディタを設定します。

code コードは次のとおりです。

ckeditor の構成は ckeditor/config.js ファイルに集中しています。 以下に、一般的に使用される構成パラメーターをいくつか示します。

// インターフェイス言語、デフォルトは 'en' config. language

= 'zh-cn ';

//幅と高さを設定します

config.width = 400;

config.height = 400;

// 3 つのエディター スタイルがあります: 'kama' (デフォルト)、'office2003'、'v2'

//

背景色

config.uiColor = '#FFF';

// ツールバー (ベーシック'ベーシック'、オールラウンド'フル'、カスタム) plugins/toolbar/plugin.js

config.toolbar = 'Basic';

config.toolbar = 'Full';

これは次のように一致します:

config.toolbar_Full = [

'Source','-','Save','NewPage','Preview','-', 'テンプレート']、

['切り取り'、'コピー'、'貼り付け'、'テキストの貼り付け'、'Wordから貼り付け'、'-'、'印刷'、 'SpellChecker', 'Scayt'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

['Form', 'Checkbox ', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],

'/',

['太字','斜体','下線','取り消し線','-','下付き文字','上付き文字'],

['番号付きリスト','箇条書きリスト','-','アウトデント' ,'Indent','Blockquote'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

['リンク','リンク解除','アンカー'],

['イメージ','フラッシュ','テーブル','水平ルール','スマイリー','特別文字','ページブレーク'],

'/',

['スタイル','フォーマット','フォント','フォントサイズ'],

['テキストカラー','BGColor']

];

//ツールバーを折りたたむことができるかどうか

config.toolbarCanCollapse = true;

//ツールバーの場所

config.toolbarLocation = 'top'; //オプション:bottom

//

ツールバーがデフォルトで展開されるかどうか

config.toolbarStartupExpanded = true;

/キャンセル ドラッグ＆ドロップでサイズ変更 function plugins/resize/plugin.js

config.resize_enabled = false;

//サイズの最大高さを変更します

config.resize_maxHeight = 3000;

//サイズの最大幅を変更します

config.resize_maxWidth = 3000

//サイズの最小高さを変更します

config.resize_minHeight = 250

//サイズの最小幅を変更します

config.resize_minWidth

= 750;

このエディタを含むフォーム 要素内のデータを自動的に更新するかどうか

config.autoUpdateElement = true

// 絶対ディレクトリを使用するか相対ディレクトリを使用するかを設定します。空の場合は相対ディレクトリを意味します

config.baseHref = ''

// エディタの z-index 値

config.baseFloatZIndex = 10000;

// ショートカット キーを設定します

config.keystorms = [

[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], // フォーカスを取得

[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //要素フォーカス

[CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //テキストメニュー

[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], // 元に戻す

[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //やり直し

[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //

[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //リンク

[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], // 太字

[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ] , //斜体

[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], // 下線

[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]

]

//設定されたショートカット キーはブラウザのショートカット キー plugins/keythroughs/plugin.js と競合する可能性があります。

config.blockedKeybottoms = [

CKEDITOR.CTRL + 66 /*B*/,

CKEDITOR.CTRL + 73 /*I* / ,

CKEDITOR.CTRL + 85 /*U*/

]

//エディター plugins/colorbutton/plugin.js の要素の背景色の値を設定します。

config.colorButton_backStyle = {

element : 'span',

styles : { 'background-color' : '#(color)' }

}

//前景色の値を設定 plugins/colorbutton/plugin.js

config.colorButton_colors = '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,

006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,

A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5,

FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF'

//カラー選択時に他のカラーオプションを表示するかどうか plugins/colorbutton/プラグイン.js

config.colorButton_enableMore = false

//ブロックの前景色のデフォルト値は設定されています plugins/colorbutton/plugin.js

config.colorButton_foreStyle = {

element : 'span',

styles : { 'color' : '#(color)' } }

;

/ /追加する必要がある CSS ファイルは、相対パスと絶対パスを使用して Web サイトに追加できます。

config.contentsCss = './contents.css';

//テキストの方向

config.contentsLangDirection = 'rtl'; //左から右へ

//CKeditor 設定ファイルを設定したくない場合は、空白のままにしておきます

CKEDITOR.replace( 'myfiled', {customConfig : '. /config.js' } );

//インターフェースエディットボックスの背景色 plugins/dialog/plugin.js

config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)'; //参照用に設定可能

config.dialog_backgroundCoverColor = 'white' //デフォルト

//背景の不透明度値は 0.0 ～ 1.0 の範囲である必要があります plugins/dialog/plugin.js

config.dialog_backgroundCoverOpacity = 0.5

//移動または要素を変更するときの境界線の吸着距離単位:pixel plugins/dialog/plugin.js

config.dialog_magnetDistance = 20;

//ローカルのスペルチェックとプロンプトを拒否するかどうか。現在、Firefox と safari のみがサポートしています。 plugins/wysiwygarea/plugin.js

config.disableNativeSpellChecker = true

//行や列の追加などのテーブル編集機能を実行します。現在、Firefox のみがサポートしています plugins/wysiwygarea /plugin.js

config.disableNativeTableHandles = true; //デフォルトでは無効

//画像や表のサイズ変更機能を有効にするかどうか config.disableObjectResizing = true;

config.disableObjectResizing = false //デフォルトでは有効

//HTMLドキュメントタイプを設定

config.docType = '<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22';

//編集領域をレンダリングするかどうか plugins/editingblock/plugin.js

config.editingBlock

= true;

EnterMode

によって生成されるラベル

//出力に HTML エンティティを使用するかどうか plugins/entities/plugin.js

config.entities = true;

//さらにエンティティを定義 plugins/entities/plugin.js

config.entities_Additional = '#39' // # は & に置き換えられます。

//表示が難しい文字を対応する HTML 文字に変換するかどうか plugins/entities/plugin.js

config.entities_greek = true;

//一部のラテン文字を HTML に変換するかどうかplugins/entities/plugin.js

config.entities_latin = true;

//「This is Chinese: 汉语」のような一部の特殊文字を ASCII 文字に変換するかどうか。「This is Chinese: 中文」に変換します。plugins/entities/plugin.js

config.entities_processNumerical = false ;

//新しいコンポーネントを追加します

config.extraPlugins = 'myplugin'; //デフォルト以外の例のみ

//検索時にハイライトカラーを使用する plugins/find/plugin.js

config.find_highlight = {

element : 'span',

styles : { 'background-color' : '#ff0', 'color' : '#00f' }

}

//デフォルトのフォント名 plugins/font/plugin.js

config.font_defaultLabel = 'Arial';

、

一般的に使用される漢字を文字セットに追加できます: Song、Kai、Hei など。 plugins/font/plugin.js

config.font_names = 'Arial;Times New Roman;Verdana';

テキストプラグイン/ font/plugin.js

config.font_style = {

要素 : 'span'、

スタイル : { 'font-family' : '#(family)' }、

オーバーライド : [ { 要素 : 'font',attributs : { 'face' : null } ]

}

//デフォルトのフォント サイズ plugins/font/plugin.js

config.fontSize_defaultLabel = '12px'

//フォント編集時のオプションのフォント サイズ plugins/font /plugin .js

config.fontSize_sizes ='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;2 0/20ピクセル;22/22ピクセル;24/24ピクセル;26/26ピクセル;28/28ピクセル;36/36ピクセル;48/48ピクセル;72/72ピクセル'

//フォントサイズ設定時に使用するスタイル plugins/font/plugin.js

config.fontSize_style = {

element : 'span',

styles : { 'font-size' : '#(size)' },

overrides : [ { element : ' font',attributs : { 'size' : null } } ]

}

//コピーされたコンテンツの形式を強制的に削除するかどうか plugins/pastetext/plugin.js

config.forcePasteAsPlainText =false //削除しない

// & を強制的に置き換えるかどうか &plugins/htmldataprocessor/plugin.js

config.forceSimpleAmpersand = false

// アドレス タグをフォーマットします plugins/format/plugin.js

config.format_address = { element : 'address' ,属性 : { class : 'styledAddress' } }

// DIV タグを自動的にフォーマットする plugins/format/plugin.js

config.format_div = { element : 'div', Attributes : { class : 'normalDiv' } };

//H1 タグを自動的にフォーマットする plugins/format/plugin.js

config.format_h1 = { element : 'h1', Attributes : { class : ' contentTitle1' } };

//H2 タグを自動的にフォーマットする plugins/format/plugin.js

config.format_h2 = { 要素 : 'h2', 属性 : { クラス : 'contentTitle2' } }

//H3 タグを自動的にフォーマットする plugins/format/plugin.js

config.format_h1 = { element : 'h3', Attributes : { class : 'contentTitle3' } };

//H4 タグを自動的にフォーマットするプラグイン/ format/plugin.js

config.format_h1 = { 要素 : 'h4', 属性 : { クラス : 'contentTitle4' } };

//H5 タグを自動的にフォーマットする plugins/format/plugin.js

config.format_h1 = { element : 'h5', Attributes : { class : 'contentTitle5' } }

//H6 タグを自動的にフォーマットする plugins/format /plugin.js

config. format_h1 = { 要素 : 'h6', 属性 : { クラス : 'contentTitle6' } };

//P タグを自動的にフォーマットする plugins/format/plugin.js

config.format_p = { element : 'p', Attributes : { class : 'normalPara' } }

//PRE タグを自動的にフォーマットする plugins/format /plugin.js

config.format_pre = { 要素 : 'pre', 属性 : { クラス : 'code' } };

//セミコロンで区切られたタグ名がツールバーに表示されます plugins/format/plugin.js

config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div'

;完全な HTML 編集モードを使用すると、ソース コードには次のものが含まれます: <html><body></body></html> およびその他のタグ

config.fullPage = false;

//段落内の空文字を無視するかどうか。無視しない場合、文字は plugins/wysiwygarea/plugin.js で表されます。

config.ignoreEmptyParagraph = true;

//<a> の両側を同時にクリアするかどうか。画像属性ボックスのリンク属性をクリアする場合 タグ plugins/image/plugin.js

config.image_removeLinkByEmptyURL = true;

//カンマで区切られた一連のタグ名が、左下隅の階層ネストに表示されます。 plugins/menu/plugin.js

config.menu_groups ='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor, link ,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea'

//サブメニュー表示時の遅延、単位:ms plugins/menu/plugin.js

config.menu_subMenuDelay = 400;

//新しいコマンドが実行されると、エディタ内のコンテンツが plugins/newpage/plugin.js

config.newpage_html = ''

; 、テキストの書式設定と削除を行うかどうか plugins/pastefromword/plugin.js

config.pasteFromWordIgnoreFontFace = true; //デフォルトでは、形式を無視します

た

コンテンツを変更または置換するために <h1><h2> などのタグを使用するかどうか plugins/pastefromword/plugin.js

config.pasteFromWordKeepsStructure = false;

Word からコンテンツを貼り付ける形式 plugins/pastefromword/plugin.js を削除するかどうか

config.pasteFromWordRemoveStyle = false;

// バックグラウンド言語のタイプに対応する出力 HTML コンテンツをフォーマットします。デフォルトは空です

]

*?/?>/g );

protectedSource.push( //g ); // ASP コード

config.protectedSource.push( /(]+>[/s|/S]*?<//asp:[^/>]+>)|(] + //>)/gi ); ASP.Net コード

//入力時に挿入されるラベル：shift+Enter

config.shiftEnterMode = CKEDITOR.ENTER_P; //オプション：CKEDITOR.ENTER_BR または CKEDITOR.ENTER_DIV

//

オプションの式置換文字 plugins/smiley/plugin.

smiley_descriptions = [

':)'、':('、';)'、':D'、':/'、 ':P',

'', '', '', ''

, ' ', '', '', ';(', '', '', '', '',

'', ':kiss' , '' ];

//対応する式画像 plugins/smiley/plugin.js

config.smiley_images = [

'normal_smile.gif'、'sad_smile.gif'、'wink_smile.gif'、'teeth_smile.gif'、'confused_smile.gif'、'tounge_smile.gif'、

'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif',

'devil_smile.gif'、'cry_smile.gif'、'lightbulb.gif'、'thumbs_down.gif'、'thumbs_up.gif'、'heart.gif'、

'broken_heart.gif'、'kiss.gif'、'envelope .gif'];

//顔文字プラグインのアドレス/smiley/plugin.js

config.smiley_path = 'plugins/smiley/images/';

// ページの読み込み時に、編集ボックスがすぐにフォーカスを取得するかどうか plugins/editingblock/plugin.js plugins/editingblock/plugin.js.

//

読み込み時に、

を

編集する方法。

//plugins/showblocks/plugin.js の読み込み時にフレーム枠を表示するかどうか

config.startupOutlineBlocks = false;

//スタイル ファイルを読み込むかどうか plugins/stylescombo/plugin.js.

config.stylesCombo_stylesSet

= 'default';

以下はオプションです

config.stylesCombo_stylesSet

= 'mystyles';

'mystyles:/editorstyles/styles.js';

config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';

// 開始インデックス値

config.tabIndex

= 0;

ユーザーが TAB を入力、エディターによって渡されるスペースの数 () 値が 0 の場合、フォーカスは編集ボックスの外に移動します plugins/tab/plugin.js

config.tabSpaces = 0;

//デフォルトのテンプレート plugins/templates/plugin.js.

config.templates

= 'default';

//カンマ区切りのテンプレート ファイル plugins/templates/plugin.js.

templates/templates/default.js' ]

//テンプレートを使用する場合、plugins/templates/plugin.js にチェックを入れると編集内容が置き換えられます

config.templates_replaceContent = true;

//テーマ

config.theme = 'default';

//元に戻す記録ステップの数 plugins/undo/plugin.js

config.undoStackSize =20;

//CKFinder を CKEditor に統合します。 ckfinder の選択が正しいこと。

//CKFinder.SetupCKEditor(null, '/ckfinder/');