thinkphp integration of Baidu Ueditor graphics and text Tutorial _php example

Source: Internet
Author: User
Tags file upload

thinkphp integrated Baidu Ueditor, based on the Huangyongchen teacher's video description
Statement: The best people can write absolute path of all write the absolute path, such as: window. Ueditor_home_url

He has already said in the course, I will not say again Ah, just a pen to bring, good no nonsense!

First initialize some values when invoking the editor:

<script type= "Text/javascript" charset= "utf-8" >
  window. Ueditor_home_url = "/public/ueditor/"; Ueditor_home_url, config, all these three order cannot change
  window.onload=function () {
    window. ueditor_config.initialframeheight=300;//Editor's height
    window. Ueditor_config.imageurl= "{: U (' Admin/category/checkpic ')}";     Picture upload submit Address
    window. Ueditor_config.imagepath= '/uploads/thumb/'//editor calls the address of the picture
    ue.geteditor (' contents '); The contents inside is my TextArea ID value
    
    }
 
</script>

Then introduce 2 JS files, respectively: 1, ueditor.all.min.js 2, Ueditor.config.js
Here to affirm the way I said above, the order must not be disorderly, chaos will be a problem, so you follow my step-by-step to do it!

Because I rewrote the editor's picture submission address, I also had to write a method of image processing in the controller.

The code is as follows:

Change ueditor default picture upload path public
    function Checkpic () {
      import (' ORG.Net.UploadFile ');
       $upload = new UploadFile ()///materialized upload class
       $upload->allowexts = array (' jpg ', ' gif ', ' PNG ', ' jpeg ');/set attachment upload type
       $ Upload->autosub =true;
       $upload->subtype = ' Date ';
       $upload->dateformat = ' ym ';
       $upload->savepath = './uploads/thumb/'/Set attachment upload directory
       if ($upload->upload ()) {
         $info = $upload-> Getuploadfileinfo ();
         echo Json_encode (Array (
          ' url ' => $info [0][' Savename '],
          ' title ' =>htmlspecialchars ($_post[') Pictitle '], ent_quotes),
          ' original ' => $info [0][' name '],
          ' state ' => ' SUCCESS '
         )
       } else{
         Echo json_encode (Array (
         ' state ' => $upload->geterrormsg ())
         );
           }
 
      

First, I'll show you the code first, and continue to explain,

1, the introduction of TP official File Upload processing class, and then initialize some of the configuration, these are not introduced AH!

2, to determine whether he uploaded success, if the upload succeeds, first get his upload information, and then turn the array into JSON, with Phpjson_encode. If the upload fails to upload the failure of the information directly back!

These are all in the Huangyongchen Teacher's tutorial already explained! Do not elaborate, do not understand to see the video!

After the integration of the upload, found that the uploaded image path has been escaped, has not been shown as a figure:

I'm just going to show you where the data is using the inverse function. {$article. Content|stripslashes} This is to reverse the escaped string so that the data is displayed correctly.
As shown in figure:

Then in the foreground template to display the data, not only to reverse the meaning of the HTML to remove the entity, {$article. content|htmlspecialchars_decode|stripslashes} so that you can display the normal!

There is a problem, Baidu editor when the contents of the growth, his height is also increased, as shown:


The solution is to open the comment in line No. 428 of the Ueditor configuration file Ueditor.config.js, change to True, and 430 lines of comment open to change the height of your initialization. As shown in figure:


So the editor won't get any higher! As shown in figure:


End!!! Said the great God not to spray ~ ~ This is just sharing exchanges, if the wrong point of the line thank you ~ ~ ~

Supplementary Note: about ueditor in IE7 under the call does not come out of the bug problem solution, this is the day before yesterday to visit the official website, found that a person of this problem, because I only see people love IE6, also did not go to test, so still others remind, Now correct the IE7 bug solution ~ Thank you for the big wet ~
As shown in figure:

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.