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

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

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

图1

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

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

图2

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

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

图3

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

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

图4

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

    <?php echo $form->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

打开网址: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

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

    <?php
        /* 基于本地语言环境手动定义编辑器的语言选项 */
        switch (Yii::$app->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';
        }
    ?>

    <?php echo $form->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

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/250430.html

(0)
上一篇 2022年4月29日
下一篇 2022年4月29日

相关推荐

发表回复

登录后才能评论