Using the CKEditor online editor in PHP

Using the CKEditor online editor in PHP

First, the official download

1, CKEditor: Click the "Download zip" button under the Ckeditor.net heading

Downloaded files: ckeditor_aspnet_3.6.2.zip

?

Second, the use of the page

Download CKEditor 3.6.1 (default is PHP version), and then in the head of the call page, write down the following two segment JS:

?

Note: The content here is the name as follows: </strong></p><p><span style= "color: #ff0000;" ><strong>3.6.2 Previous version, this statement may be written as: </strong></span></p><p><textarea name= "Content" > Welcome to 400 Phone reception center

3.6.2 version, this statement may be written as:

Welcome to visit http://www.my400800.cn issues caused by version differences, please pay attention to this issue at runtime.

The next page gets the corresponding value based on the name value content.

?

Three, custom common tools

?

?

?

Third, configuration Editor

?

The configuration of CKEditor is centralized in the Ckeditor/config.js file, and here are some common configuration parameters:

//interface language, default to ' en '
Config.language = ' ZH-CN ';

//Set wide height
Config.width = 400;
Config.height = 400;

//editor style, there are three kinds: ' Kama ' (default), ' office2003 ', ' v2 '
Config.skin = ' v2 ';

//Background color
Config.uicolor = ' #FFF ';

//toolbar (basic ' Basic ', all-rounder ' 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 ', ' 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 ']
];

//toolbar can be shrunk
Config.toolbarcancollapse = true;

//Toolbar location
config.toolbarlocation = ' top ';//optional: Bottom

//toolbar is expanded by default
Config.toolbarstartupexpanded = true;

//Cancel "Drag 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;

whether the data within the element is automatically updated when a form containing the editor is submitted
Config.autoupdateelement = true;

//sets whether to use absolute or relative directories, or null for relative directories
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 +/*z*/, ' undo ',//Undo
[CKEditor. CTRL +/*y*/, ' redo '],//Redo
[CKEditor. CTRL + CKEditor. SHIFT +/*z*/, ' redo '],//

[CKEditor. CTRL +/*l*/, ' link ',//link

[CKEditor. CTRL +/*b*/, ' bold ',//Bold
[CKEditor. CTRL +/*i*/, ' italic '],//Italic
[CKEditor. CTRL +/*u*/, ' underline '],//Underline

[CKEditor. ALT + 109/*-*/, ' Toolbarcollapse ']
]

Setting shortcut keys may conflict with browser shortcuts plugins/keystrokes/plugin.js.
Config.blockedkeystrokes = [
??? CKEditor. CTRL +/*b*/,
??? CKEditor. CTRL +/*i*/,
??? CKEditor. CTRL +/*u*/
]

//Sets the value of the background color of the element within the edit plugins/colorbutton/plugin.js.
Config.colorbutton_backstyle = {
??? element: ' Span ',
??? Styles: {' background-color ': ' # (color) '}
}

//Set the value of 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 the "other colors" option when selecting colors Plugins/colorbutton/plugin.js
Config.colorbutton_enablemore = False

//block foreground color default value set Plugins/colorbutton/plugin.js
Config.colorbutton_forestyle = {
??? element: ' Span ',
??? Styles: {' color ': ' # (color) '}
};

//The CSS file you need to add here to add an absolute path that can use relative paths and sites
Config.contentscss = './contents.css ';

//Text Direction
config.contentslangdirection = ' RTL '; From left to right

//ckeditor configuration file If you do not want to leave the configuration blank
Ckeditor.replace (' myfiled ', {customconfig: './config.js '});

//interface edit box background color plugins/dialog/plugin.js
Config.dialog_backgroundcovercolor = ' #fffefd '; can set 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 change the element when the frame's adsorption distance unit: Pixel plugins/dialog/plugin.js
Config.dialog_magnetdistance = 20;

//Whether to deny local spelling check and prompt default for deny currently only Firefox and Safari support Plugins/wysiwygarea/plugin.js.
Config.disablenativespellchecker = True

//Perform form editing functions such as: Add Rows or columns currently Firefox only supports Plugins/wysiwygarea/plugin.js
Config.disablenativetablehandles = true; The default is not to turn on

//Whether to turn on the change of the size of the picture and table function config.disableobjectresizing = true;
Config.disableobjectresizing = FALSE//default is on

//Set HTML document type
Config.doctype = '
//Whether to render the editing area Plugins/editingblock/plugin.js
Config.editingblock = true;

//Editor Enter the resulting label
Config.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 # instead of &

//Whether to convert some hard-to-display characters to the corresponding HTML characters 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 word such as "This is Chinese: Chinese." Convert to "This is Chinese: Chinese." Plugins/entitieS/plugin.js
Config.entities_processnumerical = false;

//Add new Components
Config.extraplugins = ' Myplugin '; Non-default only example

//Use high-brightness plugins/find/plugin.js when searching
Config.find_highlight = {
??? element: ' Span ',
??? Styles: {' background-color ': ' #ff0 ', ' Color ': ' #00f '}
};

//default font name Plugins/font/plugin.js
Config.font_defaultlabel = ' Arial ';

//font editing when the character set can add commonly used Chinese characters: song body, italics, blackbody and other 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}}]
};

//font default size Plugins/font/plugin.js
Config.fontsize_defaultlabel = ' 12px ';

//font size is optional when editing fonts Plugins/font/plugin.js
config.fontsize_sizes = ' 8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/ 26px;28/28px;36/36px;48/48px;72/72px '

//The style used when setting the font size plugins/font/plugin.js
Config.fontsize_style = {
??? element: ' Span ',
??? Styles: {' font-size ': ' # (Size) '},
??? Overrides: [{element: ' font ', attributes: {' size ': null}}]
};

//Whether to force copy of content removal format Plugins/pastetext/plugin.js
Config.forcepasteasplaintext =false//No removal

Do you want to force "&" instead of "&" Plugins/htmldataprocessor/plugin.js
Config.forcesimpleampersand = false;

//Format the address label Plugins/format/plugin.js
Config.format_address = {element: ' address ', attributes: {class: ' Styledaddress '}};

//Automatic formatting of div tags plugins/format/plugin.js
Config.format_div = {element: ' div ', attributes: {class: ' Normaldiv '}};

//H1 labels are automatically formatted plugins/format/plugin.js
Config.format_h1 = {element: ' H1 ', attributes: {class: ' ContentTitle1 '}};

//H2 labels are automatically formatted plugins/format/plugin.js
Config.format_h2 = {element: ' H2 ', attributes: {class: ' ContentTitle2 '}};

//H3 labels are automatically formatted plugins/format/plugin.js
Config.format_h1 = {element: ' H3 ', attributes: {class: ' ContentTitle3 '}};

//H4 labels are automatically formatted plugins/format/plugin.js
Config.format_h1 = {element: ' H4 ', attributes: {class: ' ContentTitle4 '}};

//H5 labels are automatically formatted plugins/format/plugin.js
Config.format_h1 = {element: ' h5 ', attributes: {class: ' ContentTitle5 '}};

//H6 labels are automatically formatted plugins/format/plugin.js
Config.format_h1 = {element: ' h6 ', attributes: {class: ' ContentTitle6 '}};

//P tags are automatically formatted plugins/format/plugin.js
Config.format_p = {element: ' P ', attributes: {class: ' Normalpara '}};

//Automatic formatting of the pre tag plugins/format/plugin.js
Config.format_pre = {element: ' Pre ', attributes: {class: ' Code '}};

//semicolon-delimited label names are displayed on the toolbar plugins/format/plugin.js
Config.format_tags = ' P;h1;h2;h3;h4;h5;h6;pre;address;div ';

//Whether to use the full HTML editing mode, if used, its source code will contain: such as tags
Config.fullpage = false;

//whether to ignore null characters in paragraph if not omitted, the character will be "" to indicate Plugins/wysiwygarea/plugin. js
Config.ignoreemptyparagraph = true;

//Clear the labels on both sides when clearing the link properties in the Picture properties box Plugins/image/plugin.js
Config.image_removelinkbyemptyurl = true;

//A comma-delimited set of label names, displayed in the lower-left corner of the hierarchy nested in 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 ';

//Display the Sub-menu delay, unit: Ms Plugins/menu/plugin.js
Config.menu_submenudelay = 400;

//When the new command is executed, the contents of the editor PLUGINS/NEWPAGE/PLUGIN.JS
config.newpage_html = ";

//When copying text from Word in, do you want to format the text to remove Plugins/pastefromword/plugin.js
Config.pastefromwordignorefontface = true; Default is ignore format

Whether to use

such as labeling or replacing content pasted from a Word document Plugins/pastefromword/plugin.js
Config.pastefromwordkeepsstructure = false;

//Whether to remove formatting when pasting content from Word plugins/pastefromword/plugin.js
Config.pastefromwordremovestyle = false;

//corresponds to the type of the background language to format the HTML content of the output, default to null
Config.protectedSource.push (/< "? [" S "s]*?"? &GT;/G); PHP Code
Config.protectedSource.push (//g); ASP Code
Config.protectedSource.push (/(]+>["s|" s]*?< "/asp:[^" >]+>) | (]+ "/>)/gi); ASP. NET Code

//When input: Shift+enter when inserting a label
Config.shiftentermode = CKEditor. enter_p; Optional: Ckeditor.enter_br or Ckeditor.enter_div

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

//corresponding emoji picture 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 '];

//Address of the expression plugins/smiley/plugin.js
Config.smiley_path = ' plugins/smiley/images/';

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

//load, how to edit the source code and WYSIWYG "source" and "WYSIWYG" plugins/editingblock/plugin.js.
Config.startupmode = ' WYSIWYG ';

//load, whether to display the border of the box body 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 ';

Index value of the start
Config.tabindex = 0;

When the User Types tab, the number of spaces the editor walks through, () when the value is 0 o'clock, the focus moves out of the edit box plugins/tab/plugin.js
config.tabspaces = 0;

The template used by default is Plugins/templates/plugin.js.
config.templates = ' default ';

A comma-delimited template file plugins/templates/plugin.js.
Config.templates_files = [' Plugins/templates/templates/default.js ']

When the template is used, the edit content will be replaced box is selected Plugins/templates/plugin.js
Config.templates_replacecontent = true;

Theme
Config.theme = ' default ';

Number of steps to undo record Plugins/undo/plugin.js
Config.undostacksize = 20;

To integrate Ckfinder in CKEditor, note that the path selection for Ckfinder is correct.
Ckfinder.setupckeditor (null, '/ckfinder/');

?

