Yii2 使用ckeditor編輯器簡記

ckeditor版本：CKEditor 4

Yii2使用ckeditor可以添加widget，參考https://www.yiiframework.com/extension/yii2-ckeditor-widget

我這裡使用的是直接将ckeditor放在項目中，然後在view中添加編輯器的方式。如下：

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<form method="post" action="" style="min-height: 800px !important;" >
    <p>
        <textarea id="editor1" name="editor1" style="min-height: 100%;">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
        <script type="text/javascript">
            CKEDITOR.replace( 'editor1');
        </script>
    </p>
    <p>
        <input type="submit" />
    </p>
</form>
           

配置檔案：ckeditor/config.js

config.filebrowserUploadUrl = '/upload-image';//配置檔案上傳路徑，配置後才能上傳圖檔
config.height = '600px';//設定編輯器的高度
           

處理過程中遇到一些坑，以供參考：

問題1.上傳圖檔時，ckeditor提示“上傳檔案時發生 HTTP 錯誤（錯誤代碼：500）”

Yii有一個errorHandler 用于處理錯誤。當這個功能打開并配置好時，通路出現問題就會調用controller中配置的actionError。這時上傳圖檔就會提示500。

Yii的controller中會有一個方法beforeAction($action)進行請求前的驗證，可以自行設定驗證，如果驗證不通過可以給予操作，或者不給予操作，出現問題就會調用上面的actionError。

肯定不能關閉errorHandler，是以隻能讓Yii跳過驗證。即在beforeAction($action)中添加以下代碼

if ($action->id == "upload-image") {
    $this->enableCsrfValidation = false;
}
           

上面代碼中的upload-image是action的id。換成自己想跳過驗證的action就可以了。

上面這個處理方法的原因是yii有一個csrf的驗證機制，如果沒有上傳這個就會驗證不通過，這裡跳過這個請求的csrf驗證。

了解yii的csrf驗證可以參看這個文章https://www.yiichina.com/code/927。

顯然，我們又有一個解決辦法，就是上傳一個csrfToken：

<input type="hidden" name="_csrf-frontend" value="<?= Yii::$app->request->csrfToken ?>" />//進階版yii
<input type="hidden" name="_csrf" value="<?= Yii::$app->request->csrfToken ?>" />//基礎班yii
           

參考這個方法可以解決表單上傳的問題

參考文章：https://www.cnblogs.com/cnn2017/p/6800679.html

問題2.上傳圖檔時，ckeditor提示“上傳檔案時發生 HTTP 錯誤（錯誤代碼：400）”

文法有問題，看看是不是設定了必須傳的參數什麼的。

問題3.上傳圖檔時，ckeditor提示“不正确的伺服器響應”

ckeditor 4 官方文檔要求的傳回格式為如下格式

成功，無任何提示
{
    "uploaded": 1,
    "fileName": "foo.jpg",
    "url": "/files/foo.jpg"
}
成功，有提示
{
    "uploaded": 1,
    "fileName": "foo(2).jpg",
    "url": "/files/foo(2).jpg",
    "error": {
        "message": "A file with the same name already exists. The uploaded file was renamed to \"foo(2).jpg\"."
    }
}

失敗
{
    "uploaded": 0,
    "error": {
        "message": "The file is too big."
    }
}
           

官方文檔位址：https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html

傳回示例如下：

$arr = array(
    "uploaded" => 1,
    "fileName" => "foo.jpg",
    "url" => "/files/foo.jpg"
);
return json_encode($arr);