Ckeditor3.6.2 configuration and streamlining

I. Usage:

1. Introduce ckeditor Core File ckeditor. js to the

<SCRIPT type = "text/JavaScript" src = "ckeditor/ckeditor. js"> </SCRIPT>

2. Insert the HTML control where the editor is used <textarea>

<Textarea id = "textarea1" Cols = "20" rows = "2" class = "ckeditor"> </textarea>

In the ASP. NET environment, server-side controls can also be used. <textbox>

<Asp: textbox id = "tbcontent" runat = "server" textmode = "multiline" class = "ckeditor"> </ASP: textbox>

Add class = "ckeditor" to the control ".

3. Replace the corresponding control with the editor code.

<SCRIPT type = "text/JavaScript">
Ckeditor. Replace ('textarea1 ');
// If it is a server-side control used in the ASP. NET environment <textbox>
Ckeditor. Replace ('tbcontent ');
// If the <textbox> control is on the master page, write it like this
Ckeditor. Replace ('<% = tbcontent. clientid. Replace ("_", "$") %> ');
</SCRIPT>

4. Configuration Editor

Ckeditor configurations are concentrated in the ckeditor/config. js file. Below are some common configuration parameters:

// Interface language. The default value is 'en'

Config. Language = 'zh-cn ';

// Set the width and height

Config. width = 400;

Config. Height = 400;

// Editor style, which can be 'kama' (default), 'office2003 ', or 'v2'

Config. Skin = 'v2 ';

// Background color

Config. uicolor = '# fff ';

// Toolbar (Basic 'basic ', all-around 'full', custom) plugins/toolbar/plugin. js

Config. toolbar = 'basic ';

Config. toolbar = 'full ';

This will work:
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', 'textta', 'select', 'click', 'imagebutton ', 'hiddenfield'],
'/',
['Bold ', 'italic', 'underline', 'strike', '-', 'subscript', 'superscript'],
['Numberlist', '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;

// Position of the toolbar
Config. toolbarlocation = 'top'; // Optional: Bottom

// Whether to expand the toolbar by default
Config. toolbarstartupexpanded = true;

// Cancel the INS/resize/plugin. js function of "drag to change size"
Config. resize_enabled = false;

// Change the maximum height

Config. resize_maxheight = 3000;

// Change the maximum width
Config. resize_maxwidth = 3000;

// Change the minimum height
Config. resize_minheight = 250;

// Change the minimum width
Config. resize_minwidth = 750;
// Whether to update the data in the element automatically when a form containing the editor is submitted
Config. autoupdateelement = true;

// Set whether to use an absolute directory or a relative directory.
Config. basehref =''

// The Z-index value of the Editor
Config. basefloatzindex = 10000;

// Set the shortcut key
Config. keystrokes = [
[Ckeditor. Alt + 121, 'toolbarfo'], // obtain the focus
[Ckeditor. Alt + 122, 'elementspathfocus '], // element focus

[Ckeditor. Shift + 121, 'textmenu '], // 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']
]

// The shortcut key may conflict with the browser shortcut key plugins/keystrokes/plugin. js.
Config. blockedkeystrokes = [
Ckeditor. CTRL + 66,
Ckeditor. CTRL + 73,
Ckeditor. CTRL + 85
]

// Set the INS/colorbutton/plugin. js.
Config. colorbutton_backstyle = {
Element: 'span ',
Styles: {'background-color': '# (color )'}
}

// Set the foreground value plugins/colorbutton/plugin. js
Config. colorbutton_colors = '000000000, 8b4513, 2f4f4f, 008080,41580, 4b0082, 000,800, b22222, a52a2a, daa520,

006400, 40e0d0, rjcd, 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 the plugins/colorbutton/plugin. js option is displayed when the color is selected
Config. colorbutton_enablemore = false

// Set the default value of the foreground color of the block to plugins/colorbutton/plugin. js.
Config. colorbutton_forestyle = {
Element: 'span ',
Styles: {'color': '# (color )'}
};

// Add the CSS file to use the relative path and the absolute path of the website.
Config. contentscss = './contents.css ';

// Text direction
Config. contentslangdirection = 'rtl '; // left to right

// Do not leave the ckeditor configuration file empty.
Ckeditor. Replace ('myfied', {customconfig: './config. js '});

// INS/dialog/plugin. js
Config. dialog_backgroundcovercolor = '# fffefd'; // reference for setting
Config. dialog_backgroundcovercolor = 'white' // default

// The opacity value of the background should be: 0.0 ~ Plugins/dialog/plugin. js between 1.0
Config. dialog_backgroundcoveropacity = 0.5

// The unit of the adsorption distance of the border when the element is moved or changed: pixel plugins/dialog/plugin. js
Config. dialog_magnetdistance = 20;

// Whether to reject the local spelling check and prompt is rejected by default. Currently, only Firefox and Safari support plugins/wysiwygarea/plugin. js.
Config. disablenativespellchecker = true

// Edit a table. For example, Add rows or columns. Currently, only Firefox supports plugins/wysiwygarea/plugin. js.
Config. disablenativetablehandles = true; // disabled by default

// Whether to enable the function of changing the size of images and tables. config. disableobjectresizing = true;
Config. disableobjectresizing = false // enabled by default

// Set the HTML document type
Config.doc type = '<! Doctype HTML public "-// W3C // dtdxhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "';

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

// The tag generated by press enter in the editor
Config. entermode = ckeditor. enter_p; // Optional: ckeditor. enter_br or ckeditor. enter_div

// Whether to use HTML entities to output plugins/entities/plugin. js
Config. Entities = true;

// Define more INS/entities/plugin. js entities
Config. entities_additional = '#39'; // where # is replaced &

// Whether to convert some hard-to-display characters to the corresponding HTML character plugins/entities/plugin. js
Config. entities_greek = true;

// Whether to convert some Latin characters to htmlplugins/entities/plugin. js
Config. entities_latin = true;

// Whether to convert some special characters to ASCII characters such as "This ischinese: Chinese." to "this is Chinese: Chinese." plugins/entities/plugin. js
Config. entities_processnumerical = false;

// Add new component
Config. extraplugins = 'myplugin'; // non-default example only

// Use the highlighted plugins/find/plugin. js during search
Config. find_highlight = {
Element: 'span ',
Styles: {'background-color': '# ff0', 'color':' # 00f '}
};

// Default INS/font/plugin. js
Config. font_defaultlabel = 'arial ';

// You can add common Chinese characters to the character set during font Editing: plugins, ins, and INS/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 plugins/font/plugin. js
Config. fontsize_defaultlabel = '12px ';

// Optional font size during font Editing: plugins/font/plugin. js
Config. fontsize_sizes = '8/8px; 9/9px; 10/10 PX; 11/11 PX; 12/12 PX; 14/14 PX; 16/16 PX; 18/18 PX; 20/20 PX; 22/22 PX; 26/26 PX; 28/28 PX; 36/36 PX; 48/48 PX; 72/72 PX'

// Set the style plugins/font/plugin. js for the font size.
Config. fontsize_style = {
Element: 'span ',
Styles: {'font-size': '# (size )'},
Overrides: [{element: 'font', attributes: {'SIZE': NULL}]
};

// Whether to forcibly copy the content to remove the format plugins/pastetext/plugin. js
Config. forcepasteasplaintext = false // not removed

// Whether to force "&" to replace "& amp;" 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 the DIV tag plugins/format/plugin. js
Config. format_div = {element: 'div ', attributes: {class: 'normaldiv '}};

// Automatically format the H1 tag plugins/format/plugin. js
Config. format_h1 = {element: 'h1 ', attributes: {class: 'contenttitle1 '}};

// Automatically format the H2 tag plugins/format/plugin. js
Config. format_h2 = {element: 'h2 ', attributes: {class: 'contenttitle2 '}};

// Automatically format the H3 tag plugins/format/plugin. js
Config. format_h1 = {element: 'h3 ', attributes: {class: 'contenttitle3 '}};

// Automatically format the H4 tag plugins/format/plugin. js
Config. format_h1 = {element: 'h4 ', attributes: {class: 'contenttitle4 '}};

// Automatically format the H5 tag plugins/format/plugin. js
Config. format_h1 = {element: 'h5', attributes: {class: 'contenttitle5 '}};

// Automatically format the H6 tag 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 the PRE Tag plugins/format/plugin. js
Config. format_pre = {element: 'pre', attributes: {class: 'code '}};

// The names of tags separated by semicolons are displayed on the toolbar. plugins/format/plugin. js
Config. format_tags = 'P; H1; H2; H3; H4; H5; H6; Pre; address; Div ';

// Whether the complete HTML editing mode is used. For example, the source code of the complete HTML editing mode includes the following tags: <HTML> <body> Config. fullpage = false;

// Whether to ignore null characters in a paragraph. If not, the character will be "" indicating plugins/wysiwygarea/plugin. js
Config. ignoreemptyparagraph = true;

// Whether the <A> label plugins/image/plugin. js
Config. image_removelinkbyemptyurl = true;

// A group of tag names separated by commas (,). The names are displayed in the hierarchy nesting in the lower left corner of 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 ';

// Latency when the sub-menu is displayed. Unit: msplugins/menu/plugin. js
Config. menu_submenudelay = 400;

// When the "new" command is executed, the content in the editor is plugins/Newpage/plugin. js
Config. newpage_html = '';

// Whether to format plugins/pastefromword/plugin. js when copying text from word
Config. pastefromwordignorefontface = true; // The default format is ignored.

// Whether to use the Config. pastefromwordkeepsstructure = false;

// Whether to remove the plugins/pastefromword/plugin. js format when pasting content from the word
Config. pastefromwordremovestyle = false;

// Format the output HTML content based on the background language type. The default value is null.
Config. protectedsource. Push (/<"? ["S" s] *? "?> /G); // phpcode
Config. protectedsource. Push (// G); // ASP code
Config. protectedsource. Push (/(] +> ["s |" s] *? <"/ASP: [^">] +>) | (] + "/>)/Gi); // ASP. NET code

// The label inserted when the input is SHIFT + enter
Config. shiftentermode = ckeditor. enter_p; // Optional: ckeditor. enter_br or ckeditor. enter_div

// Optional emoticon replacement character plugins/smiley/plugin. js.
Config. smiley_descriptions = [
':)', ':(', ';)', ': D',':/',': P ',
'','','','','','',
'',';(','','','','',
'', ': Kiss',''];

// Plugins/smiley/plugin. js
Config. smiley_images = [
Comment ',
Comment ',
Comment ',
'Broken_heart.gif ', 'kiss.gif'];

// INS/smiley/plugin. js
Config. smiley_path = 'ins INS/smiley/images /';

// When the page is loaded, check whether the edit box immediately obtains the focus plugins/editingblock/plugin. jsplugins/editingblock/plugin. js.
Config. startupfocus = false;

// How to edit the source code and WYSIWYG plugins/editingblock/plugin. js when loading.
Config. startupmode = 'wysiwyg ';

// Check whether the border plugins/showblocks/plugin. js of the box is displayed during loading.
Config. startupoutlineblocks = false;

// Whether to load the Style File plugins/stylescombo/plugin. js.
Config. stylescombo_stylesset = 'default ';
// Optional
Config. stylescombo_stylesset = 'mystyles ';
Config. stylescombo_stylesset = 'mystyles:/editorstyles/styles. js ';
Config. stylescombo_stylesset = 'mystyles: http://www.example.com/editorstyles/styles.js ';

// Start index value
Config. tabindex = 0;

// When you type a tab, the number of spaces passed by the editor. (& nbsp;) when the value is 0, the focus will be removed from the plugins/TAB/plugin. js edit box.
Config. tabspaces = 0;

// Default template plugins/templates/plugin. js.
Config. Templates = 'default ';

// The template file plugins/templates/plugin. js.
Config. templates_files = ['ins INS/templates/Default. js']

// When the template is used, check whether plugins/templates/plugin. JS is selected in the "edit content will be replaced" box.
Config. templates_replacecontent = true;

// Subject
Config. theme = 'default ';

// Undo record step count plugins/Undo/plugin. js
Config. undostacksize = 20;

// Integrate ckfinder in ckeditor. Make sure that the ckfinder path is selected correctly.
// Ckfinder. setupckeditor (null, '/ckfinder /');

Ii. Tips

1. Set the editor on the page instantly

<Scripttype = "text/JavaScript">
// Example 1: Set the toolbar to the basic toolbar and the height to 70
Ckeditor. Replace ('<% = tblink. clientid. Replace ("_", "$") %> ',
{Toolbar: 'Basic ', height: 70 });
// Example 2: the toolbar is of the custom type.
Ckeditor. Replace ('editor1 ',
{
Toolbar:
[
// Bold and italic. The underline goes through the line subscript to mark the word.
['Bold ', 'italic', 'underline', 'strike', 'subscript', 'superscript'],
// The number list Object List reduces indentation and increases indentation
['Numberlist', 'bulletedlist', '-', 'outdent ', 'indent'],
// Align left to center and align right to both ends
['Justifyleft', 'justifycenter', 'justifyright', 'justifyblock'],
// Unlink the hyperlink.
['Link', 'unlink', 'anchor '],
// A special character paging character for the horizontal expression in the Flash table
['Image', 'flash', 'table', 'horizontalrule', 'smiley ', 'specialchar', 'pagebreak'],
'/',
// Font size in style format
['Styles ', 'format', 'font', 'fontsize'],
// Text color background color
['Textcolor', 'bgcolor'],
// Display the block in full screen
['Delimiter', 'showbucket', '-']
]
}
);
</SCRIPT>

Iii. Simplified ckeditor

When deployed on a Web server, the following folders and files can be deleted:

/_ Samples: Sample folder;

/_ Source: Uncompressed source program;

/Lang folder files except zh-cn.js, en. js (you can also retain files in other languages as needed );

Changes.html(update later, install.html(installation instructions, license.html (license );

The skin that is not required in the/skins directory is generally V2 (simple and simple). If you only retain V2, you must specify the skin in config. js.

Ckeditor3.6.2 configuration and streamlining