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>

問題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);