Online editor FcKeditor 2.0 trial small record

// Introduced online editor

INCLUDE ("../ fckeditor / fckeditor.php");

Here, let's take a look at the function of the fckeditor. 2.0 version of the call mode is not big, if you have previously installed Fckeditor 1.6, then only need to modify a small code to upgrade to 2.0.

Fckeditor (InstanceName [, Width, Height, Toolbarset, Value])

Reference value

meaning

InstanceName

The unique name required to instantiate the editor

Width

The width of the editor, unit is pixel or percentage (optional, default is: 100%)

HEIGHT

The height of the editor, unit is pixel or percentage (optional, default): 200)

Toolbarset

The name of the toolbar (optional, default is: default)

Value

Editor's content (HTML) initial value (optional)

Ok, let us use this function to customize FCKEDITOR.

$ OFCKEDITOR = New fckeditor ('fckeditor1');

$ OFCKEDITOR-> Basepath = '../fckeditor/;

$ OFCKEDITOR-> Toolbarset = 'Default';

$ OFCKEDITOR-> InstanceName = 'editordefault';

$ OFCKEDITOR-> Width = '100%';

$ OFCKEDITOR-> HEIGHT = '400';

$ OFCKEDITOR-> CREATE ();

?>

Third, configuration

Fckeditor 2.0 configuration file is fckeditor / fckconfig.js, and several important configuration items are as follows:

1, setup of toolbar

By default, Fckeditor will call the toolbar button as follows, you can increase or decrease according to your needs. It should be noted that the 2.0 version and the 1.6 version of the button are not exactly the same, some buttons and delete or renamed.

// ##

// ## Toolbar Buttons Sets

// ##

FCKCONFIG.TOOLBARSETS ["Default"] = [

['Source', '-', 'Save', 'Newpage', 'Preview'],

['Cut', 'Copy', 'Paste', 'Pastetext', 'PasteWord', '-', 'Print'],

['Undo', 'redo', '-', 'find', 'replace', '-', 'selectall', 'removeformat'],

['Bold', 'italic', 'underline', 'strikethrough', '-', 'subscript', 'superscript'],

['OrderedList', 'UnorderedList', '-', 'Outdent', 'Indent'],

['JustifyCenter', 'JustifyRight', 'Justifyful'],

['Link', 'unlink'],

['Image', 'Table', 'Rule', 'Specialchar', 'Smiley'], ['Style', 'FontFormat', 'FontName', 'FONTSIZE'],

['TEXTCOLOR', 'BGCOLOR'],

['About']

];

2, Simplified Chinese Setting Editing Edit / Lang / FcklanguageManager.js

Put the following statement

FCKLANGUAGEMANAGER.AVAILABLANGUAGES =

{

'Ar': 'arabic',

'BS': ​​'bosnian',

'CA': 'CATAlan',

'en': 'English',

'ES': 'spanish',

'et': 'Estonian',

'fi': 'finnish',

'fr': 'French',

'GR': 'Greek',

'HE': 'Hebrew',

'hr': 'croatian',

'IT': 'italian',

'Ko': 'Korean',

'lt': 'lithuanian',

'NO': 'Norwegian',

'PL': 'Polish',

'SR': 'Serbian (Cyrillic),

'sr-latn': 'serbian (latin),

'sv': 'swedish'

}

Add a line 'zh-cn': 'chinese' to become

FCKLANGUAGEMANAGER.AVAILABLANGUAGES =

{

'Ar': 'arabic',

'BS': ​​'bosnian',

'CA': 'CATAlan',

'en': 'English',

'ES': 'spanish',

'et': 'Estonian',

'fi': 'finnish',

'fr': 'French',

'GR': 'Greek',

'HE': 'Hebrew',

'hr': 'croatian',

'IT': 'italian',

'Ko': 'Korean',

'lt': 'lithuanian',

'NO': 'Norwegian',

'PL': 'Polish',

'sr': 'serbian (cyrillic)', 'sr-latn': 'serbian (latin),

'sv': 'swedish',

'zh-cn': 'chinese'

}

Then here

Http://www.shaof.com/download/en-cn.js Download Hanheng EN.JS Save to Editor / LANG Directory.

Fourth, set the file upload

FCKEDITOR 2.0 uses a technology called "Connector" to achieve browsing and uploading files. The figure below shows the workflow chart of file browsing.

figure 1

: Connector

Workflow chart

As can be seen from the figure, after the client issues a file operation request to the server, the Connector responds to this request, performs operations in the server's file system, such as file and folder browsing, and creation operations. Finally, the result is replied to the client in XML format. Specific technical details You can read the Guide of the FCKEDITOR.

Implementation to the app, first we have to choose a back block language to implement this feature, here we take a PHP as an example.

1. Modify two sections in the configure file fckeditor / fckconfig.js

// link browsing

FCKCONFIG.LINKBROWSER = TRUE;

FCKCONFIG.LINKBROWSERURL = fckconfig.basepath "fileManager / browser / default / browser.html? Connector = connector / pHP / connection.php";

FCKCONFIG.LINKBROWSERWINDOWIDTH = Screen.Width * 0.7; // 70%

FCKCONFIG.LINKBROWSERWINDOWHEIGHT = Screen.Height * 0.7; // 70%

// image browsing

FCKCONFIG.IMAGEBROWSER = TRUE;

FCKCONFIG.IMAGEBROWSERURL = FCKCONFIG.BASEPATH "FileManager / Browser / Default / Browser.html? Type = Image & Connector = Connectors / PHP / Connector.php";

FCKCONFIG.IMAGEBROWSERWINDOWIDTH = Screen.width * 0.7; // 70%;

FCKCONFIG.IMAGEBROWSERWINDOWHEIGHT = Screen.Height * 0.7; // 70%;

2, modify the configuration file fckeditor / editor / filemanager / browser / default / connectionrs / php / connector.php

// Get the "userfiles" path.

$ Globals ["userfilespath"] = '/ userfiles /';

Userfiles corresponds to the path uploaded by the file, and everyone can modify itself.

Ok, just have two steps to complete the configuration of the file upload, it is simple. We will save the files uploaded by fckeditor under the userfiles directory of the website.

figure 2

: Fckeditor2.0

File management screenshot

Five, end

Finally, you can delete the _docs and _samples in the FCKEDITOR directory to save space. This article is an upgraded version of the author's previously written as "Usage Method of Online Editor FcKeditor in PHP" (version 1.6 version) articles, the article is in any case, please refer to you.

Another, problems encountered

1, image file upload path problem

Install the settings in my article, the upload path is set to userfiles /, but when uploading the image file, FcKeditor automatically uploads the file below the userfiles / image directory, and the establishment of the self-propilation has established an image directory, which is very unhappy. unknown reason.

I hope to solve this problem with friends interested in Fckeditor.