PHPでCKEDITORオンラインエディタを使用する
- WBOYオリジナル
- 2016-06-13 13:18:53870ブラウズ
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 バージョンでは、このステートメントは次のように記述できます:
バージョンの違いによる問題 実行時には注意してください。
次のページの名前値の内容に基づいて、対応する値を取得します。
?
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 = '
//編集領域をレンダリングするかどうか plugins/editingblock/plugin.js
config.editingBlock = true;
//エディターでキャリッジリターンによって生成されたラベル
config.enterMode = CKEDITOR.ENTER_P; //オプション: CKEDITOR.ENTER_BR または CKEDITOR.ENTER_DIV
//出力に 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;
//「これは中国語です: 汉语」などの一部の特殊文字を ASCII 文字に変換するかどうかは、「これは中国語です: 汉语」に変換されます。エンティティ
s/plugin.js
config.entities_processNumerical = false;
//新しいコンポーネントを追加
config.extraPlugins = 'myplugin'; //デフォルト以外の例のみ
//plugins/find/plugin.jsを検索するときにハイライト色を使用します
config.find_highlight = {
??? 要素: 'スパン'、
??? スタイル : { '背景色' : '#ff0', '色' : '#00f' }
};
//デフォルトのフォント名 plugins/font/plugin.js
config.font_defaultLabel = 'Arial';
//フォント編集時によく使用される文字セット（宋体、櫂体、丙体など）を追加できます。plugins/font/plugin。 js
config.font_names = 'Arial;Times New Roman;Verdana';
//テキストプラグインのデフォルトのスタイル/font/plugin.js
config.font_style = {
??? 要素: 'スパン'、
??? スタイル : { 'フォントファミリー' : '#(ファミリー)' },
??? オーバーライド: [ { 要素 : 'フォント'、属性 : { '顔' : 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;20/20px;22/22px;24/24px;26 /26px;28/28px;36/36px;48/48px;72/72px'
//フォント サイズの設定時に使用されるスタイル plugins/font/plugin.js
config.fontSize_style = {
??? 要素: 'スパン'、
??? スタイル: { 'フォントサイズ' : '#(サイズ)' },
??? オーバーライド: [ { 要素 : 'フォント'、属性 : { 'サイズ' : null } } ]
};
//コピーされたコンテンツから形式 plugins/pastetext/plugin.js を強制的に削除するかどうか
config.forcePasteAsPlainText =false //
を削除しないでください
//「&」を強制的に「&」に置き換えるかどうか plugins/htmldataprocessor/plugin.js
config.forceSimpleAmpersand = false;
//アドレスタグのフォーマット plugins/format/plugin.js
config.format_address = { element : 'address',attributs : { class : 'styledAddress' } };
//DIV タグを自動的にフォーマットする plugins/format/plugin.js
config.format_div = { element : 'div',attributs : { class : 'normalDiv' } };
//H1 タグを自動的にフォーマットする plugins/format/plugin.js
config.format_h1 = { element : 'h1', Attributes : { class : 'contentTitle1' } };
//H2 タグを自動的にフォーマットする plugins/format/plugin.js
config.format_h2 = { element : 'h2', Attributes : { class : 'contentTitle2' } };
//H3 タグを自動的にフォーマットする plugins/format/plugin.js
config.format_h1 = { 要素 : 'h3'、属性 : { クラス : 'contentTitle3' } };
//H4 タグを自動的にフォーマットする plugins/format/plugin.js
config.format_h1 = { element : 'h4',attributs : { class : 'contentTitle4' } };
//H5 タグを自動的にフォーマットする plugins/format/plugin.js
config.format_h1 = { element : 'h5', Attributes : { class : 'contentTitle5' } };
//H6 タグを自動的にフォーマットする plugins/format/plugin.js
config.format_h1 = { element : 'h6', Attributes : { class : 'contentTitle6' } };
//P タグを自動的にフォーマットする plugins/format/plugin.js
config.format_p = { element : 'p',attributs : { 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编辑模式如使用，其源码将包含：等标签
config.fullPage = false;
//是否忽略段落中的空字符 若不忽略 则字符将以“”表示 plugins/wysiwygarea/plugin
.js
config.ignoreEmptyParagraph = true;
//在清除图片属性框中的链接属性时 是否同时清除两边的标签 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.j
s
config.newpage_html = '';
//当从word里复制文字进来时，是否进行文字的格式化去除 plugins/pastefromword/plugin.js
config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式
//是否使用等标签修饰或者代替从word文档中粘贴过来的内容 plugins/pastefromword/plugin.js
config.pasteFromWordKeepsStructure = false;
//从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.js
config.pasteFromWordRemoveStyle = false;
//对应后台语言的类型来对输出的HTML内容进行格式化，默认为空
config.protectedSource.push( /<"?["s"S]*?"?>/g ); // PHP Code
config.protectedSource.push( //g ); // ASP Code
config.protectedSource.push( /(]+>["s|"S]*?<"/asp:[^">]+>)|(]+"/>)/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/');
?