Usage and configuration of ckeditor

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:Copy codeThe Code is as follows: // 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;
Php programmer's house
// 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/* F10 */, 'toolbarfocal '], // obtain the focus
[CKEDITOR. ALT + 122/* F11 */, 'elementspathfocal '], // element focus

[CKEDITOR. SHIFT + 121/* F10 */, 'textmenu '], // text menu
[CKEDITOR. CTRL + 90/* Z */, 'undo '], // undo
[CKEDITOR. CTRL + 89/* Y */, 'redo '], // redo
[CKEDITOR. CTRL + CKEDITOR. SHIFT + 90/* Z */, 'redo '], //
[CKEDITOR. CTRL + 76/* L */, 'link'], // link
[CKEDITOR. CTRL + 66/* B */, 'bold '], // bold
[CKEDITOR. CTRL + 73/* I */, 'italic '], // italic
[CKEDITOR. CTRL + 85/* U */, '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/* B */,
CKEDITOR. CTRL + 73/* I */,
CKEDITOR. CTRL + 85/* U */
]
// 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
Php programmer's house
// 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 = 'rgb (255,254,253) '; // 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 // dtd xhtml 1.0 Transitional // EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22 ';
// 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 HTML plugins/entities/plugin. js
Config. entities_latin = true;

// Whether to convert some special characters to ASCII characters such as "This is Chinese: 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 "&" 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 '}};
Php programmer's house
// 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 '}};
Php programmer's house
// 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: 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: ms plugins/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); // PHP Code
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. js plugins/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://example.com/editorstyles/styles.js ';
// Start index value
Config. tabIndex = 0;

// When you type a TAB, the number of spaces passed by the editor. () 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 /');