Yii2 使用ckeditor编辑器简记

最新推荐文章于 2024-10-10 08:47:09 发布

klegek

最新推荐文章于 2024-10-10 08:47:09 发布

阅读量1k

点赞数 1

分类专栏： Yii 文章标签： Yii ckeditor php

本文链接：https://blog.youkuaiyun.com/it_male/article/details/84096878

版权

Yii 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在Yii2框架中集成CKEditor编辑器的过程，包括配置CKEditor的config.js文件。在使用中遇到了HTTP错误500、400和不正确服务器响应的问题，分别提供了对应的解决方案。针对错误500，由于Yii的errorHandler和csrf验证机制，需要在beforeAction中跳过特定action的csrf验证；对于错误400，可能是参数设置错误；对于不正确服务器响应，需确保返回格式符合CKEditor4的文档要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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