Detailed configuration summary of ckEditor in asp

<script type=text/javascript src=ckeditor/ckeditor.js></script>

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

Copy the code as follows:

<textarea id=TextArea1 cols= 20 rows=2 class=ckeditor></textarea>

If it is an ASP.NET environment, you can also use the server-side control <TextBox>

to copy the code as follows:

<asp:TextBox ID=tbContent runat=server TextMode=MultiLine class=ckeditor></asp:TextBox>

Note that class=ckeditor is added to the control.

3. Replace the corresponding control with the editor code.

Copy the code as follows:

<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 in the master page, write

CKEDITOR.replace('<%=tbContent.ClientID.Replace(_,$) %>');

</script>

4. Configure the editor

to copy the code The code is as follows:

The configuration of ckeditor is concentrated in the ckeditor/config.js file. The following are some commonly used configuration parameters:

// Interface language, the default is 'en'

config.language = 'zh-cn';

// Set width and height

config.width = 400;

config.height = 400;

// There are three editor styles: 'kama' (default), 'office2003', 'v2'

config.skin = 'v2';

// Background color

config.uiColor = '#FFF';

// Toolbar (Basic'Basic', All-round'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 collapsed

config.toolbarCanCollapse = true;

//The location of the toolbar

config.toolbarLocation = 'top'; //Optional: bottom

//Whether the toolbar is expanded by default

config.toolbarStartupExpanded = true;

//Cancel Drag and drop to change size 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 the 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;

//When submitting a form that contains this editor When, whether to automatically update the data in the element

config.autoUpdateElement = true;

// Set whether to use an absolute directory or a relative directory, if empty, it means a relative directory

config.baseHref = ''

// Editor's z-index value

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 + 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' ]

]

//Set shortcut keys may conflict with browser shortcut keys plugins/keystrokes/plugin.js.

config.blockedKeystrokes = [

CKEDITOR.CTRL + 66 /*B*/,

CKEDITOR.CTRL + 73 /*I* /,

CKEDITOR.CTRL + 85 /*U*/

]

//Set the background color value of the element in the editor plugins/colorbutton/plugin.js.

config.colorButton_backStyle = {

element : 'span',

styles : { 'background-color' : '#(color)' }

}

//Set 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 other color options when selecting a color plugins/colorbutton/plugin .js

config.colorButton_enableMore = false

//The default value of the block's foreground color is set plugins/colorbutton/plugin.js

config.colorButton_foreStyle = {

element : 'span',

styles : { 'color' : '#(color)' } }

;

/ /The CSS files that need to be added can be added here using relative paths and absolute paths to the website

config.contentsCss = './contents.css';

//Text direction

config.contentsLangDirection = 'rtl'; //From left to right

//If you don't want to configure the CKeditor configuration file, just leave it blank

CKEDITOR.replace( 'myfiled', { customConfig : './config.js' } );

//Background color of the interface edit box plugins/dialog/plugin.js

config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)'; //Can be set for 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

//Move or The adsorption distance unit of the border when changing the element: pixel plugins/dialog/plugin.js

config.dialog_magnetDistance = 20;

//Whether to deny local spelling check and prompts. The default is to deny. Currently only firefox 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; //The default is not enabled

//Whether to enable the function of changing the size of pictures and tables config.disableObjectResizing = true;

config.disableObjectResizing = false //The default is enabled

//Set the 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;

//Editor The label generated by

the 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 # is replaced &

//Whether to convert some difficult-to-display characters into corresponding HTML characters plugins/entities/plugin.js

config.entities_greek = true;

//Whether to convert some Latin characters into HTML plugins/entities/plugin.js

config.entities_latin = true;

//Whether to convert some special characters into ASCII characters such as This is Chinese: 汉语.Convert to This is Chinese: 中文. plugins/entities/plugin.js

config.entities_processNumerical = false ;

//Add new component

config.extraPlugins = 'myplugin'; //Non-default example only

//Use highlight color when searching plugins/find/plugin.js

config.find_highlight = {

element : 'span',

styles : { 'background-color' : '#ff0', 'color' : '#00f' }

};

//Default font name plugins/font/plugin.js

config.font_defaultLabel = 'Arial';

//Commonly used Chinese characters can be added to the character set when editing fonts: Song, Kai, Hei, 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 } } ]

};

//Default font size plugins/font/plugin.js

config.fontSize_defaultLabel = '12px';

//Optional font size when editing font plugins/font /plugin.js

config.fontSize_sizes ='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;2 0/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'

//Styles used when setting font size plugins/font/plugin.js

config.fontSize_style = {

element : 'span',

styles : { 'font-size' : '#(size)' },

overrides : [ { element : 'font', attributes : { 'size' : null } } ]

};

//Whether to force the copied content to remove the format plugins/pastetext/plugin.js

config.forcePasteAsPlainText =false //Do not remove

//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 DIV tags 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 H2 tags plugins/format/plugin.js

config.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' } };

//Automatically format H3 tags plugins/format/plugin.js

config.format_h1 = { element : 'h3', attributes : { class : 'contentTitle3' } };

//Automatically format H4 tags Formatting plugins/format/plugin.js

config.format_h1 = { element : 'h4', attributes : { class : 'contentTitle4' } };

//Automatically format H5 tags plugins/format/plugin.js

config.format_h1 = { element : 'h5', attributes : { class : 'contentTitle5' } };

//Automatically format H6 tags 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' } };

//Tag names 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 If you use the complete html editing mode, the source code will include: <html><body></body></html> and other tags

config.fullPage = false;

//Whether to ignore the empty characters in the paragraph. If not ignored, the characters will be represented by plugins/wysiwygarea/plugin.js

config.ignoreEmptyParagraph = true;

//Whether to clear both sides of <a> at the same time when clearing the link attribute in the image attribute box Tag plugins/image/plugin.js

config.image_removeLinkByEmptyURL = true;

//A set of tag names separated by commas, displayed in the hierarchical nesting in the lower left corner 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 submenu, unit: ms plugins/menu/plugin.js

config.menu_subMenuDelay = 400;

//When a new command is executed, the content in the editor plugins/newpage/plugin.js

config.newpage_html = '';

//When text is copied from word. , whether to format and remove text plugins/pastefromword/plugin.js

config.pasteFromWordIgnoreFontFace = true; //The default is to ignore the format

//Whether to use tags such as <h1><h2> to modify or replace the content pasted from the word document plugins/pastefromword/plugin.js

config.pasteFromWordKeepsStructure = false;

//When pasting content from word Whether to remove the format plugins/pastefromword/plugin.js

config.pasteFromWordRemoveStyle = false;

//Format the output HTML content corresponding to the type of background language. The default is empty

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 entering: shift+Enter

config.shiftEnterMode = CKEDITOR.ENTER_P; //Optional: CKEDITOR.ENTER_BR or CKEDITOR.ENTER_DIV

//Optional expression replacement character plugins/smiley/plugin. js.

config.smiley_descriptions = [

':)', ':(', ';)', ':D', ':/', ':P',

'', '', '', '', '

', '', '', ';(', '', '', '', '',

'', ':kiss' , '' ];

//Corresponding expression images 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 emoticon plugins/smiley/plugin.js

config.smiley_path = 'plugins/smiley/images/';

//When the page loads, whether the editing box immediately gets focus plugins/editingblock/plugin.js plugins/editingblock/plugin.js.

config.startupFocus = false;

//When loading, with How to edit source code and WYSIWYG source and wysiwyg plugins/editingblock/plugin.js.

config.startupMode ='wysiwyg';

//Whether to display the frame border 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';

//Starting index value

config.tabIndex = 0;

// When the user types TAB, the number of spaces passed by the editor, () when the value is 0, the focus will move out of the edit box plugins/tab/plugin.js

config.tabSpaces = 0;

//The default template plugins/templates/plugin.js.

config.templates = 'default';

//Comma-separated template files plugins/templates/plugin.js.

config.templates_files = [ ' plugins/templates/templates/default.js' ]

//When using templates, the edit content will be replaced if the box plugins/templates/plugin.js is checked

config.templates_replaceContent = true;

//Theme

config.theme = 'default';

//The number of undo recording steps plugins/undo/plugin.js

config.undoStackSize =20;

//Integrate CKFinder in CKEditor, pay attention to the path selection of ckfinder Be correct.

//CKFinder.SetupCKEditor(null, '/ckfinder/');