And you can use direct upload and Ajax two ways to handle content. To give some inspiration and help to some of the peers who have not yet been able to integrate FCKeditor successfully,
I would like to describe my experience and experiences as follows: The purpose of the application is to integrate the FCKeditor editor into the thinkphp, so that users can work on the text and images that are about to be published online as they would edit word.
Application software and Environment: Apache Server version 2.0, PHP version 5.0 or more, mysql5.0 above; thinkphp version 1.5 or above, FCKeditor version 2.x.
Application steps:
1, download the fckeditor2.x version, the unzipped folder FCKeditor copied to the Thinkphp folder under the Vendor directory, in order to meet the thinkphp of the Third-party class library to introduce rules.
2, modify the parameters:
First of all, using EditPlus and other software to open the FCKeditor directory fckeditor_php5.php file, find the 130th line. The content appears as follows:
Copy Code code as follows:
Public function __construct ($instanceName)
{$this->instancename = $instanceName;
$this->basepath= ';
$this->width = ' 900′;
$this->height = ' 400′;
$this->toolbarset = ' Default ';
$this->value = ';
$this->config = Array ();
}
Public function __construct ($instanceName) {$this->instancename = $instanceName;
$this->basepath = '/bm/thinkphp/vendor/fckeditor/'; $this->width = ' 900′; $this->height = ' 400′;
$this->toolbarset = ' Default '; $this->value = ";
Among them, the most important thing is to set the BasePath well.
Inside is the path of the fckeditor_php5.php file relative to the Web site document root.
This is actually the path used to characterize the FCKeditor editor's relative root directory. For example, the server's document root directory is htdocs/or www/,
The project name is a thinkphp System package and a project package MyApp under the Project,project project folder. And the server does not set up a virtual host for the project,
At this point the document root directory is still www/or htdocs/, then it should be $this->basepath= '/project/thinphp/vendor/fckeditor/';
If you set up a virtual host, the project becomes a virtual document root directory, through a domain name can directly access the Web site projects, then, at this time,
$this->basepath= '/thinphp/vendor/fckeditor/';
Other parameters such as width and height can be filled or not filled, if the words are the editor's default height and width. InstanceName is the ID and name of the tag where the editor is located. Other parameters are not to be ignored.
Next, find the config.php file under Fckeditor\editor\filemanager\connectors\php\, open it, and find 30 and 34 lines. The parameters that need to be rewritten are as follows: $Config [' Enabled '] = true;
$Config [' userfilespath '] = ';
Where the first argument should be set to TRUE. The default is true. The second parameter fills in the path of the uploaded file, such as the picture to display.
We create a uploads folder under the project directory, then $config[' userfilespath ' = '/project/uploads/';
The path rule is the same as the previous basepath. If Project is a virtual document root directory, then $config[' userfilespath ' = '/uploads/';
3. Application:
For example, in the MyApp project in the Lib directory in the IndexAction.class.php controller class in the index method, when access to the program, the output template page has form form,
Ask the user to enter an article, and then you can use the editor. code example, below, shows only code related to FCKeditor, and other code is abbreviated.
The first is the server program:
Copy Code code as follows:
Public Function Index ()
{....//other code
Vendor ("Fckeditor.fckeditor");//contains the FCKeditor class library, TP introduces the system method of the third party class library, its path is relative to the vendor directory.
$editor = new FCKeditor (); Instantiating a FCKeditor object
$editor->width= ' 980′;//sets the width that the editor actually needs. If this item is omitted, the default width is used.
$editor->height= ' 400′;//set the height that the editor actually needs. If this is omitted, the default height is used.
$this->value= ";//Set editor initial value. It can also be a set value when modifying data. can be empty.
$editor->instancename= ' comment '; Enter the ID and name of the tag in the form that contains the label, that is, the ID and name of the <input> label. Here fake
Set to comment. This is not a province, but also to maintain uniqueness. Once the form is uploaded to the server handler, it can be read by $_post[' comment '.
$html = $editor->createhtml ()//creates an online editor HTML code string and assigns value to the string variable $html.
$this->assign (' HTML ', $html);//assigns $html values to the template variable $html. You can refer directly to the template through {$html}.
..//other code, including output template.
}
followed by the corresponding HTML template that is the index file. Just insert the editor where you need it, and the other code will be the same as the general <form>.
... <!– other HTML code –>
<div>
<form id= "Commentform" name= "Commentform" action= ">//action" to fill out form handlers such as ' __app__/index/check '.
Refers to the check () method under the Indexaction class to process the submitted form data.
Copy Code code as follows:
<table style= "width:100%;" >
<tr>
<TD style= "Text-align:left;" > Add New Comments:
</td>
</tr>
..//Other forms fill out items
<tr>
<td > {$html}</td>
</tr>
<tr>
<td><input type= "Submit" value= "submitted Comments" >
</td>
</tr>
</table>
</form>
</div>
Here, it's ready for use. In a form handler, as you normally do with form elements. However, sometimes when the project is transplanted, the link paths such as uploaded pictures will be incorrectly compiled,
So that the picture can not be displayed correctly. Usually a double quote parsing error that I haven't resolved yet. You can work with the form data in an AJAX way if you want to make sure it doesn't go wrong.
However, before doing AJAX processing, you first use a paragraph of JS code to assign the value in the editor to the form element in the form where name is the Instacename value. Like what
In this example, when the form is processed with Ajax, a section of JS code that must be run before the form is processed in the index template file is:
...//Other JS code
var editor=fckeditorapi.getinstance (' comment ');//comment is the instancename value set.
document.commentform.comment.value=editor.editordocument.body.innerhtml;//the source code after the content is processed in the editor
The value assigned to the comment property element of the Commentform form.
...//Other JS code
Note: The individual thinks xajax is quite good, only need to spend the main energy in the backstage program. I also use Xajax to do the data processing. The front code is simple.
