Web page editor ckeditor and ckfinder configuration steps sharing_Basic knowledge

1. How to use:
1. Introduce the ckeditor core file ckeditor.js into the page

2. Insert the HTML control where the editor is used; <br><textarea id="TextArea1" cols="20" rows="2 " class="ckeditor">
If it is an ASP.NET environment, you can also use the server-side control

Note that class="ckeditor" is added to the control.
3. Replace the corresponding control with the editor code

4. Configuration editor (these configurations are okay by default) )
The configuration of ckeditor is concentrated in the ckeditor/config.js file. The following are some commonly used configuration parameters:
// Interface language, the default is 'en'
config.language = 'zh-cn ';
// Set width and height
config.width = 400;
config.height = 400;
// There are three editor styles: 'kama' (default), 'office2003' , 'v2'
config.skin = 'v2';
// Background color
config.uiColor = '#FFF';
// Toolbar (Basic'Basic', All-round'Full ', custom) plugins/toolbar/plugin.js
config.toolbar = 'Basic';
config.toolbar = 'Full';
This will match:
config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText ','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-' ,'SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] ,
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList',' BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link',' Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];
//Whether the toolbar can be shrunk
config.toolbarCanCollapse = true;
//The location of the toolbar
config.toolbarLocation = 'top';//Optional: bottom
//Whether the toolbar is expanded by default
config.toolbarStartupExpanded = true ;
//Cancel the "drag to change size" function plugins/resize/plugin.js
config.resize_enabled = false;
//Change the maximum height of the size
config.resize_maxHeight = 3000;
//Change the maximum width of the size
config.resize_maxWidth = 3000;
//Change the minimum height of the size
config.resize_minHeight = 250;
//Change the minimum width of the size
config.resize_minWidth = 750;
// Whether to automatically update the data in the element when submitting a form containing this editor
config.autoUpdateElement = true;
// Set whether to use an absolute directory or Relative directory, empty means relative directory
config.baseHref = ''
// Editor’s z-index value
config.baseFloatZIndex = 10000;
//Set shortcut keys
config .keystrokes = [
[ CKEDITOR.ALT 121 , 'toolbarFocus' ], //Get focus
[ CKEDITOR.ALT 122 , 'elementsPathFocus' ], //Element focus
[ CKEDITOR.SHIFT 121 , ' contextMenu' ], //Text menu
[ CKEDITOR.CTRL 90 , 'undo' ], //Undo
[ CKEDITOR.CTRL 89 , 'redo' ], //Redo
[ CKEDITOR.CTRL CKEDITOR.SHIFT 90 , 'redo' ], //
[ CKEDITOR.CTRL 76 , 'link' ], //Link
[ CKEDITOR.CTRL 66 , 'bold' ], //Bold
[ CKEDITOR.CTRL 73 , 'italic' ], //italic
[ CKEDITOR.CTRL 85 , 'underline' ], //underline
[ CKEDITOR.ALT 109 , 'toolbarCollapse' ]
]
//Set shortcut keys may conflict with browser shortcut keys plugins/keystrokes/plugin.js.
config.blockedKeystrokes = [
CKEDITOR.CTRL 66 ,
CKEDITOR.CTRL 73 ,
CKEDITOR. CTRL 85
]
//Set the background color value of the element in the edit plugins/colorbutton/plugin.js.
config.colorButton_backStyle = {
element : 'span',
styles : { 'background-color' : '#(color)' }
}
//Set the value of the foreground 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'
//Whether to display the "Other Colors" option when selecting a color plugins/colorbutton/plugin.js
config.colorButton_enableMore = false
//Setting the default value of the block’s foreground color plugins/colorbutton/plugin.js
config.colorButton_foreStyle = {
element : 'span ',
styles : { 'color' : '#(color)' }
};
//Add the CSS files that need to be added here. You can use relative paths and absolute paths to the website
config.contentsCss = './contents.css';
//Text direction
config.contentsLangDirection = 'rtl'; //From left to right
//Leave blank if you do not want to configure the CKeditor configuration file Just
CKEDITOR.replace( 'myfiled', { customConfig : './config.js' }; 'white' //Default
//The opacity value of the background should be between: 0.0~1.0 plugins/dialog/plugin.js
config.dialog_backgroundCoverOpacity = 0.5
//Border when moving or changing elements The adsorption distance unit: pixel plugins/dialog/plugin.js
config.dialog_magnetDistance = 20;
//Whether to reject local spelling check and prompts. The default is reject. Currently only firefox and safari support plugins/wysiwygarea/plugin.js .
config.disableNativeSpellChecker = true
//Table editing functions such as adding rows or columns are currently only supported by firefox plugins/wysiwygarea/plugin.js
config.disableNativeTableHandles = true; //The default is not enabled
//Whether to enable the resizing function of images and tables config.disableObjectResizing = true;
config.disableObjectResizing = false //The default is to enable
//Set the HTML document type
config.docType = '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"' ;
//Whether to render the editing area plugins/editingblock/plugin.js
config.editingBlock = true;
//The label generated by the carriage return in the editor
config.enterMode = CKEDITOR.ENTER_P ; //Optional: CKEDITOR.ENTER_BR or CKEDITOR.ENTER_DIV
//Whether to use HTML entities for output plugins/entities/plugin.js
config.entities = true;
//Define more entities plugins/entities/plugin.js
config.entities_additional = '#39'; //where # replaces &
//whether to convert some characters that are difficult to display into corresponding HTML characters plugins/entities/plugin.js
config.entities_greek = true;
//Whether to convert some Latin characters to HTML plugins/entities/plugin.js
config.entities_latin = true;
//Whether to convert some special characters to ASCII characters For example, "This is Chinese: 汉语." is converted to "This is Chinese: 中文."
plugins/entities/plugin.js
config.entities_processNumerical = false;
//Add new component
config .extraPlugins = 'myplugin'; //Non-default example only
//Highlight color when using search plugins/find/plugin.js
config.find_highlight = {
element : 'span',
styles : { 'background-color' : '#ff0', 'color' : '#00f' }
};
//Default font name plugins/font/plugin.js
config. font_defaultLabel = 'Arial';
//Commonly used Chinese characters can be added to the character set during font editing: Song, Kai, Hei, etc. plugins/font/plugin.js
config.font_names = 'Arial;Times New Roman ;Verdana';
//Default style of text plugins/font/plugin.js
config.font_style = {
element : 'span',
styles : { 'font-family' : ' #(family)' },
overrides : [ { element : 'font', attributes : { 'face' : null } } ]
};
//Default font size plugins/font/plugin. js
config.fontSize_defaultLabel = '12px';
//Optional font size when editing font 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 /48
px;72/72px'
//Style plugins/font/plugin.js used when setting font size
config.fontSize_style = {
element : 'span',
styles : { 'font-size' : '#(size)' },
overrides : [ { element : 'font', attributes : { 'size' : null } } ]
};
/ /Whether to force the copied content to remove the format plugins/pastetext/plugin.js
config.forcePasteAsPlainText =false //Do not remove
//Whether to force "&" to replace "&" plugins/htmldataprocessor/plugin. js
config.forceSimpleAmpersand = false;
//Format the address tag plugins/format/plugin.js
config.format_address = { element : 'address', attributes : { class : 'styledAddress' } };
//Automatically format DIV tags plugins/format/plugin.js
config.format_div = { element : 'div', attributes : { class : 'normalDiv' } };
//Automatically format H1 tags plugins/format/plugin.js
config.format_h1 = { element : 'h1', attributes : { class : 'contentTitle1' } };
//Automatically format H2 tags Format plugins/format/plugin.js
config.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' } };
//Automatically format H3 tags plugins/format /plugin.js
config.format_h1 = { element : 'h3', attributes : { class : 'contentTitle3' } };
//Automatically format H4 tags plugins/format/plugin.js
config.format_h1 = { element : 'h4', attributes : { class : 'contentTitle4' } };
//Automatically format H5 tags plugins/format/plugin.js
config.format_h1 = { element : 'h5', attributes : { class : 'contentTitle5' } };
//Automatically format H6 tags plugins/format/plugin.js
config.format_h1 = { element : 'h6', attributes : { class : 'contentTitle6' } };
//Automatically format the P tag plugins/format/plugin.js
config.format_p = { element : 'p', attributes : { class : ' normalPara' } };
//Automatically format PRE tags plugins/format/plugin.js
config.format_pre = { element : 'pre', attributes : { class : 'code' } };
// Tag names separated by semicolons to be displayed on the toolbar plugins/format/plugin.js
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
//Whether to use the complete html editing mode. If used, the source code will include: and other tags
config.fullPage = false;
//Whether to ignore empty characters in the paragraph. If not ignored, the characters will be represented by "" plugins/wysiwygarea/plugin.js
config.ignoreEmptyParagraph = true;
//When clearing the link attribute in the image attribute box Whether to clear the tags on both sides at the same time plugins/image/plugin.js
config.image_removeLinkByEmptyURL = true;
//A set of tag names separated by commas, displayed in the hierarchical nesting plugins in the lower left corner /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';
//Delay when displaying submenu, unit: ms plugins/menu/plugin.js
config.menu_subMenuDelay = 400;
//When executing " When creating the "New" command, the content in the editor plugins/newpage/plugin.js
config.newpage_html = '';
//When text is copied from word, whether to format the text and remove plugins/ pastefromword/plugin.js
config.pasteFromWordIgnoreFontFace = true; //The default is to ignore the format
//Whether to use tags such as

to modify or replace the content pasted from the word document plugins/ pastefromword/plugin.js
config.pasteFromWordKeepsStructure = false;
//Whether to remove the format when pasting content from word plugins/pastefromword/plugin.js
config.pasteFromWordRemoveStyle = false;
// Format the output HTML content corresponding to the type of background language. The default is empty
config.protectedSource.push( //g ); // PHP Code
config.protectedSource.push( //g ); // ASP Code
config.protectedSource.push( /(] >[s|S]*?] >)| (] />)/gi ); // ASP.Net Code
//Tag inserted when entering: shift Enter
config.shiftEnterMode = CKEDITOR.ENTER_P; //Optional: CKEDITOR.ENTER_BR or CKEDITOR.ENTER_DIV
//Optional expression replacement characters plugins/smiley/plugin.js.
config.smiley_descriptions = [
':)', ':(', ';)', ': D', ':/', ':P',
'', '', '', '', '', '',
'', ';(', '', '' , '', '',
'', ':kiss', '' ];
//Corresponding expression image 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'];
//The address of the emoticon plugins/smiley /plugin.js
config.smiley_path = 'plugins/smiley/images/';
//When the page loads, whether the editing box immediately gets focus plugins/editingblock/plugin.js plugins/editingblock/plugin.js .
config.startupFocus = false;
//How to edit the source code and WYSIWYG "source" and "wysiwyg" plugins/editingblock/plugin.js.
config. startupMode ='wysiwyg';
//Whether to display the frame border when loading plugins/showblocks/plugin.js
config.startupOutlineBlocks = false;
//Whether to load the style file plugins/stylescombo /plugin.js.
config.stylesCombo_stylesSet = 'default';
//The following are optional
config.stylesCombo_stylesSet = 'mystyles';
config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles .js';
config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';
//Starting index value
config.tabIndex = 0;
//When the user types TAB, the number of spaces passed by the editor, ( ) When the value is 0, the focus will move out of the edit box plugins/tab/plugin.js
config.tabSpaces = 0;
//The template used by default plugins/templates/plugin.js.
config.templates = 'default';
//Comma-separated template files plugins/templates/plugin.js.
config. templates_files = [ 'plugins/templates/templates/default.js' ]
//When using templates, whether the "Edited content will be replaced" box is checked plugins/templates/plugin.js
config.templates_replaceContent = true ;
//Theme
config.theme = 'default';
//Undo recording steps plugins/undo/plugin.js
config.undoStackSize =20;
// in CKEditor integrates CKFinder. Please pay attention to the correct path selection of ckfinder.
//CKFinder.SetupCKEditor(null, '/ckfinder/');
2. Some usage tips
1. Instantly set the editor on the page

3. Simplified ckeditor
When deployed to the web server, the following folders and files are Can be deleted:
/_samples: sample folder;
/_source: uncompressed source program; files other than zh-cn.js and en.js in the
/lang folder (can also be used as needed Keep other language files);
changes.html (update list), install.html (installation pointer), license.html (use license) in the root directory;
Unnecessary skins in the /skins directory, generally Use V2 (simple, plain). If you only keep V2, you must specify the skin in config.js.
These things are free. Compared with fckeditor, you save the reference to the class library fckdetior.dll and use js directly on the page! . . . . . . . But at this time
I found that the upload function cannot be used! It turns out that fckefitor integrated and split his previous functions into two parts, ckeditor and ckfinder. The latter requires money for uploading functions! ! Then
I searched online and found a solution. I downloaded ckfinder and put it in the project root directory! ! Added

If it still doesn’t work, upload it Error page! Then it took a lot of trouble:
ckfinder/config:
public override bool CheckAuthentication()
{
return true;
}
ckeditror/config.js added:
CKEDITOR .editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// 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?
command=QuickUpload&type=Images';
config .filebrowserFlashUploadUrl = location.hash '../ckfinder/core/connector/aspx/connector.aspx?
command=QuickUpload&type=Flash';
// config.filebrowserWindowWidth = '800';
// config.filebrowserWindowHeight = '500';
};
The colored part is where mistakes are easy to make. I didn’t put it at first.. (root directory)
After logging in, you will appear here. I kept getting errors and then added... In the front, it means starting from the project root directory.오류가 해결되었습니다! ! 마지막으로
크랙입니다.
다음은 크래킹 단계에 대한 간략한 설명입니다. (다른 사람에서 발췌)
1. FF 브라우저에서 Firebug 플러그인을 사용합니다.
2. browser 에서 ckfinder.html 파일이 호출된 것을 발견했습니다.
3. ckfinder.html에서 이 셀에 core/pages/ckffiles.html ;
4. 계속해서 iframe 노드를 엽니다. tr> id가 없어야 합니다. 돈은 여기 있습니다~
5. core/pages/ckffiles.html 소스 파일을 열고 및 이는 이 가 코드에 의해 생성되었음을 나타냅니다.
6. 다음으로 CKfinder의 js에서 답을 찾을 수 있습니다. 다행히 FCKeditor는 상대적으로 이전에 익숙하므로 ckfindercorejs 폴더로 직접 이동하여 찾을 수 있습니다.
7. 이 폴더 아래 두 개의 j 중 하나는 IE용이고 다른 하나는 FCKeditor용입니다.
8. ckfinder_gecko.js를 열고 "qu"를 검색하면 곧 eF =B.getElementById('qu');이 문장을 찾을 수 있습니다.
9. =(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);
이 단락의 마지막 추가~가 거의 완료되었습니다.
10. 위에서 언급한 여러 조건 중 en.call(window,qo)만 실행됩니다.
11. en.call(window,qo); 또는 * en.call( window,qo); *를 삭제하고 다시 새로 고쳐서 없어졌는지 확인하세요~
12. ckfinder_ie.js를 수정하세요. 동일합니다.
CKfinder 전체가 쉽게 깨질 수 있어요~ 이게 사용하기 쉽다고 생각하시면 돈을 내고 일련번호를 구매하시는 게 좋을 것 같아요. 담당자가 기술적인 도움도 드리고 시간도 많이 절약할 수 있어요