PHPでCKEDITORオンラインエディタを使用する

PHPでCKEDITORオンラインエディタを使用する

1. 公式ダウンロード

1.CKエディター : CKEditor.NET タイトルの下にある [Download zip] ボタンをクリックします

ダウンロードしたファイル: ckeditor_aspnet_3.6.2.zip

?

2. ページの使用方法

CKEDITOR 3.6.1 (デフォルトは PHP バージョン) をダウンロードし、呼び出しページの先頭に次の 2 つの js 段落を記述します。

?

注: ここでのコンテンツは、以下に示すように の名前です:

3.6.2 より前のバージョンでは、このステートメントは次のように記述できます:

400コール受付センターへようこそ

3.6.2 バージョンでは、このステートメントは次のように記述できます:

http://www.my400800.cn へようこそ バージョンの違いによる問題 実行時には注意してください。

次のページの名前値の内容に基づいて、対応する値を取得します。

?

3. 共通ツールをカスタマイズします

?

?

?

3. 構成エディター

?

ckeditor の設定は ckeditor/config.js ファイルに集中しています。一般的に使用される設定パラメータの一部を次に示します:

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

//幅と高さを設定します
config.width = 400;
config.height = 400;

// エディター スタイルは 3 つあります: 'kama' (デフォルト)、'office2003'、'v2'
config.skin = 'v2';

//背景色
config.uiColor = '#FFF';

// ツールバー (基本 'Basic'、汎用 'Full'、カスタム) plugins/toolbar/plugin.js
config.toolbar = '基本';
config.toolbar = 'Full';

これは次と一致します:
config.toolbar_Full = [
???['ソース','-','保存','新しいページ','プレビュー','-','テンプレート'],
???['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
??? ['元に戻す','やり直し','-','検索','置換','-','すべて選択','フォーマットの削除'],
??? ['フォーム'、'チェックボックス'、'ラジオ'、'テキストフィールド'、'テキストエリア'、'選択'、'ボタン'、'イメージボタン'、'隠しフィールド']、
???「/」、
??? ['太字','斜体','下線','取り消し線','-','下付き文字','上付き文字'],
???['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
???['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
???['リンク','リンク解除','アンカー'],
???['画像','フラッシュ','テーブル','水平ルール','スマイリー','特別文字','ページ区切り'],
???「/」、
???['スタイル','形式','フォント','フォントサイズ'],
???['TextColor','BGColor']
];

//ツールバーを縮小できるかどうか
config.toolbarCanCollapse = true;

//ツールバーの位置
config.toolbarLocation = 'top';//オプション:bottom

//ツールバーがデフォルトで展開されるかどうか
config.toolbarStartupExpanded = true;

//「ドラッグしてサイズを変更する」機能をキャンセル 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 インデックス値
config.baseFloatZIndex = 10000;

//ショートカットキーを設定します
config.keybottoms = [
[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], //フォーカスを取得
[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //要素フォーカス

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

[ CKEDITOR.CTRL + 90 /*Z*/, '元に戻す' ], //元に戻す
[ CKEDITOR.CTRL + 89 /*Y*/, 'やり直し' ], //やり直し
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'やり直し' ], //

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

[ CKEDITOR.CTRL + 66 /*B*/, '太字' ], // 太字
[ CKEDITOR.CTRL + 73 /*I*/, '斜体' ], //斜体
[ CKEDITOR.CTRL + 85 /*U*/, '下線' ], //下線

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

//ブラウザのショートカット キーと競合する可能性のあるショートカット キーを設定します plugins/keybottoms/plugin.js.
config.blockedKeybottoms = [
???CKEDITOR.CTRL + 66 /*B*/,
???CKEDITOR.CTRL + 73 /*I*/,
???CKEDITOR.CTRL + 85 /*U*/
]

//エディター内の要素の背景色の値を設定します plugins/colorbutton/plugin.js.
config.colorButton_backStyle = {
??? 要素: 'スパン'、
??? スタイル : { '背景色' : '#(色)' }
}

//前景色の値を設定 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/plugin.js
config.colorButton_enableMore = false

//ブロックの前景色のデフォルト値設定 plugins/colorbutton/plugin.js
config.colorButton_foreStyle = {
??? 要素: 'スパン'、
??? スタイル : { 'カラー' : '#(カラー)' }
};

//追加する必要がある CSS ファイルをここに追加します。Web サイトへの相対パスと絶対パスを使用できます。
config.contentsCss = './contents.css';

//テキストの方向
config.contentsLangDirection = 'rtl'; //左から右へ

//CKeditorの設定ファイルを設定したくない場合は、空白のままにしてください
CKEDITOR.replace( 'myfiled', {customConfig : './config.js' });

//インターフェース編集ボックスの背景色 plugins/dialog/plugin.js
config.dialog_backgroundCoverColor = '#ffefd' //設定可能な参照
; config.dialog_backgroundCoverColor = 'white' //Default

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

//要素を移動または変更するときの境界線の吸着距離 単位: ピクセル 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 = '["s"S]*?"?>/g ); // PHP Code
config.protectedSource.push( //g ); // ASP Code
config.protectedSource.push( /(]+>["s|"S]*?]+>)|(]+"/>)/gi ); // ASP.Net Code

//当输入：shift+Enter时插入的标签
config.shiftEnterMode = CKEDITOR.ENTER_P; //可选：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV

//可选的表情替代字符 plugins/smiley/plugin.js.
config.smiley_descriptions = [
??? ':)', ':(', ';)', ':D', ':/', ':P',
??? '', '', '', '', '', '',
??? '', ';(', '', '', '', '',
??? '', ':kiss', '' ];

//对应的表情图片 plugins/smiley/plugin.js
config.smiley_images = [
??? 'regular_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'];

//表情的地址 plugins/smiley/plugin.js
config.smiley_path = 'plugins/smiley/images/';

//页面载入时，编辑框是否立即获得焦点 plugins/editingblock/plugin.js plugins/editingblock/plugin.js.
config.startupFocus = false;

//载入时，以何种方式编辑 源码和所见即所得 "source"和"wysiwyg" plugins/editingblock/plugin.js.
config.startupMode ='wysiwyg';

//载入时，是否显示框体的边框 plugins/showblocks/plugin.js
config.startupOutlineBlocks = false;

//是否载入样式文件 plugins/stylescombo/plugin.js.
config.stylesCombo_stylesSet = 'default';
//以下为可选
config.stylesCombo_stylesSet = 'mystyles';
config.stylesCombo_stylesSet = '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 = 'デフォルト';

//カンマ区切りのテンプレート ファイル plugins/templates/plugin.js.
config.templates_files = [ 'plugins/templates/templates/default.js' ]

//テンプレートを使用する場合、「編集内容を置き換える」にチェックを入れるか plugins/templates/plugin.js
config.templates_replaceContent = true;

//トピック
config.theme = 'デフォルト';

//元に戻す記録ステップの数 plugins/undo/plugin.js
config.undoStackSize =20;

// CKFinder を CKEditor に統合し、ckfinder の正しいパスの選択に注意してください。
//CKFinder.SetupCKEditor(null, '/ckfinder/');

?