道招

CKEditor系列(四)支持动态多语言i18n

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

CKEditor系列(四)支持动态多语言i18n

多语言文件结构

先看下CKEditor4的多语言文件长什么样子

//src/lang/zh-cn.js
CKEDITOR.lang[ 'zh-cn' ] = {
        editor: '所见即所得编辑器',
        common: {
                editorHelp: '按 ALT+0 获得帮助',
                keyboard: {
                        8: '退格键',
                },
        }
};

也就是直接将对应的语言值提前写入到文件中去。

使用多语言变量

有时候公司会有自己的多语言平台,公司项目实现多语言语言将它改成这样才行

//src/lang/zh-cn.js
CKEDITOR.lang[ 'zh-cn' ] = {
        editor: window.i18n['ck4.editor'],
        common: {
                editorHelp: window.i18n['ck4.common.editorHelp'],
                keyboard: {
                        8: window.i18n['ck4.common.keyboard'],
                },
        }
};

然后我们再根据项目中的语言来控制对应的window.i18n里面的值。

为了让CKEditor的更方便独立管理,我们有时需要将它独立成一个项目。这时候CKEditor这个项目在打包的时候,其实很可能是没有window.i18n的,及时有也不行(以/src/lang/zh-cn.js里面的editor为例),我们需要的是让它的value为window.i18n['ck4.editor'],而不是它当前的值所见即所得编辑器,因为我们需的是个动态的变量,而不是当前某个静态的字符串。

将字符串替换成"变量"

因为我们直接简单JavaScript的话不容直接将一个变量作为value给一个对象,所以想到了可以借助于babel这样的工具,在它的眼里,一个js文件里面的值都只是字符串,所谓的变量也只是稍微有点“特殊”而已。

我们可以将自己多语言文件//src/lang/zh-cn.js简单改造后,再解析成AST(抽象语法树),然后再进行后续操作。

CKEDITOR.lang[ 'zh-cn' ] = {
        editor: "window.i18n['ck4.editor']",
        common: {
                editorHelp: "window.i18n['ck4.common.editorHelp']",
                keyboard: {
                        8: "window.i18n['ck4.common.keyboard']",
                },
        }
};

对的,就是将这个变量的作为string来作为value,bable的工作就是把"window.i18n['ck4.editor']"替换成window.i18n['ck4.editor']

babel插件

我们可以将上述的转换过程写成一个babel插件

module.exports = function({types, template}, options, dirname){
    return {
        visitor: {
            StringLiteral: function (path, state) {
                // 未转换前value形如为"window.i18n['ck4.editor']"的字符串
                if (path.node.value.match(/^window/)) {
                    path.replaceWithSourceString(path.node.value);
                    // path.replaceWith(template.ast(path.node.value)); // 亦可
                }
            }
        }
    }
};

上的注释写的很清楚了,使用path.replaceWithSourceString(path.node.value)或者 path.replaceWith(template.ast(path.node.value))两种方式都可以完成需求

总结

我们根据公司的多语言平台的使用要求改造CKEditor编辑的多语言文件内容,主要的难点在于怎么把里面key的value只是使用变量,而非该变量的值,变量的求值过程是在我们项目使用的时候进行,这样就实现了多语言的动态化。借助babel和AST来帮助我们处理这个转换过程。

更新时间:
上一篇:CKEditor系列(三)粘贴操作是怎么完成的下一篇:富文本编辑器wangEditor迁移CKEditor前后效果对比

相关文章

富文本编辑器wangEditor迁移CKEditor前后效果对比

一、背景 富文本编辑器wangEditor的工具栏如图所示 富文本编辑器CKEditor4工具栏如图所示 二、wangEditor编辑器存在问题 1. 字号和字体设置 阅读更多…

CKEditor富文本编辑器职责分离

背景 CKEditor富文本 编辑器 (生产版本1.1.1及以前)里面包含富文本基础插件及当前最新的邮件特定的业务插件(签名、快捷回复、邀评、默认样式、选择颜色、插入图片、粘贴模式) O端 阅读更多…

CKEditor系列(六)改造原编辑器默认样式dom结构效果对比

熟悉的朋友应该知道之前是用的wangEditor,近期才迁移到CKEditor,很早的时候项目就支持一个叫“默认样式”的功能,需求就是部分BU希望能够统一邮件对外发送的样式,比如统一使用“宋体,黑色 阅读更多…

CKEditor系列(七)编辑器工具栏根据宽度自动折叠

刚才看了看上一篇写CKEditor的文章是在今年的一月份,现在轮到我们的设计师对编辑器下手了。我们回顾下现在的编辑器长什么样子。 需求 我们客户端默认窗口尺寸下,会出现排,并且第二排 阅读更多…

CKEditor系列(三)粘贴操作是怎么完成的

在上一篇文章 CKEditor系列(二)事件系统是怎么实现的 中,我们了解了CKEditor中事件系统的运行流程,我们先简单回顾下: 用户注册回调函数时可以指定优先级,值越小的优先级越高,默 阅读更多…

CKEditor系列(二)事件系统是怎么实现的

CKEditor的事件系统的源代码在core/event.js里面 我们看看整个事件系统的实现过程 事件监听on CKEDITOR.event.prototype = ( function 阅读更多…

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了