Usage of the extended kindeditor class in the Thinkphp Editor

Source: Internet
Author: User

Usage of the extended kindeditor class in the Thinkphp Editor


1. Preparations before use.
Before using Thinkphp, make sure that you have created a Thinkphp website project.
1. Keditor. class. php and JSON. class. php are editor extension class files that are copied to the ThinkPHP \ Lib \ ORG \ Net folder of your website project.
2. The editor folder is the core package of kindeditor. Copy it to the Public folder of your project (the same as the Public folder of the entry file), and create an Upload folder under Public to store the images uploaded using the editor.
3. keditexception. class. php is the image upload function and Remote Image Browsing function of the editor. Copy it to the lib \ Action folder of your project.

2. Object calls
Call the object in the Controller method:

Import ("ORG. net. keditor "); $ ke = new Keditor (); $ ke-> id =" content "; // specify the id of textarea $ keshow = $ ke-> show (); // generate js Code $ this-> assign ("keshow", $ keshow); $ this-> display ();



The editor is displayed in the template file corresponding to the method:

{$ Keshow}
 


The above is the simplest method to call. There are many attributes and methods in the extension class. To achieve more perfect functions, read down.

3. Object Attributes
I divide attributes into two types: kindeditor built-in attributes and extended new attributes. If you have used kindeditor before, you should know that kindeditor has 30 attributes, including id, items, width, height, and afterCreate. These attributes can now be directly defined using php, such as the definition id: $ ke-> id = "content" and the definition width: $ ke-> width = "700px "; let me first talk about adding properties to an object.
New properties of the object:
1. jspath: defines the core js file of kindeditor. The default value is/Public/editor/kindeditor. js. If your editor folder is not put under Publib, You need to specify this attribute, for example, $ ke-> jspath = "/kind/kindeditor. js ";
2. form: Specifies the id of the submitted form (from). The default value is form1. This attribute is used in combination with the ctrl + enter submit function, for example, if your editor is placed in the form id "formid" and you want to implement ctrl + enter to submit the formid form, you need to define $ ke-> form = "formid ". Other attributes must be set for the ctrl + enter submission function, which will be explained later.
3. imgid: Specifies the hidden domain id for storing the image address. The default value is img. Each time an image is uploaded to the editor, the image address is stored in the hidden domain. When adding data to a database, you can save the data in this hidden field to the database field. When deleting the data, read the image address stored in the database and delete it. You only need to call the delimg method of the object during the deletion process. In this way, the image is deleted when the content is deleted.
Built-in attributes:
1. items: configure the toolbar of the editor. The definition method is as follows:
$ Ke-> items = "['source', '|', 'fullscreen ', 'undo', 'redo ', 'print', 'Cut ', 'copy ', 'paste '] ";
I added the little keyword to quickly define a simplified model editor. How to use $ ke-> items = "little ";
2. afterCreate: Set the callback function executed after the editor is created. The definition method is as follows:
$ Ke-> afterCreate = "function (id ){
Alert ('created successfully '+ id)
}";
I added the ctrlenter keyword to quickly define ctrl + enter to submit the form. Usage:
$ Ke-> afterCreate = "ctrlenter ";
At the same time, you need to define $ ke-> form = "formname", and convert formname to the form id of your editor.
3, resizeMode: 2 or 1 or, you can drag to change the width and height, 1 can only change the height, 0 can not drag. The definition method is as follows: $ ke-> resizeMode = 1. Note that attribute values of the numeric type should not be placed in quotation marks, for example, $ ke-> resizeMode = "1". This definition is incorrect.
4. allowFileManager: true or false. If it is set to true, the Image Browsing function of the server is displayed. (You can click the upload image button to see this function .)
$ Ke-> allowFileManager = ture;
Note that when the attribute value is a Boolean value, do not enclose it in quotation marks.
5. imageUploadJson specifies the server program for uploading images. The default value is/index. php/Keditor/upload.
6. fileManagerJson: Specifies the server program for viewing remote images,
The default value is/index. php/Keditor/filemanager.
Note: The previously copied keditexception. class. php is used to upload images and browse remote images. The upload method in the file defines the process of uploading images, And the filemanager method in the file defines the process of browsing images. You can add the code for determining permissions to these two methods, so that only Administrators can upload images or browse images. You can also define the upload and Image Browsing processes without using the default keditconfigurtion. class. php. You need to redefine the imageUploadJson attribute value and fileManagerJson attribute value. The custom processing process is described in detail later.
If there are other built-in attributes, I will not list them one by one. You can view the official kindeditor documentation.
Http://www.kindsoft.net/doc.php? Cmd = config
Note: Do not enclose the numeric or Boolean attribute values in quotation marks. Other attribute values are enclosed in quotation marks. The format of the attribute value is the same as that of kindeditor.



Method of four objects.
1. upload images. This method is used when the editor uploads an image. Usage:

import("ORG.Net.Keditor");Keditor::upload('./Public/Upload/','/Public/Upload/',array('gif','jpg','jpeg','png','bmp'),1000000);


The upload method has three parameters: "upload image directory", "Image Display address", "allowed upload image format", and "allowed image size (unit: kb )"
Upload image Directory: The default value is ". /Public/Upload/"(note that there is a" point "symbol before" Public ", which is a relative address and cannot be an absolute address). The address of the uploaded image directory is equivalent to the address of the file to be processed. All Thinkphp code is run through the entry file, so this address is actually relative to the entry file.
Display image address: The default value is "/Public/Upload" (usually the absolute address). If we Upload an image, the image name generated by the server is 12345.gif. The image address displayed during the Upload is/Public/Upload/12345.gif. Because we use an absolute address, the content published by the editor can be normally displayed no matter where the website is located.
Formats of images that can be uploaded: defines an array. The default value is array ('gif', 'jpg ', 'jpeg', 'png ', and 'bmp ')
Allowed image size: the default value is 1000000, and the Unit is bk.
2. filemanager: browse images on the server. This method is used during Image Browsing. Usage:

import("ORG.Net.Keditor");Keditor::filemanager("./Public/Upload/","/Public/Upload/",array('gif','jpg','jpeg', 'png', 'bmp'));


The parameters are as follows: "browse image directory", "show image address", and "format of images allowed to be browsed". Like the upload method, the browse image directory is a relative address, the image display address is the desired address.

3. delimg: delete images uploaded through the editor. This method is generally used when you delete database data.

Import ("ORG. Net. Keditor"); Keditor: delimg ($ imgfield); // $ imgfield is generally the field where your database stores the image address.



4. show: return the generated js Code. This method is generally used in the Controller that displays the editor.
The show method can use a parameter to define the built-in attributes of kindeditor. For example:

import("ORG.Net.Keditor");$ke=new Keditor();$ke->show(“{id : ”content”,width: ‘700px’;height : ”300px”;imgid : ”img”}”);


We do not recommend that you use the show parameter passing method to define the kindeditor attribute. The "show" parameter passing method cannot define two new site attributes: jspath and form, or use the little and ctrlenter keywords.

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.