CKEditor usage and Configuration method sharing _ Web Editor

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
The CKEditor configuration is centralized in the Ckeditor/config.js file, and the following are some common configuration parameters:

Copy Code code as follows:

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;
PHP Programmer's Home
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/*f10*/, ' toolbarfocus '],//Get focus
[CKEditor. ALT + 122/*f11*/, ' elementspathfocus '],//element focus

[CKEditor. SHIFT + 121/*f10*/, ' ContextMenu '],//Text menu
[CKEditor. CTRL +/*z*/, ' undo '],//Undo
[CKEditor. CTRL +/*y*/, ' redo '],//Redo
[CKEditor. CTRL + CKEditor. SHIFT +/*z*/, ' redo '],//
[CKEditor. CTRL +/*l*/, ' link ',//link
[CKEditor. CTRL +/*b*/, ' bold '],//Bold
[CKEditor. CTRL +/*i*/, ' italic '],//Italic
[CKEditor. CTRL +/*u*/, ' 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 +/*b*/,
CKEditor. CTRL +/*i*/,
CKEditor. CTRL +/*u*/
]
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
PHP Programmer's Home
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://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22" ;
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/48px;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 '}};
PHP Programmer's Home
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 '}};
PHP Programmer's Home
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,textfield,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 (/<\?[ \S\S]*?\?&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://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/');