Thinkphp Editor Expansion class Kindeditor use method

Source: Internet
Author: User
thinkphp Editor Extension class Kindeditor use method


One, before using the preparation.
Before using, please make sure you have established athinkphpWeb site project.
1,Keditor.class.php and JSON.class.php are editor extension class files that copy them to the Thinkphp\lib\org\net folder of your Web site project.
2,Editorfolder isKindeditorCore Package. Copy it to your project's Publicfolder (the same as the portal file Public),and in PublicNext Build aUploadfolder to hold images uploaded using the editor.
3,KeditorAction.class.php is the editor's ability to upload images and browse remote pictures to copy them to your project'slib\actionfolder.

Second, the invocation of the object
To invoke the object in the Controller method:

Import ("ORG.Net.Keditor"), $ke =new keditor (), $ke->id= "content";//Specify TEXTAREA id$keshow= $ke->show ();//Generate JS code $this-> Assign ("Keshow", $keshow); $this->display ();



Display the editor in the template file corresponding to the method:

{$keshow}
 
  


Above is the simplest method of invocation, and the extension class has many properties and methods. To achieve a more perfect function, read on.

Third, the properties of the object
I divide the attributes into two types, one isKindeditorcomes with properties, one is to extend the new attribute. If you've used it before.Kindeditor, you should knowKindeditoritself hasID, items, width, height, aftercreate, etc. -a property. These properties can now be usedPHPdirect definition, such as definitionID:$ke->id="Content",Define width:$ke->width="700px";I'll start with the object new property.
New properties for the object:
1,Jspath: DefiningKindeditorthe coreJSfile, the default value is/public/editor/Kindeditor.js, if yourEditorfolder is not placed inPublibyou need to specify this property under,as$ke->jspath="/kind/kindeditor.js";
2,form:Specify the form to submit ( from) ofID, the default isForm1, this attribute is a combination ofCtrl+entersubmit function used, such as having your editor placed on a formIDto be"Formid", in order to achieveCtrl+enterSubmitFormidform, you need to define$ke->form="Formid".Ctrl+enterThe Submit feature also sets additional properties, which are explained later.
3,Imgid:Specify a hidden field where the image address is storedID, the default isimg. Each time the editor uploads a picture, the image address is stored in the hidden field. When adding data to a database, you can save the data in this hidden field to the database field, and then delete the image address of the database before deleting the data. The delete procedure is called whenever the object'sDelimg method, which is explained later in this method. This will delete the content and delete the image at the same time.
Self-brought properties:
1,Items: Configure the Editor's toolbar to define methods such as
$ke->items= "[' Source ', ' | ', ' fullscreen ', ' undo ', ' Redo ', ' print ', ' cut ', ' copy ', ' Paste ']";
I have addedLittlekeywords, you can quickly define a streamlined model editor, using the method$ke->items="Little";
2,Aftercreate: Sets the callback function that is executed after the editor is created, defining methods such as
$ke->aftercreate= "function (ID) {
Alert (' Successfully created ' +id)
}”;
I have addedCtrlenterkeywords that can be quickly definedCtrl+enterto submit a form, use the method:
$ke->aftercreate= "Ctrlenter";
Also need to define$ke->form="FormName",FormNamechange to the form where you have the editorID.
3,Resizemode:2or1or0,2You can drag to change the width and height,1the height can only be changed when0cannot be dragged. Define methods such as:$ke->resizemode=1;Note that property values for numeric types are not enclosed in quotation marks, such as$ke->resizemode="1";It is wrong to define this.
4,Allowfilemanager:trueorfalse,trueBrowse Server picture function (click the upload image button to see this feature), define the method as
$ke, Allowfilemanager=ture;
Note that the property value is not enclosed in quotation marks when it is a Boolean value.
5,IMAGEUPLOADJSON Specifies the server-side program that uploads the image, the default value is/index.php/keditor/upload
6,Filemanagerjson: Specifies the server-side program to browse remote pictures,
The default value is/index.php/keditor/filemanager
Note: Before you copied theKeditorAction.class.phpIt is for uploading images and browsing remote images. In the fileUploadmethod defines the upload image processing process, the fileFileManagermethod defines the process of browsing a picture. You can add code to judge permissions on both methods to enable only administrators to upload images or browse images. You can also not use the defaultKeditorAction.class.php, you define the upload process and browse the image processing process, you need to redefineThe Imageuploadjson property value and the Filemanagerjson property value. The custom process is explained later.
There are other self-brought properties that I don't list. Everyone can viewKindeditorOfficial Documents
Http://www.kindsoft.net/doc.php?cmd=config
Note that the numeric type or the property value of the Boolean type is not enclosed in quotation marks. Other property values are placed in quotation marks, the format of the property values, andKindeditorThe same format as itself.



Four-object method.
1,upload, upload pictures. This method is used during the editor upload image processing process, using the method:

Import ("ORG.Net.Keditor"); Keditor::upload ('./public/upload/', '/public/upload/', array (' gif ', ' jpg ', ' jpeg ', ' PNG ', ' BMP '), 1000000);


The upload method has three parameters, that is, "Upload picture directory", "Picture Display Address", "Allow upload picture format", "Allowed picture size (unit KB ) "
Upload Picture directory: Default value "./public/upload/" (note Public In front of a "dot" symbol, is the relative address used, not the absolute address), upload the image directory address is equivalent to processing files. thinkphp all the code is run through the portal file, so the address is actually relative to the entry file.
Show Picture address: Default Value " /public/upload "(usually absolute address), suppose we upload a picture, the server-side generated image named12345.gif. Upload will display the image address is /public/upload/12345.gif , because we are using an absolute address, the content of the editor is displayed no matter where it is on the site.
Allow uploading of picture formats: Define an array with default values of array (' gif ', ' jpg ', ' jpeg ', ' PNG ', ' BMP ')
Allowed picture size: Default value is, 1000000, Unit is BK .
2 ,FileManager, browse the image of the server. This method is used during browse picture processing. How to use:

Import ("ORG.Net.Keditor"); Keditor::filemanager ("./public/upload/", "/public/upload/", Array (' gif ', ' jpg ', ' jpeg ', ' PNG ', ' bmp '));


The parameters are: "Browse picture Catalog", "Picture Display Address", "Allow browsing of picture formats", and Upload The same way, browse the picture directory is relative address, picture display address is think address.

3 ,Delimg: Delete images uploaded through the editor. This method is typically used when you delete database data.

Import ("ORG.Net.Keditor"); Keditor::d elimg ($imgfield);//$imgfield is usually the field where your database holds the image address.



4 , Show :Returns the generated JS code. This method is typically used in the controller that displays the editor.
Show method can use a parameter definition Kindeditor comes with a property. such as:

Import ("ORG. Net.keditor "); $ke =new keditor (); $ke->show (" {ID: "Content", Width: ' 700px '; height: "300px"; Imgid: "img"} ");


Not recommended for Show definition of the method of parameter transfer Kindeditor property. Show The method of parameter transfer cannot be defined Jspath and the form two new station properties, nor can you use a Little and the Ctrlenter keywords.

  • Related Article

    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.