Online editor CKEditor (1)-PHP (30)

Online Editor

The online editor, also known as WYSIWYG editor, is a common HTML source editor.

WYSIWYG: The user at the time of input, both the format and the style can be saved by the system intact, and finally in the viewing time, you can follow the original structure of the user input output.

Online editor Categories

There are many more common online editors, FCKeditor (online editor +ajax browser-side server File Manager, free), CKEditor (Content and knowledge, online editor and server-side file Manager, online editor free, Server-side File Manager charge (Ckfinder)), Baidu's Ueditor,kindeditor

Online Editor role

An online editor is what you see and what you get.

Role

1. Easy to operate, improve user experience
2. Simplify operations
3. Improve the compatibility of content

Ckeditor&ckfinder

CKEditor has a long history and is widely used in Web projects at home and abroad.

Basic all in the online editor is similar, no outside is the number of plug-ins (function), operating manual

Why use CKEditor?

1. is widely used
2. CKEditor very mature (market or product)
3. CKEditor compatibility is good (all the online editor is JS written)

CKEditor Installation

The obtained ckeditor can be extracted and placed in the corresponding project location to be used.

1. Gets the CKEditor editor. Http://www.ckeditor.com

Basic: rudimentary, less functional

Standard: Standards, common functions are

Full: Complete, with full functionality

Download it down:

2 extract to the specified directory

3 Place the CKEditor folder in the project location you want to use

CKEditor directory Structure

Using CKEditor

Currently capable of editing HTML source form elements: textarea

Therefore, the use of the online editor is based on the TEXTAREA element

1 load the CKEditor JS file. /ckeditor/ckeditor.js

There must be a TEXTAREA element in the 2 interface.

3 Replace the textarea with the corresponding CKEditor editor

A) The simplest way: Add a class attribute to the textarea tag with a value of CKEditor

The textarea element must have an ID or one of the name attributes

b) Standard mode: Use the class CKEditor provided by CKEditor, and its replacement method replace

Myck1 can be either the value of the ID or the value of the Name property

c) Advanced mode: Use jquery for textarea substitution

To load Jquery.js first

Loads the interface file Jquery.js provided by CKEditor for jquery. /ckeditor/adapters/jquery.js

Replace the textarea element with the jquery syntax

Configuration (Custom) CKEditor

CKEditor offers three configuration options

1. Modify the system-provided configuration file Config.js

Modifying a configuration file

Effect

Features: All ckeditor in the project will be affected by config.js.

2 custom profiles, in the same form as the system configuration file Config.js

Create a new user profile, the format of the configuration file is exactly the same as the config.js format

Modify configuration options

Load the customized configuration file in a CKEditor instance that requires a customized configuration file.

Attention:

Using the basic version of the load CKEditor, there is no way to use the customized configuration file

Only standard and jquery versions can be used

Features: Only CKEditor instances loaded with the customized profile are affected and others are not affected. (This method is used more)

Online editor CKEditor (1)-PHP (30)