Using the CKEditor online editor in PHP

Source: Internet
Author: User
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/');

?

  • Related Article

    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.