如果要做一個文章釋出功能，一個優秀的線上HTML編輯器是必不可少的，目前來說，優秀的線上HTML編輯器有“ckEditor”、“kindEditor”、“xhEditor”，而我選擇的是“ckEditor”，這篇文章將會介紹自己laravel專案中如何使用"ckEditor"。

    （一）版本說明

      1、laravel版本是5.2

       2、ckEditor版本是3.6.3、

      (二)檢視設定

      1、新增需要用到ckeditor的文字內容（注意，需要使用textarea，並且id為下一步JavaScript程式碼中替換的id，這裡使用的是‘content’）：

     <div class="form-group">
           <label for="content">content</label>
          <textarea  id="content" name="content" class="form-control" rows="3"></textarea>
     <div class="form-group">

      2、新增JavaScript程式碼 

    <script type="text/javascript">
        window.onload = function()
        {
            CKEDITOR.replace( 'content', {
                filebrowserBrowseUrl: '{{url('uploads/images/')}}',
                filebrowserUploadUrl: '{{url('admin/article/image')}}?_token={{csrf_token()}}'
            });
        };
    </script>
 

在這段程式碼當中，‘content’則是上一步新增的itextarea的id，可以自行定義，而filebrowserBrowseUrl變數指的是瀏覽你伺服器圖片存放目錄，如果不想不需要可以刪去這個變數。filebrowserUploadUrl變數是指圖片post提交的處理地址，因為laravel預設開啟了csrf驗證，所以在url地址需要加上“?_token={{csrf

_token()}}”,如果不新增又不更改laravel預設csrf設定，將會提示錯誤。

       （三）post圖片資料處理

          1、laravel路由新增（routes.php）：

   Route::controller('admin/article','ArticleController');
 

這是同上一步JavaScript中filebrowserUploadUrl變數相對應，目的使圖片post到url有效。

        2、laravel圖片post處理(ArticleController.php)：

 public function postImage(Request $request)
    {

        if ($request->hasFile('upload')) {     //upload為ckeditor預設的file提交ID
            $file = $request->file('upload');   //從請求資料內容中取出圖片的內容
            $allowed_extensions = ["png", "jpg", "gif"]; //允許的圖片字尾
            if ($file->getClientOriginalExtension() && !in_array($file->getClientOriginalExtension(), $allowed_extensions)) {
                return '圖片字尾只支援png,jpg,gif,請檢查！';
            }
            $destinationPath = 'uploads/images/';  //圖片存放路徑
            $extension = $file->getClientOriginalExtension();  //獲得檔案字尾
            $fileName = str_random(10) . '.' . $extension;  //建立圖片名字
            $result = $file->move($destinationPath, $fileName); //儲存圖片到路徑
            echo url('') . '/' .$result ; //輸出圖片網站中瀏覽路徑

        }
    }

我選擇對圖片處理是把圖片存放在伺服器上，並返回圖片瀏覽的url地址。其實還有一種比較好的做法是把url直接通過JavaScript直接填在圖片瀏覽url欄上。
   (四)成功之後的效果：