Web ページエディターの ckeditor と ckfinder の構成手順の共有_基礎知識

1. 使用方法:
1. ckeditor コア ファイル ckeditor.js をページ

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

ASP.NET 環境の場合は、サーバー側コントロール

class="ckeditor" がコントロールに追加されることに注意してください。
3. 対応するコントロールをエディタ コードに置き換えます
4.デフォルト) )
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'Basic' 、オールラウンド「完全」、カスタム）plugins/toolbar/plugin.js
config.toolbar = 'Basic';
config.toolbar = 'Full';
これは次のようになります:
config .toolbar_Full = [
['ソース','-','保存','新しいページ','プレビュー','-','テンプレート'],
['切り取り','コピー',' Paste','PasteText ','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['元に戻す','やり直し','-','検索','置換','-' ,'SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton' 、'HiddenField'] 、
'/'、
['太字'、'斜体'、'下線'、'取り消し線'、'-'、'下付き文字'、'上付き文字']、
[ 'NumberedList',' BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
[ 'リンク','リンク解除','アンカー'],
['イメージ','フラッシュ','テーブル','水平ルール','スマイリー','特別文字','ページブレイク'],
' /',
['Styles','Format','Font','FontSize'],
['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-index 値
config.baseFloatZIndex = 10000;
//ショートカット キーを設定します
config .keythroughs = [
[ CKEDITOR.ALT 121 , 'toolbarFocus' ], // フォーカスを取得します
[ CKEDITOR.ALT 122 , 'elementsPathFocus' ], //要素 focus
[ CKEDITOR.SHIFT 121 , ' contextMenu' ], //テキスト メニュー
[ CKEDITOR.CTRL 90 , 'undo' ], //Undo
[ CKEDITOR.CTRL 89 , 'redo' ] , //やり直し
[ CKEDITOR.CTRL CKEDITOR.SHIFT 90 , 'redo' ], //
[ CKEDITOR.CTRL 76 , 'link' ], //Link
[ CKEDITOR.CTRL 66 , '太字' ], //太字
[ CKEDITOR.CTRL 73 , 'italic' ], //斜体
[ CKEDITOR.CTRL 85 , 'underline' ], //underline
[ CKEDITOR.ALT 109 , 'toolbarCollapse' ]
]
//設定されたショートカット キーは、ブラウザーのショートカット キー plugins/keythroughs/plugin.js と競合する可能性があります。 .CTRL 73 ,
CKEDITOR. CTRL 85
]
//編集 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,8080 80,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 = {
element : 'span ',
styles : { 'color' : '#(color)' }
}//必要な CSS ファイルを追加します。ここに追加できます。Web サイトへの相対パスと絶対パスを使用できます
config.contentsCss = './contents.css'
//テキスト方向
config.contentsLangDirection = 'rtl';左から右へ
//CKeditor設定ファイルを設定したくない場合は空白のままにしておきます。
CKEDITOR.replace( 'myfiled', {customConfig : './config.js' }; '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 のみがプラグインをサポートしています。 wysiwygarea/plugin.js .
config.disableNativeSpellChecker = true
//行や列の追加などのテーブル編集機能は、現在 Firefox plugins/wysiwygarea/plugin.js でのみサポートされています
config.disableNativeTableHandles = true; //デフォルトは無効です
//画像とテーブルのサイズ変更機能を有効にするかどうか config.disableObjectResizing = true;
config.disableObjectResizing = false //デフォルトは有効です
// HTML ドキュメント タイプ
config.docType = '"http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"' ;
//編集領域をレンダリングするかどうか 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 文字に変換するかどうか。たとえば、「これは中国語です: 汉语。」は「これは中国語です。」に変換されます。
plugins/entities/plugin.js
config. entities_processNumerical = false;
//新しいコンポーネントを追加します
config .extraPlugins = 'myplugin'; //デフォルト以外の例のみ
//検索 plugins/find/plugin.js を使用する場合の強調表示色
config.find_highlight = {
要素 : 'span',
styles : { 'background-color' : '#ff0', 'color' : '#00f' }
};デフォルトのフォント名 plugins/font/plugin.js
config. font_defaultLabel = 'Arial'
//フォント編集中に、一般的に使用される漢字を文字セットに追加できます: Song、Kai、Hei など。 /font/plugin.js
config.font_names = 'Arial;Times New Roman ;Verdana'
//テキストプラグインのデフォルトのスタイル/font/plugin.js
config.font_style = {
要素 : 'span'、
スタイル : { 'font-family' : ' #(family)' }、
オーバーライド : [ { 要素 : 'font'、属性 : { 'face' : null } } ]
};
//デフォルトのフォント サイズ plugins/font/plugin.js
config.fontSize_defaultLabel = '12px';
//フォント編集時のフォント サイズ
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 /48
px;72/72px'
//フォント サイズの設定時に使用されるスタイル プラグイン/font/plugin.js
config .fontSize_style = {
要素 : 'span',
スタイル : { 'font-size' : '#(size)' },
オーバーライド : [ { 要素 : 'font', 属性 : { ' 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', Attributes : { 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 = { element : 'h2', Attributes : { class : 'contentTitle2' } }; format H3 タグ plugins/format /plugin.js
config.format_h1 = { element : 'h3', Attributes : { class : 'contentTitle3' } };
//H4 タグ plugins/format/plugin を自動的にフォーマットします。 js
config.format_h1 = { element : 'h4', Attributes : { 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', Attributes : { class : 'normalPara' } };
//PRE タグを自動的にフォーマットする plugins/format/plugin.js
config.format_pre = { element : 'pre', Attributes : { class : '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;//カンマで区切られた一連のタグ名、 /menu/plugin.js の左下隅にある階層ネスト プラグインに表示されます。
config.menu_groups
='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash ,checkbox,radio,te
xtfield, hiddenfield,imagebutton,button,select,textarea';
//サブメニュー表示時の遅延、単位: ms plugins/menu/plugin.js
config.menu_subMenuDelay = 400 ;
//実行時「新規」コマンド作成時、エディタ内の内容 plugins/newpage/plugin.js
config.newpage_html = '';
//ワードからテキストをコピーした場合、テキストをフォーマットしてプラグインを削除するかどうか/pastefromword/plugin.js
config.pasteFromWordIgnoreFontFace = true; //デフォルトではフォーマットを無視します
//

< などのタグを使用するかどうか。 h2> word ドキュメントから貼り付けられたコンテンツを変更または置換する plugins/pastefromword/plugin.js
config.pasteFromWordKeepsStructure = false
//word plugins/pastefromword/plugin からコンテンツを貼り付けるときに形式を削除するかどうか。 js
config.pasteFromWordRemoveStyle = false;
// 背景言語のタイプに応じて出力 HTML コンテンツをフォーマットします。デフォルトは空です。
config.protectedSource.push( //g ); // PHP コード
config.protectedSource.push( //g ); // ASP コード
config.protectedSource.push( /(] >[s|S]*? ] >)| (] />)/gi ); // ASP.Net コード
//入力時に挿入されるタグ: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;
//ソースコードと WYSIWYG の「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'; 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 .
config. templates_files = [ 'plugins/templates/templates/default.js' ]
//テンプレートを使用する場合、「編集した内容を置き換える」チェックボックスをオンにするか plugins/templates/plugin.js
config.templates_replaceContent = true ;
//テーマ
config.theme = 'default';
//記録ステップを元に戻す plugins/undo/plugin.js
config.undoStackSize =20; 🎜>// CKEditor には CKFinder が統合されています。ckfinder の正しいパスの選択に注意してください。
//CKFinder.SetupCKEditor(null, '/ckfinder/');
2. 使用上のヒント
1. ページにエディターを即座に設定します
type="text/javascript">
//例 1: ツールバーを高さ 70 の基本ツールバーに設定します
CKEDITOR.replace('<%=tbLink.ClientID.Replace("_") , "$") %>',
{ toolbar:'Basic', height:70 });
//例 2: ツールバーはカスタム タイプです
CKEDITOR.replace( 'editor1' 、
{
ツールバー:
[
//太字斜体、下線、上付き文字
['太字','斜体','下線','打ち消し線 ','下付き文字',' Superscript'],
//数値リスト エンティティ リスト インデントを減らす インデントを増やす
['NumberedList','BulletedList','-','Outdent','Indent '],
//左揃え、中央揃え、右揃え、両端
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
//ハイパーリンクはハイパーリンクのアンカーポイントをキャンセルします
['Link' ,'Unlink','Anchor'],
//画像フラッシュ表横線表現特殊文字改ページ
['Image','Flash','Table','horizo​​ntalRule' ,'Smiley',' SpecialChar','PageBreak'],
'/',
//スタイル形式のフォント フォント サイズ
['Styles','Format','Font','FontSize' ],
/ /文字色背景色
['TextColor','BGColor'],
//全画面表示ブロック
['Maximize', 'ShowBlocks','-']
]
}
);

3. Web サーバーに展開されると、次のフォルダーとファイルが削除されます。 /_samples: サンプルフォルダー;
/_source: /lang フォルダー内の zh-cn.js および en.js 以外のファイル (必要に応じて他の言語ファイルも保存できます); 🎜> ルート ディレクトリ内のchanges.html (更新リスト)、install.html (インストール ポインタ)、license.html (使用ライセンス);
/skins ディレクトリ内の不要なスキン。通常は V2 (シンプル、プレーン) を使用します。 V2 のみを保持する場合は、config.js でスキンを指定する必要があります。
fckeditor と比較して、これらは無料です。クラス ライブラリ fckdetior.dll への参照を保存し、ページ上で直接 js を使用します。 。 。 。 。 。 。 。しかしこの時
アップロード機能が使えないことが分かりました！ fckefitor は以前の関数を統合し、ckeditor と ckfinder の 2 つの部分に分割したことが判明しました。後者は関数をアップロードするのにお金が必要です。 ！
オンラインで検索して解決策を見つけたので、ckfinder をダウンロードしてプロジェクトのルート ディレクトリに置きました。 ！
それでも動作しない場合、アップロードしてください エラーページ!
ckfinder/config:
public override bool CheckAuthentication()
{
return true;
}
ckeditror/config.js added:
CKEDITOR .editorConfig = function( config )
{
// ここでデフォルト設定への変更を定義します。例:
// config. language = 'fr' >// config.uiColor = '# AADC6E';
config.filebrowserBrowseUrl = location.hash '../ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = location.hash '../ckfinder/ckfinder.html?Type=Images' ;
config.filebrowserFlashBrowseUrl = location.hash '../ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = location.hash '../ckfinder/core/connector/aspx/connector. aspx?
command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = location.hash '../ckfinder/core/connector/aspx/connector.aspx?
>config .filebrowserFlashUploadUrl = location.hash '../ckfinder/core/connector/aspx/connector.aspx?
command=QuickUpload&type=Flash'
// config.filebrowserWindowWidth = '800'; // config.filebrowserWindowHeight = '500';
}
色の付いた部分は最初は入れていませんでした。(ルートディレクトリ)
ログイン後、あなたはここに現れます。 エラーが発生し続けて追加しました... 先頭では、プロジェクトのルートディレクトリから開始することを意味します。Error resolved! ! Finally
is the crack:
Here is a brief description of my cracking steps: (excerpted from others)
1. Use the firebug plug-in in FF browser;
2. Open the installed file browser , it was found that the ckfinder.html file was called;
3. In ckfinder.html, it was found that an iframe was written in this cell, and the src is core/pages/ckffiles.html ;
4. Continue to open the iframe node. Between the two tags and there is a without an id. That one requires you to give it. The money is here~;
5. Open the core/pages/ckffiles.html source file and find that there is no value between and thing, indicating that this is generated by code;
6. Next, you can find the answer in CKfinder’s js. Fortunately, FCKeditor was relatively familiar with it before, so you can go directly to the ckfindercorejs folder to find it;
7. One of the two js under this folder is for IE, and the other is for other browsers. This is the same as FCKeditor;
8. Open ckfinder_gecko.js and search for "qu", and you will soon find eF =B.getElementById('qu');This sentence;
9. Look back
if ((1==(dK.indexOf(ab.bW.substr(1,1))) % 5) &&window.top[qC '143141x74x69157x6E'][qF '163x74'].toLowerCase
().replace(s4,"")!=ab.eo.replace(s4,""))||ab.bW. substr(3,1)!=dK.substr(((dK.indexOf(ab.bW.substr(0,1)) dK.indexOf
(ab.bW.substr(2,1)))*9 ) % (dK.length-1),1)){en.call(window,qo);};eF.appendChild(D);
The last appendChild~ in this paragraph is almost here;
10. Among the many conditions mentioned above, only en.call(window,qo); is executed, otherwise it is nothing~;
11. Delete en.call(window,qo); or * en.call( window,qo); *, refresh again and see if it is gone~;
12. Modify ckfinder_ie.js after it is finished, the same.
The whole CKfinder can be easily cracked~ If you think this is easy to use, you’d better pay some money to buy a serial number. The official can give you technical help and save a lot of time