ThinkPHP integrates Baidu Ueditor, thinkphpueditor_PHP tutorial

ThinkPHP integrates Baidu Ueditor, thinkphpueditor

ThinkPHP integrates Baidu Ueditor, based on teacher Huang Yongcheng’s video explanation
Statement: It’s best for everyone If you can write an absolute path, write an absolute path. For example: 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 stroke. No nonsense!
First initialize some values ​​when calling the editor:

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

Then introduce 2 js files, namely: 1. ueditor.all.min.js 2. ueditor.config.js
I would like to state what I said above The calling method and order must not be messed up, otherwise problems will occur, so just follow my step-by-step instructions!


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:

<span><span> 1</span> <span>//</span><span>改变Ueditor 默认图片上传路径</span>
<span> 2</span>         <span>public</span> <span>function</span><span> checkPic(){
</span><span> 3</span>             import('ORG.Net.UploadFile'<span>);
</span><span> 4</span>              <span>$upload</span> = <span>new</span> UploadFile();<span>//</span><span> 实例化上传类</span>
<span> 5</span>              <span>$upload</span>->allowExts  = <span>array</span>('jpg', 'gif', 'png', 'jpeg');<span>//</span><span> 设置附件上传类型</span>
<span> 6</span>              <span>$upload</span>->autoSub =<span>true</span><span> ;
</span><span> 7</span>              <span>$upload</span>->subType ='date'<span> ;
</span><span> 8</span>              <span>$upload</span>->dateFormat ='ym'<span> ;
</span><span> 9</span>              <span>$upload</span>->savePath =  './Uploads/thumb/';<span>//</span><span> 设置附件上传目录</span>
<span>10</span>              <span>if</span>(<span>$upload</span>-><span>upload()){
</span><span>11</span>                  <span>$info</span> =  <span>$upload</span>-><span>getUploadFileInfo();
</span><span>12</span>                  <span>echo</span> json_encode(<span>array</span><span>(
</span><span>13</span>                    'url'=><span>$info</span>[0]['savename'],
<span>14</span>                    'title'=><span>htmlspecialchars</span>(<span>$_POST</span>['pictitle'], ENT_QUOTES),
<span>15</span>                    'original'=><span>$info</span>[0]['name'],
<span>16</span>                    'state'=>'SUCCESS'
<span>17</span> <span>                 ));
</span><span>18</span>               }<span>else</span><span>{
</span><span>19</span>                  <span>echo</span> json_encode(<span>array</span><span>(
</span><span>20</span>                   'state'=><span>$upload</span>-><span>getErrorMsg()
</span><span>21</span> <span>                 ));
</span><span>22</span> <span>                     }
</span><span>23</span>  
<span>24</span>             }</span>

I will show you the code first, and then continue to explain,
1. Introduce the tp 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 about the 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 normal.
is displayed as shown in the picture:

Then when displaying the data in the front-end template, you not only need to reverse escape but also remove the html materialization. {$article.content|htmlspecialchars_decode|stripslashes} will display normally!


There is another problem. 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 you initialized. Just respond. As shown in the picture:


This way the editor will not be stretched too high! As shown in the picture:


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


Additional note: About Ueditor under ie7 The solution to the bug problem that cannot be called. This was discovered by someone when I was browsing the official website the day before yesterday. Because I only have IE6, which is loved by everyone, and I have not tested it, so I still have others remind me. I will correct it now for IE7. Bug solution~Thanks to this guy~
As shown in the picture:

Modify in the upload configuration of imageUp.php:
$config = array("savePath" => "../../Public");

thinkphp is a lightweight framework that is more commonly used in small projects. If you want to learn PHP, just concentrate on learning native PHP development well, otherwise you won’t be able to learn the optical framework well. Master, I think you will make a fortune.