UEditor 添加線上管理圖檔删除功能

第一，需要添加一個 php 檔案來實作删除功能，檔案添加到： ueditor\php\action_delete.php 代碼内容：

<code>&lt;?php</code>

<code> </code> 

<code>/*---------------------------</code>

<code> </code><code>* wang</code>

<code> </code><code>*zhibeiwang.blog.51cto.com</code>

<code> </code><code>* 2017-08-10</code>

<code> </code><code>* action_delete.php</code>

<code> </code><code>* 删除 Ueditor 目錄下的檔案</code>

<code> </code><code>*---------------------------*/</code>

<code>try</code> <code>{</code>

<code>    </code><code>//擷取路徑</code>

<code>    </code><code>$path</code> <code>= </code><code>$_POST</code><code>[</code><code>'path'</code><code>];</code>

<code>    </code><code>$path</code> <code>= </code><code>str_replace</code><code>(</code><code>'../'</code><code>, </code><code>''</code><code>, </code><code>$path</code><code>);</code>

<code>    </code><code>$path</code> <code>= </code><code>str_replace</code><code>(</code><code>'/'</code><code>, </code><code>'\\'</code><code>, </code><code>$path</code><code>);</code>

<code>    </code> 

<code>    </code><code>//安全判斷(隻允許删除 ueditor 目錄下的檔案)</code>

<code>    </code><code>if</code><code>(</code><code>stripos</code><code>(</code><code>$path</code><code>, </code><code>'\\ueditor\\'</code><code>) !== 0)</code>

<code>    </code><code>{</code>

<code>        </code><code>return</code> <code>'非法删除'</code><code>;</code>

<code>    </code><code>}</code>

<code>    </code><code>//擷取完整路徑</code>

<code>    </code><code>$path</code> <code>= </code><code>$_SERVER</code><code>[</code><code>'DOCUMENT_ROOT'</code><code>].</code><code>$path</code><code>;</code>

<code>    </code><code>if</code><code>(</code><code>file_exists</code><code>(</code><code>$path</code><code>)) {</code>

<code>        </code><code>//删除檔案</code>

<code>        </code><code>unlink(</code><code>$path</code><code>);</code>

<code>        </code><code>return</code> <code>'ok'</code><code>;</code>

<code>    </code><code>} </code><code>else</code> <code>{</code>

<code>        </code><code>return</code> <code>'删除失敗，未找到'</code><code>.</code><code>$path</code><code>;</code>

<code>} </code><code>catch</code> <code>(Exception </code><code>$e</code><code>) {</code>

<code>    </code><code>return</code> <code>'删除異常：'</code><code>.</code><code>$e</code><code>-&gt;getMessage();</code>

<code>}</code>

第二，需要在 ueditor\php\controller.php 檔案的 switch 中添加指令 deleteimage 的處理：

<code>....</code>

<code>switch</code> <code>(</code><code>$action</code><code>) {</code>

<code>    </code><code>....</code>

<code>   </code> 

<code>    </code><code>/* 删除圖檔指令處理 */</code>

<code>    </code><code>case</code> <code>'deleteimage'</code><code>:</code>

<code>         </code><code>$result</code> <code>= </code><code>include</code><code>(</code><code>'action_delete.php'</code><code>);</code>

<code>         </code><code>break</code><code>;</code>

<code>    </code><code>/* 在 default 之前添加 */</code>

<code>    </code><code>default</code><code>:</code>

<code>        </code><code>$result</code> <code>= json_encode(</code><code>array</code><code>(</code>

<code>            </code><code>'state'</code><code>=&gt; </code><code>'請求位址出錯'</code>

<code>        </code><code>));</code>

<code>        </code><code>break</code><code>;</code>

第三，在圖檔上添加删除按鈕，需要修改 Js 檔案：ueditor\dialogs\image\image.js

<code>/* 在這兩句之後添加 */</code>

<code>item.appendChild(img);</code>

<code>item.appendChild(icon);</code>

<code>/* 添加删除功能 */</code>

<code>item.appendChild($(</code><code>"&lt;span class='delbtn' url='"</code> <code>+ list[i].url + </code><code>"'&gt;&lt;/span&gt;"</code><code>).click(</code><code>function</code><code>() {</code>

<code>    </code><code>var</code> <code>del = $(this);</code>

<code>    </code><code>try</code><code>{</code>

<code>        </code><code>window.event.cancelBubble = true; </code><code>//停止冒泡</code>

<code>        </code><code>window.event.returnValue = false; </code><code>//阻止事件的預設行為</code>

<code>        </code><code>window.event.preventDefault();    </code><code>//取消事件的預設行為  </code>

<code>        </code><code>window.event.stopPropagation();   </code><code>//阻止事件的傳播</code>

<code>    </code><code>} finally {</code>

<code>        </code><code>if</code><code>(!confirm(</code><code>"确定要删除嗎？"</code><code>)) </code><code>return</code><code>;</code>

<code>        </code><code>$.post(editor.</code><code>getOpt</code><code>(</code><code>"serverUrl"</code><code>) + </code><code>"?action=deleteimage"</code><code>, { </code><code>"path"</code><code>: del.attr(</code><code>"url"</code><code>) }, </code><code>function</code><code>(result) {</code>

<code>            </code><code>if</code> <code>(result == </code><code>"ok"</code><code>) del.parent().remove();</code>

<code>            </code><code>else</code> <code>alert(result);</code>

<code>        </code><code>});</code>

<code>})[0]);</code>

<code>/* 在這一句之前添加 */</code>

<code>this.list.insertBefore(item, this.clearFloat);</code>

第四，為删除按鈕添加一個樣式，修改檔案：ueditor\dialogs\image\image.css 在最底部添加如下代碼：

<code>/* 線上管理删除按鈕樣式 */</code>

<code>#online li .delbtn {      </code>

<code>    </code><code>position: absolute;</code>

<code>    </code><code>top: 0;</code>

<code>    </code><code>right: 0;</code>

<code>    </code><code>border: 0;   </code>

<code>    </code><code>z-index: 3;</code>

<code>    </code><code>color: #ffffff;</code>

<code>    </code><code>display: inline;</code>

<code>    </code><code>font-size: 12px;</code>

<code>    </code><code>line-height: 10.5px;</code>

<code>    </code><code>padding:3px 5px;</code>

<code>    </code><code>text-align: center;</code>

<code>    </code><code>background-color: #d9534f;</code>

效果如下：

<a href="https://s5.51cto.com/wyfs02/M02/9E/2D/wKiom1mMKESjUf6FAADePTx2B2o704.png-wh_500x0-wm_3-wmp_4-s_3585254889.png" target="_blank"></a>

本文轉自 a928154159 51CTO部落格，原文連結:http://blog.51cto.com/zhibeiwang/1955197