How to use CKEditor

How to use CKEditor2014-03-31 09:44 8649 People read Comments (1) favorite reports

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

The official website of CKEditor is http://ckeditor.com/

First, how to use:

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>

In the case of an ASP. Server-side controls are also available <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 with the editor code

<script type= "Text/javascript" >
Ckeditor.replace (' TextArea1 ');

If you are using server-side controls in an 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 configuration of CKEditor is centralized in the Ckeditor/config.js file, and here 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 (basic ' basic ', almighty ' full ', custom) plugins/toolbar/plugin.js

Config.toolbar = ' Basic ';

Config.toolbar = ' full ';

This will work with:
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" 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 a 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;

Sets whether to use absolute or relative directories, or null for relative directories
Config.basehref = ' '

The Z-index value of the 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 shortcut keys may conflict with browser shortcuts plugins/keystrokes/plugin.js.
Config.blockedkeystrokes = [
CKEditor. CTRL +/*b*/,
CKEditor. CTRL +/*i*/,
CKEditor. CTRL +/*u*/
]

Sets the value of the background color of the element within the edit plugins/colorbutton/plugin.js.
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 selecting a color plugins/colorbutton/plugin.js
Config.colorbutton_enablemore = False

The foreground color default value of the chunk 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 that can be used relative to the path and site
Config.contentscss = './contents.css ';

Text direction
config.contentslangdirection = ' RTL '; From left to right

CKEditor configuration file If you do not want to leave the configuration blank
Ckeditor.replace (' myfiled ', {customconfig: './config.js '});

Background color plugins/dialog/plugin.js of 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 deny local spelling check and prompt default for deny currently only Firefox and Safari support Plugins/wysiwygarea/plugin.js.
Config.disablenativespellchecker = True

Perform table editing functions such as: Add Rows or columns currently Firefox only supports Plugins/wysiwygarea/plugin.js
Config.disablenativetablehandles = true; The default is not to turn on

Whether to turn on the resizing of the picture and the table function config.disableobjectresizing = true;
Config.disableobjectresizing = FALSE//default is on

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 %22 ';

Whether to render the editing area Plugins/editingblock/plugin.js
Config.editingblock = true;

Labels generated by carriage return in 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 # instead of &

Whether to convert some hard-to-display characters to the 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 word such as "This is Chinese: Chinese." Convert to "This is Chinese: & #27721;& #35821;." Plugins/entities/plugin.js
Config.entities_processnumerical = false;

Add a new component
Config.extraplugins = ' Myplugin '; Non-default only example

Use high-light plugins/find/plugin.js when searching
Config.find_highlight = {
element: ' Span ',
Styles: {' background-color ': ' #ff0 ', ' Color ': ' #00f '}
};

The default font name Plugins/font/plugin.js
Config.font_defaultlabel = ' Arial ';

Character sets in font editing can add commonly used Chinese characters: Arial, italic, blackbody, 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}}]
};

Font default size Plugins/font/plugin.js
Config.fontsize_defaultlabel = ' 12px ';

Optional font size when 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 '

Style plugins/font/plugin.js to use when setting font size
Config.fontsize_style = {
element: ' Span ',
Styles: {' font-size ': ' # (Size) '},
Overrides: [{element: ' font ', attributes: {' size ': null}}]
};

Whether to force copy of the content to remove the format plugins/pastetext/plugin.js
Config.forcepasteasplaintext =false//No removal

Do you want to force "&" instead of "&amp;"? 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 '}};

Automatic formatting of H1 tags plugins/format/plugin.js
Config.format_h1 = {element: ' H1 ', attributes: {class: ' ContentTitle1 '}};

Automatic formatting of H2 tags plugins/format/plugin.js
Config.format_h2 = {element: ' H2 ', attributes: {class: ' ContentTitle2 '}};

Automatic formatting of H3 tags plugins/format/plugin.js
Config.format_h1 = {element: ' H3 ', attributes: {class: ' ContentTitle3 '}};

Automatic formatting of H4 tags plugins/format/plugin.js
Config.format_h1 = {element: ' H4 ', attributes: {class: ' ContentTitle4 '}};

Automatic formatting of H5 tags plugins/format/plugin.js
Config.format_h1 = {element: ' h5 ', attributes: {class: ' ContentTitle5 '}};

Automatic formatting of H6 tags 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 '}};

Automatic formatting of the pre tag plugins/format/plugin.js
Config.format_pre = {element: ' Pre ', attributes: {class: ' Code '}};

A semicolon-delimited label name appears on the toolbar plugins/format/plugin.js
Config.format_tags = ' P;h1;h2;h3;h4;h5;h6;pre;address;div ';

Whether to use the full HTML editing mode, if used, its source code will contain:Config.fullpage = false;

Whether to ignore null characters in a paragraph if not omitted, the character will be represented as "" Plugins/wysiwygarea/plugin.js
Config.ignoreemptyparagraph = true;

Whether to clear both sides of the <a> label when you clear the Link property in the Picture properties box Plugins/image/plugin.js
Config.image_removelinkbyemptyurl = true;

A comma-delimited set of label names, displayed in the lower-left corner of the hierarchy nested in 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 in Display of submenu, Unit: 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 copying text from Word in, do you want to format the text to remove Plugins/pastefromword/plugin.js
Config.pastefromwordignorefontface = true; Default is ignore format

Whether to use Config.pastefromwordkeepsstructure = false;

Whether to remove formatting when pasting content from Word plugins/pastefromword/plugin.js
Config.pastefromwordremovestyle = false;

The type that corresponds to the background language to format the HTML content of the output, default to NULL
Config.protectedSource.push (/<\?[ \S\S]*?\?>/G); PHP Code
Config.protectedSource.push (//g); ASP Code
Config.protectedSource.push (/(]+>[\s|\s]*?<\/asp:[^\>]+>) | (]+\/>)/gi); ASP. NET Code

tags inserted when input: Shift+enter
Config.shiftentermode = CKEditor. enter_p; Optional: Ckeditor.enter_br or Ckeditor.enter_div

Optional expression substitution 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 '];

Address of the expression plugins/smiley/plugin.js
Config.smiley_path = ' plugins/smiley/images/';

The edit box immediately gets the focus plugins/editingblock/plugin.js plugins/editingblock/plugin.js when the page is loaded.
Config.startupfocus = false;

When loading, how to edit the source code and WYSIWYG "source" and "WYSIWYG" plugins/editingblock/plugin.js.
Config.startupmode = ' WYSIWYG ';

Whether to display the border of the box 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 of the start
Config.tabindex = 0;

The number of spaces the editor traversed when the User Typed tab, (&nbsp;) When the value is 0 o'clock, the focus moves out of the edit box plugins/tab/plugin.js
config.tabspaces = 0;

The template used by default is Plugins/templates/plugin.js.
config.templates = ' default ';

A comma-delimited template file plugins/templates/plugin.js.
Config.templates_files = [' Plugins/templates/templates/default.js ']

When the template is used, the edit content will be replaced box is selected Plugins/templates/plugin.js
Config.templates_replacecontent = true;

Theme
Config.theme = ' default ';

Number of steps to undo record Plugins/undo/plugin.js
Config.undostacksize = 20;

To integrate Ckfinder in CKEditor, note that the path selection for Ckfinder is correct.
Ckfinder.setupckeditor (null, '/ckfinder/');

Second, some of the use of skills

1. Set the editor instantly in the page

<script type= "Text/javascript" >
Example 1: Set the toolbar as the base 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 center to aligns justify
[' Justifyleft ', ' justifycenter ', ' justifyright ', ' Justifyblock '],
Hyperlink Cancel Hyperlink Anchor Point
[' Link ', ' Unlink ', ' Anchor '],
Picture Flash table horizontal line expression Special character page break
[' Image ', ' Flash ', ' Table ', ' horizontalrule ', ' Smiley ', ' Specialchar ', ' pagebreak '],
‘/‘,
Style formatting font font size
[' Styles ', ' Format ', ' Font ', ' FontSize '],
Text color Background color
[' TextColor ', ' BGColor '],
Full-screen display of chunks
[' Maximize ', ' showblocks ', '-']
]
}
);
</script>

Third, Streamline CKEditor

The following folders and files can be deleted when you deploy to a Web server:

/_samples: Sample folder;

/_source: Uncompressed source program;

/lang folders except Zh-cn.js, en.js files (you can also keep other language files as needed);

root directory changes.html (update list), install.html (installation point), license.html (use license);

/skins the unwanted skin in the directory, generally with V2 (simple, plain), if only V2 is reserved, the skin must be specified in the config.js.

How to use CKEditor