CKEditor usage and Configuration method sharing _ Web Editor

Source: Internet
Author: User
Tags php code
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/');

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.