Web page Editor CKEditor and Ckfinder configuration steps Share _ Basics

first, the use of methods:
1. Introduction of CKEditor Core file in page <script type= "Text/javascript" src= "Ckeditor/ckeditor.js" ></script>
2. Insert HTML controls where you use the editor <textarea>
<textarea id= "TextArea1" cols= "rows=" "2" class= "CKEditor" ></textarea>
If it is a asp.net environment, you can also use server-side controls <TextBox>
<asp:textbox id= "tbcontent" runat= "Server" textmode= "MultiLine" class= "CKEditor" ></asp:TextBox>
Note Add class= "CKEditor" to the control.
3, replace the corresponding control into editor code
<script type= "Text/javascript" >
Ckeditor.replace (' TextArea1 ');
If you are using a server-side control in a asp.net environment <TextBox>
Ckeditor.replace (' tbcontent ');
If the <TextBox> control is in the master page, write this
Ckeditor.replace (' <%=tbcontent.clientid.replace "(" _ "," $ ")%> ');
</script>
4, configuration Editor (these configurations are not related to the default)
The CKEditor configuration is centralized in the Ckeditor/config.js file, and the following are some common configuration parameters:
Interface language, default to ' en '
Config.language = ' ZH-CN ';
Set width height
Config.width = 400;
Config.height = 400;
Editor style, there are three kinds: ' Kama ' (default), ' office2003 ', ' v2 '
Config.skin = ' v2 ';
Background color
Config.uicolor = ' #FFF ';
Toolbars (base ' basic ', almighty ' 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 resize feature 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 data within an element when submitting a form that contains this editor
Config.autoupdateelement = true;
Whether the setting uses an absolute or relative directory, and a null relative directory
Config.basehref = ' '
Z-index Value of Editor
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 +, ' undo '],//Undo
[CKEditor. CTRL +, ' redo '],//Redo
[CKEditor. CTRL + CKEditor. SHIFT +, ' redo '],//
[CKEditor. CTRL + TAB, ' link ',//link
[CKEditor. CTRL +, ' bold '],//Bold
[CKEditor. CTRL +, ' italic '],//Italic
[CKEditor. CTRL +, ' underline '],//Underline
[CKEditor. ALT + 109, ' toolbarcollapse ']
]
Setting a shortcut key may conflict with the browser shortcut key plugins/keystrokes/plugin.js.
Config.blockedkeystrokes = [
CKEditor. CTRL + 66,
CKEditor. CTRL + 73,
CKEditor. CTRL + 85
]
Sets the value plugins/colorbutton/plugin.js of the background color of the elements in the edit.
Config.colorbutton_backstyle = {
element: ' Span ',
Styles: {' background-color ': ' # (color) '}
}
Sets 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 you select a color plugins/colorbutton/plugin.js
Config.colorbutton_enablemore = False
The foreground color default value of the block is set Plugins/colorbutton/plugin.js
Config.colorbutton_forestyle = {
element: ' Span ',
Styles: {' color ': ' # (color) '}
};
The CSS file you need to add here adds an absolute path to use relative paths and Web sites
Config.contentscss = './contents.css ';
Text direction
config.contentslangdirection = ' RTL '; From left to right
CKEditor configuration file If you do not want to configure a blank
Ckeditor.replace (' myfiled ', {customconfig: './config.js '});
Background color Plugins/dialog/plugin.js The interface edit box
Config.dialog_backgroundcovercolor = ' rgb (255, 254, 253) '; can set reference
Config.dialog_backgroundcovercolor = ' white '//default
The opacity value of the background should be between: 0.0~1.0 Plugins/dialog/plugin.js
config.dialog_backgroundcoveropacity = 0.5
The adsorption distance of the border when moving or changing elements: pixel Plugins/dialog/plugin.js
Config.dialog_magnetdistance = 20;
Whether to reject local spelling checker and prompt defaults to deny current Firefox only and Safari support Plugins/wysiwygarea/plugin.js.
Config.disablenativespellchecker = True
Perform table editing functions such as adding rows or columns currently only Firefox supports Plugins/wysiwygarea/plugin.js
Config.disablenativetablehandles = true; Default is not open
Whether to turn on the size of the picture and table function config.disableobjectresizing = true;
Config.disableobjectresizing = false//default to open
Set HTML Document type
Config.doctype = ' <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";
Do you want to render the editing area Plugins/editingblock/plugin.js
Config.editingblock = true;
Labels generated by carriage returns 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 the # replaces &
Whether to convert some characters that are difficult to display to the corresponding HTML character plugins/entities/plugin.js
Config.entities_greek = true;
Convert some Latin characters to HTML plugins/entities/plugin.js
Config.entities_latin = true;
Convert some special characters to ASCII character Furu "This is Chinese: Chinese." Convert to ' This is Chinese: Chinese. '
Plugins/entities/plugin.js
Config.entities_processnumerical = false;
Add New Component
Config.extraplugins = ' Myplugin '; Non-default only example
Use high-color plugins/find/plugin.js when searching
Config.find_highlight = {
element: ' Span ',
Styles: {' background-color ': ' #ff0 ', ' Color ': ' #00f '}
};
Default font name Plugins/font/plugin.js
Config.font_defaultlabel = ' Arial ';
Font editing character set can add commonly used Chinese characters: XXFarEastFont-Arial, italics, boldface, etc. plugins/font/plugin.js
Config.font_names = ' Arial; Times New Roman; Verdana ';
Default style for text plugins/font/plugin.js
Config.font_style = {
element: ' Span ',
Styles: {' font-family ': ' # (family) '},
Overrides: [{element: ' font ', attributes: {' face ': null}}]
};
Font default size Plugins/font/plugin.js
Config.fontsize_defaultlabel = ' 12px ';
Optional font size for font editing 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 '
The style to use when setting the font size plugins/font/plugin.js
Config.fontsize_style = {
element: ' Span ',
Styles: {' font-size ': ' # (Size) '},
Overrides: [{element: ' font ', attributes: {' size ': null}}]
};
Whether to force copied content to remove the format plugins/pastetext/plugin.js
Config.forcepasteasplaintext =false//No removal
Whether to force "&" instead of "&" Plugins/htmldataprocessor/plugin.js
Config.forcesimpleampersand = false;
Format the address label Plugins/format/plugin.js
Config.format_address = {element: ' address ', attributes: {class: ' Styledaddress '}};
Automatic formatting of div tags plugins/format/plugin.js
Config.format_div = {element: ' div ', attributes: {class: ' Normaldiv '}};
Automatically format the H1 label Plugins/format/plugin.js
Config.format_h1 = {element: ' H1 ', attributes: {class: ' ContentTitle1 '}};
Automatically format the H2 label Plugins/format/plugin.js
Config.format_h2 = {element: ' H2 ', attributes: {class: ' ContentTitle2 '}};
Automatically format the H3 label Plugins/format/plugin.js
Config.format_h1 = {element: ' H3 ', attributes: {class: ' ContentTitle3 '}};
Automatically format the H4 label Plugins/format/plugin.js
Config.format_h1 = {element: ' H4 ', attributes: {class: ' ContentTitle4 '}};
Automatically format the H5 label Plugins/format/plugin.js
Config.format_h1 = {element: ' h5 ', attributes: {class: ' ContentTitle5 '}};
Automatically format the H6 label Plugins/format/plugin.js
Config.format_h1 = {element: ' h6 ', attributes: {class: ' ContentTitle6 '}};
Automatic formatting of P tags plugins/format/plugin.js
Config.format_p = {element: ' P ', attributes: {class: ' Normalpara '}};
Automatically format the pre label Plugins/format/plugin.js
Config.format_pre = {element: ' Pre ', attributes: {class: ' Code '}};
Display plugins/format/plugin.js on the toolbar with a semicolon-delimited label name
Config.format_tags = ' P;h1;h2;h3;h4;h5;h6;pre;address;div ';
Whether to use full HTML editing mode if used, its source code will contain:Config.fullpage = false;
Whether to ignore null characters in a paragraph if not ignored, the character will be represented as "" Plugins/wysiwygarea/plugin.js
Config.ignoreemptyparagraph = true;
Whether to clear both sides of the <a> label when clearing the link properties in the Picture property box Plugins/image/plugin.js
Config.image_removelinkbyemptyurl = true;
A comma-delimited set of label names displayed in a hierarchical nesting in the lower-left corner of the plugins/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 submenus, units: Ms Plugins/menu/plugin.js
Config.menu_submenudelay = 400;
When you execute the new command, the contents of the editor Plugins/newpage/plugin.js
config.newpage_html = ';
When you copy text from Word in, do you want to format text to remove it plugins/pastefromword/plugin.js
Config.pastefromwordignorefontface = true; Default to ignore formatting
Whether to use Config.pastefromwordkeepsstructure = false;
Do you want to remove formatting when you paste content from Word plugins/pastefromword/plugin.js
Config.pastefromwordremovestyle = false;
Corresponds to the type of background language to format the HTML content of the output, which defaults to null
Config.protectedSource.push (/<?[ Ss]*?? &GT;/G); PHP Code
Config.protectedSource.push (//g); ASP Code
Config.protectedSource.push (/(]+>[s| s]*?</asp:[^>]+>) | (]+/>)/gi); asp.net Code
Label inserted when entering: Shift+enter
Config.shiftentermode = CKEditor. enter_p; Optional: Ckeditor.enter_br or Ckeditor.enter_div
An optional expression replaces the character plugins/smiley/plugin.js.
Config.smiley_descriptions = [
':) ', ':(', ';) ', ':D ', ':/', ':P ',
'', '', '', '', '', '',
'', ';(', '', '', '', '',
', ': Kiss ', '];
The corresponding expression picture 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 expression plugins/smiley/plugin.js
Config.smiley_path = ' plugins/smiley/images/';
When the page is loaded, the edit box gets the focus immediately plugins/editingblock/plugin.js plugins/editingblock/plugin.js.
Config.startupfocus = false;
When loading, in what way edit source and WYSIWYG "source" and "WYSIWYG" plugins/editingblock/plugin.js.
Config.startupmode = ' WYSIWYG ';
Displays the border of the frame body 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 ';
Index value at start
Config.tabindex = 0;
When the User Types tab, the number of spaces the editor passes, () is 0 o'clock, and the focus moves out of the edit box plugins/tab/plugin.js
config.tabspaces = 0;
The template plugins/templates/plugin.js is used by default.
config.templates = ' default ';
A comma-delimited template file plugins/templates/plugin.js.
Config.templates_files = [' Plugins/templates/templates/default.js ']
Whether the edit content will be replaced box is selected when the template is used Plugins/templates/plugin.js
Config.templates_replacecontent = true;
Theme
Config.theme = ' default ';
Number of record steps undone Plugins/undo/plugin.js
Config.undostacksize = 20;
Integrate Ckfinder in CKEditor, and note that Ckfinder's path selection is correct.
Ckfinder.setupckeditor (null, '/ckfinder/');
second, some of the use of skills
1, in the page of the immediate settings editor
<script type= "Text/javascript" >
Example 1: Set the toolbar to be a basic toolbar with a height of 70
Ckeditor.replace (' <%=tblink.clientid.replace ("_", "$")%> ',
{toolbar: ' Basic ', height:70});
Example 2: The toolbar is a custom type
Ckeditor.replace (' Editor1 ',
{
Toolbar:
[
Bold Italic, underline through line subscript word
[' Bold ', ' italic ', ' underline ', ' Strike ', ' subscript ', ' superscript '],
Number list Entity list Decrease Indent Increase Indent
[' Numberedlist ', ' bulletedlist ', '-', ' outdent ', ' Indent '],
Align left-aligned to Zishing justified
[' Justifyleft ', ' justifycenter ', ' justifyright ', ' Justifyblock '],
Hyperlink Remove Hyperlink Anchor point
[' Link ', ' Unlink ', ' Anchor '],
Picture Flash table Horizontal Expression special character page break
[' Image ', ' Flash ', ' Table ', ' horizontalrule ', ' smiley ', ' Specialchar ', ' pagebreak '],
'/',
Style format Font font size
[' Styles ', ' Format ', ' Font ', ' fontsize '],
Text color Background color
[' TextColor ', ' bgcolor '],
Full Screen display block
[' Maximize ', ' showblocks ', '-']
]
}
);
</script>
Iii. streamlining of CKEditor
When you deploy to a Web server, the following folders and files can be deleted:
/_samples: Sample folder;
/_source: Not compressed source program;
/lang folders except Zh-cn.js, en.js files (other language files may also be retained as required);
changes.html (update list) under the root directory, install.html (installation point), license.html (use license);
/skins the skin that is not needed under the catalogue, general use V2 (simple, plain), if only retains V2 must specify the skin in Config.js.
These things are free, using relative FCKeditor, save the reference of class library Fckdetior.dll, use js! directly on the page ... But this time
Find the upload function can not be used! Originally fckefitor his former function integration split, CKEditor, Ckfinder, two parts, the latter is the upload function to the money!! Again
Search on the Internet, there is a way to crack, under a ckfinder into the project root directory!! On the page, add the
<script type= "Text/javascript" >
If you are using a server-side control in a asp.net environment <TextBox>
var editor = ckeditor.replace (' tbcontent ');
Ckfinder.setupckeditor (editor, '/ckfinder/'); (This is ckfinder on the basis of CKEditor)
</script>
Find or not, upload the wrong page! Then went on a lot of twists and goes:
Ckfinder/config:
public override bool Checkauthentication ()
{
return true;
}
Ckeditror/config.js Add:
Ckeditor.editorconfig = function (config)
{
Define changes to the 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 parts are prone to mistakes, and I didn't put them in the first place. (root directory)
After you log in, you are here. It went wrong and then added. The previous representation starts with the engineering root directory. Error Resolution!! At last
It's cracked:
Here's a quick break: (excerpt from someone else)
1, the use of FF browser Firebug plug-ins;
2, open the installation of a good file browser, found to be called ckfinder.html file;
3, found in ckfinder.html <td id = "IO" > This cell is written in a iframe,src is core/pages/ckffiles.html;
4, continue to open the IFRAME node in the <tr id= "he" > and <tr id= "Qu" > two between the tags have a <tr> no ID, that call you to pay the words in here!
5, open core/pages/ckffiles.html source file, found that <tr id= "he" > and <tr id= "Qu" between > There is nothing between this <tr> is code generation;
6, the next can be in the Ckfinder JS inside to find the answer, fortunately before fckeditor or more familiar, directly to the Ckfindercorejs folder below to find;
7, this folder under the two JS one is for IE used, the other is to other browsers, this and fckeditor like;
8, open Ckfinder_gecko.js search "Qu", soon found the Ef=b.getelementbyid (' qu ');
9, look back.
if (Dk.indexof (ab.bW.substr (1,1)% 5) &&window.top[qc+ ' 143141x74x69157x6e '][qf+ ' 163x74 ' 1==].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);
This last appendchild~, almost right here;
10, the front a lot of conditions, the implementation of the only En.call (WINDOW,QO), not it or what ~;
11. Delete En.call (WINDOW,QO) or * En.call (WINDOW,QO); *, and then refresh to see if there is no ~;
12, and then modify the Ckfinder_ie.js, the same.
The whole ckfinder simple to complete the ~, if you think this good to use the best or give some money to buy a serial number it, the official can give you technical help can save a lot of time