Rich Text Editor CKeditor configuration and use, text editor ckeditor

Rich Text Editor CKeditor configuration and use, text editor ckeditor

Original article: CKeditor configuration and usage

 

Ckeditor: http://ckeditor.com/download

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 ('textla1'); // if it is in ASP. <TextBox> CKEDITOR. replace ('tbcontent'); // If the <TextBox> control is in the master page, write CKEDITOR as follows. 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 of config. width = 400; config. height = 400; // editor style, which can be 'kama' (default), 'office2003 ', or 'v2' config. skin = 'v2'; // the 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 with: config. toolbar_Full = [['source', '-', 'save', 'newpage', 'preview', '-', 'templates'], ['cut ', 'copy', 'Pa Ste ', 'pastetext', 'pastefromword', '-', 'print ', 'spellchecker', 'scayt'], ['undo ', 'redo ', '-', 'Find ', 'replace', '-', 'selectall', 'removeformat'], ['form', 'checkbox', 'Radio ', 'textfield', 'textea ', 'select', 'click', 'imagebutton', 'hiddenfield'], '/', ['bold ', 'italic ', 'underline', 'strike', '-', 'subscript', 'superscript'], ['numberedlist', 'bulletedlist', '-', 'outdent ', 'indent ', 'blockquote'], ['justify Left ', 'justifycenter', 'justifyright', 'justifyblock'], ['link', 'unlink', 'anchor'], ['image', 'flash ', 'table', 'horizontalrule', 'smiley ', 'specialchar', 'pagebreak'], '/', ['styles ', 'format', 'font ', 'fontsize'], ['textcolor', 'bgcolor']; // indicates whether the toolbar can be scaled down. toolbarCanCollapse = true; // The Position of the toolbar config. toolbarLocation = 'top'; // Optional: Specifies whether to expand config in the bottom toolbar by default. toolbarStartupExpanded = true; // cancel the "drag to resize" FUNCTION p Lugins/resize/plugin. js config. resize_enabled = false; // change the maximum size of the config. resize_maxHeight = 3000; // change the maximum size of the config. resize_maxWidth = 3000; // change the minimum size of the config. resize_minHeight = 250; // change the minimum size of the config. resize_minWidth = 750; // whether to update the data config in the element automatically when a form containing this editor is submitted. autoUpdateElement = true; // set whether to use the absolute directory or relative directory. If it is empty, it is the relative directory config. baseHref = ''// The z-index value of the editor config. baseFloatZIndex = 10000; // set the shortcut key confi G. keystrokes = [[CKEDITOR. ALT + 121/* F10 */, 'toolbarfo'], // 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 value of the background color of the element to 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. california = '0000000, 8B4513, 2F4F4F, California, 4B0082, 000,800, B22222, A52A2A, DAA520, 696969, California, 0000CD, California, F00, FF8C00, FFD700, 006400, 0FF, 00F, EE82EE, clerk, FFA07A, FFA500, FFFF00, 00FF00, AFEEEE, ADD8E6, clerk, clerk, FFF0F5, FAEBD7, FFFFE0, F0FFF0, F0FFFF, F0F8FF, clerk, FFF '// Whether the plugins/colorbutton/plugin option is displayed when the color is selected. js config. colorButton_enableMore = false // The default value of the foreground color of the block is 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 config of the website. contentsCss = '. /contents.css '; // text direction config. contentsLangDirection = 'rtl '; // the configuration file from left to right // CKeditor can be CKEDITOR if you do not want to leave the configuration blank. replace ('myfil Ed ', {customConfig :'. /config. js'}); // the background color of the UI editing box plugins/dialog/plugin. js config. dialog_backgroundCoverColor = '# fffefd'; // For settings, see config. dialog_backgroundCoverColor = 'white' // default // The opacity value of the background should be: 0.0 ~ Plugins/dialog/plugin between 1.0. js config. dialog_backgroundCoverOpacity = 0.5 // The unit of adsorption distance of the border when the elements are moved or changed: pixel plugins/dialog/plugin. js config. dialog_magnetDistance = 20; // whether to reject the local spelling check and the prompt is rejected by default. Currently, only firefox and safari support plugins/wysiwygarea/plugin. js. config. disableNativeSpellChecker = true // You can edit a table by adding rows or columns. Currently, only firefox supports plugins/wysiwygarea/plugin. js config. disableNativeTableHandles = true; // disabled by default // whether to enable image and table modification The function of changing the size is 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://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22 '; // Whether to render plugins/editingblock/plugin the editing area. js config. editingBlock = true; // The tag config generated by the press enter in the editor. 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 entities plugins/entities/plugin. js config. entities_additional = '#39'; // where # replaces & // whether to convert some hard-to-display characters to the corresponding HTML character plugins/entities/plugin. js config. entities_greek = tru E; // whether to convert some Latin characters to HTML plugins/entities/plugin. js config. entities_latin = true; // whether to convert some special characters into ASCII characters, such as "This is Chinese: Chinese. "to" This is Chinese: Chinese. "plugins/entities/plugin. js config. entities_processNumerical = false; // Add the new component config. extraPlugins = 'myplugin'; // This is not the default example only. // use the highlighted plugins/find/plugin during search. js config. find_highlight = {element: 'span ', styles: {'background-color':' # ff0', 'color ':'# 00f'}; // default INS/font/plugin. js config. font_defaultLabel = 'arial'; // you can add frequently-used Chinese characters to the character set during font Editing: plugins, font, plugin, and in. js config. font_names = 'arial; Times New Roman; Verdana '; // default plugins/font/plugin text. js config. font_style = {element: 'span ', styles: {'font-family': '# (family)'}, overrides: [{element: 'font', attributes: {'face': null}]}; // default font plugins/font/plu Gin. js config. fontSize_defaultLabel = '12px '; // optional font plugins/font/plugin during font editing. 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 when the font is large. js config. fontSize_style = {element: 'span ', styles: {'font-size':' # (size) '}, overrides: [{element: 'font', attributes: {'SIZE': null}]}; // whether to force 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' }}; // plugins/format/plugin are automatically formatted for the H6 tag. 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 display plugins/format/plugin on the toolbar. js config. format_tags = 'P; h1; h2; h3; h4; h5; h6; pre; address; div '; // if the complete html editing mode is used, the source code will include: 

Ii. Tips
1. Set the editor on the page instantly
<Script type = "text/javascript"> // Example 1: Set the toolbar to a basic toolbar with a height of 70 CKEDITOR. replace ('<% = tbLink. clientID. replace ("_", "$") %> ', {toolbar: 'Basic', height: 70}); // Example 2: the toolbar is a custom CKEDITOR. replace ('editor1', {toolbar: [// Bold in Italic, underlined over the line subscript ['bold ', 'italic', 'underline', 'strike ', 'subscript', 'superscript'], // reduce the indent of the number list object list and increase the indent ['numberedlist', 'bulletedlist', '-', 'outdent ', 'indent '], // align // Unlink the hyperlink to cancel the ['link', 'unlink', 'anchor '], // the pagination character ['image', 'flash ', 'table', 'horizontalrule', 'smiley ', 'specialchar', 'pagebreak'], '/', // font size of the style format ['styles ', 'format', 'font', 'fontsize'], // text color background color ['textcolor', 'bgcolor ', 'showbuckets', '-']}); </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( liclic, license.html (license) under the root directory );
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.
Iv. Version Problems
If you select simple or standed, some functions may be unavailable, such as the font color and background color. This function is not supported in the standed version. Therefore, you may be surprised to set ['textcolor', 'bgcolor'], but the text color and background color options are not displayed.
5. Remove the default paragraph mark.
To remove the <p> </p> label automatically added by CKEditor, there are two methods:
1. Add the following configuration parameters to config. js in the ckeditor directory:
Config. enterMode = CKEDITOR. ENTER_BR: Line Break blocking <br> config. shiftEnterMode = CKEDITOR. ENTER_P: blocked section <p>
2. directly change the editor's default mode to the source code mode. Add the following configuration in config. js under the ckeditor directory:
config.startupMode = 'source';
6. Use with kcfinder
By default, CKEditor does not support image uploading. You can paste images in the editor. In this way, the source files of images are saved in the database, which is prone to problems, even if the field is in text format, it is easy to exceed the maximum range. Therefore, you must use kcfinder to upload files. One is ck and the other is kc's real and good brother.
Add the following configuration in CKEditor \ config. js, the configuration file for ckeditor.
config.filebrowserBrowseUrl = 'kcfinder/browse.php?type=files';  config.filebrowserImageBrowseUrl = 'kcfinder/browse.php?type=images';  config.filebrowserFlashBrowseUrl = 'kcfinder/browse.php?type=flash';  config.filebrowserUploadUrl = 'kcfinder/upload.php?type=files';  config.filebrowserImageUploadUrl = 'kcfinder/upload.php?type=images';  config.filebrowserFlashUploadUrl = 'kcfinder/upload.php?type=flash';
 
Note that if the kcfinder path is placed in the same level directory of CKEditor, this cannot be the case.
config.filebrowserBrowseUrl = '/kcfinder/browse.php?type=files';
Note that for security reasons, image uploading is not allowed by default. You must set the upload permission in your source code. The Code is as follows:
session_start();if(!empty($_SESSION['USERNAME'])&&!empty($_SESSION['PASSWORD'])){$_SESSION['KCFINDER']['disabled'] = false;}else{echo "<script>top.location.href="http://xxx.com/login.php"> }
This is to determine whether it is a login user. If it is not a login user, it cannot be used and will jump to the login interface to log in. Someone on the Internet said to put this in kcfinder \ config. in the kcfinder configuration file of php, I found that this is not feasible. In this case, an error occurs when you select to upload an image, as shown in the following figure.