Yii2 Starter Kit 切换至中文语言环境后，编辑器未正常显示的解决

永夜 — Tue, 21 Aug 2018 09:29:20 +0000

浏览量： 95

1、当 Locale 的值设置为 English (US) 时，Create Article 时，编辑器正常显示，但是对应的语言包文件 /assets/5fbb6f5a/lang/en.js 响应 404，如图1

图1

2、当本地的值设置为简体中文时，创建文章时，编辑器未正常显示，如图2

图2

3、刷新页面，查看浏览器 Console，发现原因在于对应的语言文件 /assets/5fbb6f5a/lang/zh.js 不存在，进而导致 Uncaught TypeError: Cannot read property ‘html’ of undefined，如图3

图3

4、打开网址：http://backend.yii2-starter-kit.terentev.net/content/article/create ，发现官方示例仍然存在此 Bug，如图4

图4

5、查看 \backend\views\article\_form.php，编辑器代码如下，其基于 asofter/yii2-imperavi-redactor


    field($model, 'body')->widget(
        \yii\imperavi\Widget::className(),
        [
            'plugins' => ['fullscreen', 'fontcolor', 'video'],
            'options' => [
                'minHeight' => 400,
                'maxHeight' => 400,
                'buttonSource' => true,
                'convertDivs' => false,
                'removeEmptyTags' => false,
                'imageUpload' => Yii::$app->urlManager->createUrl(['/file-storage/upload-imperavi'])
            ]
        ]
    ) ?>

7、打开网址：https://imperavi.com/download/redactor/langs/en/ ，下载 en.js，复制至 \vendor\asofter\yii2-imperavi-redactor\yii\imperavi\assets\lang\en.js，以解决 /assets/5fbb6f5a/lang/en.js 响应 404的问题。注：如果 \vendor 未放在版本控制中，则建议将 en.js 放入版本控制中，在执行 composer install 后，自动复制至 \vendor\asofter\yii2-imperavi-redactor\yii\imperavi\assets\lang\en.js。刷新页面，/assets/5fbb6f5a/lang/en.js 响应200，如图6

图6

8、打开网址：https://imperavi.com/download/redactor/langs/zh/ ，下载失败，决定基于当前语言环境手动定义编辑器的语言选项，以确保可以正确寻找到对应的语言包文件，进而解决编辑器显示的问题，编辑 \backend\views\article\_form.php


    language) {
            case 'en-US':
                $lang = 'en';
                break;
            case 'ru-RU':
                $lang = 'ru';
                break;
            case 'uk-UA':
                $lang = 'uk';
                break;
            case 'es':
                $lang = 'es';
                break;
            case 'vi':
                $lang = 'vi';
                break;
            case 'zh-CN':
                $lang = 'zh_cn';
                break;
            case 'pl-PL':
                $lang = 'pl';
                break;
            default:
                $lang = 'en';
        }
    ?>

    field($model, 'body')->widget(
        \yii\imperavi\Widget::className(),
        [
            'plugins' => ['fullscreen', 'fontcolor', 'video'],
            'options' => [
                'lang' => $lang,
                'minHeight' => 400,
                'maxHeight' => 400,
                'buttonSource' => true,
                'convertDivs' => false,
                'removeEmptyTags' => false,
                'imageUpload' => Yii::$app->urlManager->createUrl(['/file-storage/upload-imperavi'])
            ]
        ]
    ) ?>

9、当本地的值设置为简体中文时，创建文章时，编辑器正常显示，如图7

图7

Redactor – 永夜

Yii2 Starter Kit 切换至中文语言环境后，编辑器未正常显示的解决