ThinkPHP integrates Baidu Ueditor graphic tutorial,

ThinkPHP integrates Baidu Ueditor graphic tutorial, _PHP tutorial

WBOY

Release： 2016-07-13 10:16:29

Original

843 people have browsed it

ThinkPHP integrates Baidu Ueditor graphic tutorial,

ThinkPHP integrates Baidu Ueditor, based on teacher Huang Yongcheng’s video explanation
Disclaimer: It is best if everyone can write absolute paths, such as: window.UEDITOR_HOME_URL

He has already said it in the tutorial, so I won’t say it again, I will just mention it in one sentence, no nonsense!

When calling the editor, first initialize some values:

<script type="text/javascript" charset="utf-8">
  window.UEDITOR_HOME_URL = "/Public/ueditor/"; //UEDITOR_HOME_URL、config、all这三个顺序不能改变
  window.onload=function(){
    window.UEDITOR_CONFIG.initialFrameHeight=300;//编辑器的高度
    window.UEDITOR_CONFIG.imageUrl="{:U('admin/Category/checkPic')}";     //图片上传提交地址
    window.UEDITOR_CONFIG.imagePath=' /Uploads/thumb/';//编辑器调用图片的地址
    UE.getEditor('contents');//里面的contents是我的textarea的id值
    
    }
 
</script>

Copy after login

Then introduce 2 js files, namely: 1. ueditor.all.min.js 2. ueditor.config.js
I would like to state here that the order of the calling methods I mentioned above must not be messed up. If it is messed up, problems will occur, so you should follow my step-by-step method!

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

The code is as follows:

//改变Ueditor 默认图片上传路径
    public function checkPic(){
      import('ORG.Net.UploadFile');
       $upload = new UploadFile();// 实例化上传类
       $upload->allowExts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
       $upload->autoSub =true ;
       $upload->subType ='date' ;
       $upload->dateFormat ='ym' ;
       $upload->savePath = './Uploads/thumb/';// 设置附件上传目录
       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()
         ));
           }
 
      }

Copy after login

I will show you the code first, and then continue to explain,

1. Introduce tp’s official file upload processing class, and then initialize some configurations. These are not introduced!

2. Determine whether the upload is successful. If the upload is successful, first obtain the information of successful upload, then convert the array into json and use phpjson_encode. If the upload fails, the upload failure information will be returned directly!

The above are all explained in Teacher Huang Yongcheng’s tutorial! I won’t explain it in detail. If you don’t understand, just watch the video!

After integrating the upload, I found that the uploaded image path was escaped and could not be displayed, as shown in the figure:

I used the anti-escape function where the data is displayed, and operated {$article.content|stripslashes}. This way, the escaped string is anti-escaped, so that the data can be displayed normally
As shown in the picture:

Then when displaying data in the front-end template, you must not only anti-escape but also remove the html materialization, {$article.content|htmlspecialchars_decode|stripslashes}, so that it can be displayed normally!

There is another question. When the content in Baidu Editor grows, its height also grows, as shown in the picture:

The solution is to open the comment on line 428 of Ueditor's configuration file ueditor.config.js and change it to true, and open the comment on line 430 and change it to the height corresponding to your initialization. As shown in the picture:

This way the editor won’t be stretched too high! As shown in the picture:

Finished! ! ! Please don’t criticize those who say something bad~~This is just for sharing and communication. If I say something wrong, just point it out. Thank you~~~

Additional explanation: Regarding the solution to the bug that Ueditor cannot be called under ie7, this was discovered by someone when I was browsing the official website the day before yesterday, because I only have the one that everyone loves. I haven’t tested ie6 yet, so someone else reminded me to correct the bug solution for ie7 now~Thank you so much~
As shown in the picture: