CKEditor assembly and Configuration (PHP) FCKeditor online Editor

Source: Internet
Author: User
CKEditor Installation and configuration (PHP) FCKeditor online Editor
Http://www.php8848.com/wp/zh/1700.html



What is CKEditor?

CKEditor is the famous FCKeditor finally released a new version, and the addition of the version number, this time completely renamed it, renamed to CKEditor. This should be related to the name of its development company Cksource, the company's other product is Ckfinder (an AJAX file manager), this time may be to maintain consistency, the FCK changed to CK, but the version number inherited, for the CKeditor3.0 version.

The FCKeditor project has shifted to product development for the next generation of named CKEditor, essentially using fckeditor and partially re-engineering and adopting new technologies to improve the structure. The latest version is CKEditor 3.0 Beta 2, a full-featured beta version that contains all of the features we've prepared for the first CKEditor 3.0 release as expected. You can now enjoy its amazing performance, full accessibility, and powerful and extensible JavaScript API, with most of the fckeditor you used to use in the past.

Okay, so let's see how CKEditor is installed and configured in PHP, very simple.
# installation
# Installing CKEditor is an easy task, just follow the simple steps below to get it done.
1. Download the latest version of CKEditor from our website http://ckeditor.com.cn. CKEditor 3.0.1, released on October 2009.
2. Extract the downloaded files and then 4M more files to lose weight: You can delete _samples, _source, _tests these three useless folders; open the Lang folder and kill _languages.js, En.js, All files other than Zh-cn.js, if you do not use the office2003 and v2 two kinds of skin, you can also kill both directories in the skin directory. It's not even 1M down here.
3. Upload the compiled download file to the "CKEditor" folder in the root directory of your website.
Note: You can also place these files anywhere else on your site, and the default is "CKEditor".
#

# Test Your installation
# The editor comes with a simple example Web page to verify that the installation results are working correctly, please check the "_samples" directory. Visit the following address to test:
#/HTTP <你的网站域名> / /_samples/index.html
For example:

Http://www.example.com/ckeditor/_samples/index.html

#

# integration (i.e., CKEditor installation configuration)
# There's a hard way to integrate CKEditor into your Web page, where the most common implementations are described.
#

# First step: Load CKEditor
# CKEditor is a JavaScript application and you just need to include a file reference in your Web page to load it. If you have installed CKEditor on your site's "CKEditor" directory, you can refer to the following example:
#
...


# loaded in the above way, the CKEditor JavaScript API is ready to use.
#

# Step Two: Create an instance of the editor
# CKEditor works just like a text area in your Web page (textarea), which provides a simple, easy-to-write user interface, layout, and rich text input area, but it's not easy to use the text area to achieve the same effect, which requires the user to enter HTML code.
However, in fact, CKEditor is still using a text area to pass its data to the server, the text area is invisible to the user, so you must create and edit an instance, first creating an instance:
# <textarea name="”editor1″"><p>initial value.</p></textarea>
Note that if you want to load some data into the editor, such as reading data from a database, just put the data in the text area (textarea), just like the example above. In this example, we have named this "Editor1" in the text area (TEXTAREA). This name will be used for server operations when receiving post-submitted data. Now, starting with the CKEditor JavaScript API, we use an editor instance to "replace" this plain text area (textarea), which is required for a Javascript command:
#
# The script block above can only be included in the page's <textarea>after the label. can also be in</textarea>Label, but in this case you need to listen for the "Window.onload" event:
#
#

# Step three: PHP saves editor content data
# As previously described, the editor works just like a text area (textarea), so when you submit a form that contains an instance of an editor, his data is also very simple to pass, with the name of the text area (textarea) as the health name to receive the data. For example, in the example above, in PHP we need to process the data like this:
# $editor _data = $_post[' editor1 ');
?>
#

# Client Data processing
# Some applications (like Ajax apps) need to process all the data on the client and then send the data to the server in its own way, in which case the CKEditor API is sufficient to easily get the content from the editor instance. For example
#
#

# CKEditor Installation Configuration Complete Example
#

<title>Sample–ckeditor</title>





Here is a brief introduction to the basics of CKEditor installation and configuration (in PHP), which gives us an initial experience of the next generation of the FCKeditor online editor.

Config.js configuration, you can modify the textarea size and features included in the editor

/*
Copyright (c) 2003-2010, Cksource–frederico Knabben. All rights reserved.
For licensing, see license.html or Http://ckeditor.com/license
*/
Ckeditor.editorconfig = function (config)
{
Define changes to the default configuration here. For example:
Config.language = ' fr ';
Config.uicolor = ' #AADC6E ';

Config.width = ' 80% '; Width
Config.height = 300; Height
Config.toolbar = ' full ';
Tool bar
Config.skin = ' v2′;
Config.toolbar_full =
[

[' Source ', '-', ' Bold ', ' Italic ', ' underline ', ' Strike '],
[' Justifyleft ', ' justifycenter ', ' justifyright ', ' Justifyblock '],
[' Link ', ' Unlink '],
[' Image ', ' Table ', ' horizontalrule ', ' Specialchar '],
[' Format ', ' Font ', ' FontSize '],
[' TextColor ', ' BGColor '],
[' Removeformat ']
];
};
/*
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 ']
];
*/
  • 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.