Code for calling the FCKeditor editor in ThinkPHP

Source: Internet
Author: User
Tags php file

1. Download FCKeditor2.x and copy the decompressed folder FCKeditor to the vender directory under the ThinkPHP folder to comply with the THinkPHP third-party class library import rules.
2. Modify parameters:
First, use EditPlus and other software to open the fckeditor_php5.php file under the FCKeditor directory and find row 130th. The content is as follows:

The code is as follows: Copy code

Public function _ construct ($ instanceName)
{$ This-> InstanceName = $ instanceName;
$ This-> BasePath = '';
$ This-> Width = '2017 & prime ;;
$ This-> Height = '2017 & prime ;;
$ This-> ToolbarSet = 'default ';
$ This-> Value = '';
$ This-> Config = array ();
Public function _ construct ($ instanceName) {$ this-> InstanceName = $ instanceName;
$ This-> BasePath = '/bm/ThinkPHP/Vendor/FCKeditor/'; $ this-> Width = '2017 & prime ;; $ this-> Height = '2017 & prime ;;
$ This-> ToolbarSet = 'default'; $ this-> Value = ";

The most important thing is to set the Basepath.
The path of the fckeditor_php5.php file to the document root directory of the website.
In fact, this is the path used to characterize the relative root directory of the FCKeditor editor. For example, the root directory of the file on the server is htdocs/or www /,
The project name is project. The project folder contains the Thinkphp system file package and the project file package myapp. If the server does not set a virtual host for the project,
At this time, the root directory of the document is still www/or htdocs/, which should be $ this-> BasePath = '/project/ThinPHP/Vendor/FCKeditor /';
If a virtual host is set, the project is changed to the virtual document root directory, and a website project can be directly accessed through a domain name, at this time,
$ This-> BasePath = '/ThinPHP/Vendor/FCKeditor /';
Other parameters, such as width and height, can be filled or left blank. If this parameter is specified, it is the default height and width of the editor. InstanceName is the id and name of the tag of the editor. Ignore other parameters.
Next, find the config. Php file under FCKeditoreditorfilemanagerconnectorsphp, open it, and find lines 30 and 34. The parameters to be rewritten are as follows: $ Config ['enabled'] = true;
$ Config ['userfilespath'] = '';
The first parameter should be set to true. The default value is true. The second parameter is the path of the uploaded file, such as the image to be displayed.
Create an uploads folder under the project directory, then $ Config ['userfilespath'] = '/project/uploads /';
The path rule is the same as the previous basepath. If the project is the root directory of the virtual file, $ Config ['userfilespath'] = '/uploads /';
3. Applications:
For example, in the index method of the IndexAction. class. php controller class in the Lib Directory of the myapp project, when accessing this program, the output Template page contains a form,
If you are required to enter an article, you can use the editor. The sample code is as follows. Only the code related to fckeditor is displayed. Other codes are omitted.
The first is the server program:

The code is as follows: Copy code

Public function index ()
{...... // Other code
Vendor ("FCKeditor. fckeditor"); // contains the FCKeditor class library. The system method for TP to introduce a third-party class library is relative to the vendor directory.
$ Editor = new FCKeditor (); // instantiate the FCKeditor object
$ Editor-> Width = '2017 & prime; // you can specify the actual Width of the editor. If this option is omitted, the default width is used.
$ Editor-> Height = '2017 & prime; // you can specify the Height required by the editor. If this parameter is omitted, the default height is used.
$ This-> Value = "; // you can specify the initial Value of the editor. It can also be the set value when the data is modified. You can leave it empty.
$ Editor-> InstanceName = 'comment'; // Set the id and name of the input tag in the form where the editor is located, that is, the id and name of the <input> tag. Here false
// Set it to comment. It cannot be saved and must be unique. After the form is uploaded to the server processing program, it can be read through $ _ POST ['comment.
$ Html = $ editor-> Createhtml (); // create an online editor html code string and assign it to the string variable $ html.
$ This-> assign ('html', $ html); // assign the $ html value to the template variable $ html. You can directly reference it in the template through {$ html.
....... // Other code, including the output template.

The second is the corresponding html template, that is, the index file. You only need to insert the editor where you need it. Other code is the same as the general <form> method.
....... <! -Other html code->
<Form id = "commentform" name = "commentform" action = ""> // enter the form handler in the action, for example, '_ APP _/Index/check '.
It refers to the check () method in the IndexAction class to process the submitted form data.

The code is as follows: Copy code

<Table style = "width: 100%;">
<Td style = "text-align: left;"> add a new comment:
...... // Other forms
<Td >{$ html} </td>
<Td> <input type = "submit" value = "submit comments">

Now, you can use it. In a form processing program, you can do as you normally process form elements. However, sometimes, after the project is transplanted, the uploaded images and other link paths will be incorrectly compiled,
As a result, images and other things cannot be correctly displayed. It is usually a double quotation mark parsing error. I have not solved it yet. To avoid errors, you can use ajax to process form data.
However, before ajax processing, you must first use a piece of js code to assign the value in the editor to the form element in the form where name is the value of instacename. For example,
In this example, if ajax is used to process the form, the following javascript code must be run in the index template file before the form is processed:
....... // Other js code

The code is as follows: Copy code
Var editor = FCKeditorAPI. GetInstance ('Comment'); // comment is the set instanceName value.
Document. commentform. comment. value = editor. EditorDocument. body. innerHTML; // source code after the content in the editor is processed
// Assign the value to the comment attribute element of the commentform form.

...... // Other js code
Note: I personally think that xajax is quite good. I only need to focus on the background program. I also use xajax for data processing. The front-end code is very simple.

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: 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.