Usage and configuration of ckeditor

Source: Internet
Author: User

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 /');

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.