ckeditor5编写自定义插件，并做国际化处理

首先下载好ckeditor5的自定义构建项目，在src目录下新建plugins文件夹存放我们自己写的插件

这里我编写一个emoji表情插件，做为参考，目录如下：

其中index.js内容

import { Plugin } from 'ckeditor5/src/core';
export default class SpecialCharactersEmoji extends Plugin {
  /**
   * @inheritDoc
   */
  static get pluginName() {
    return 'SpecialCharactersEmoji';
  }
  /**
   * @inheritDoc
   */
  init() {
    const editor = this.editor;
    const t = editor.t;
      editor.plugins.get("SpecialCharacters").addItems("Emoji", [
        { title: t("smiley face"), character: "😊" },
        { title: t("rocket"), character: "🚀" },
        { title: t("wind blowing face"), character: "🌬️" },
        { title: t("floppy disk"), character: "💾" },
        { title: t("heart"), character: "❤️" },
      ]);
    }
}

title即为符号名称，这里指表情的名称，t()这个方法是ckeditor5专门用来做国际化字符转换的方法，其主要目的是将zh-cn.po文件中的msgid与之匹配，并拿到msgstr替换

zh-cn.po文件内容如下：

# Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
#
#                                     !!! IMPORTANT !!!
#
#         Before you edit this file, please keep in mind that contributing to the project
#                translations is possible ONLY via the Transifex online service.
#
#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
#
#                   To learn more, check out the official contributor's guide:
#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
#
msgid ""
msgstr ""
"Language-Team: Chinese (China) (https://www.transifex.com/ckeditor/teams/11143/zh_CN/)\n"
"Language: zh_CN\n"
"Plural-Forms: nplurals=1; plural=0;\n"

msgctxt "A label for the \"smiley face\" symbol."
msgid "smiley face"
msgstr "笑脸"

msgctxt "A label for the \"rocket\" symbol."
msgid "rocket"
msgstr "火箭"

msgctxt "A label for the \"wind blowing face\" symbol."
msgid "wind blowing face"
msgstr "吹气"

msgctxt "A label for the \"floppy disk\" symbol."
msgid "floppy disk"
msgstr "软盘"

msgctxt "A label for the \"heart\" symbol."
msgid "heart"
msgstr "心"

接着最外面还有一个contexts.json文件别忘了

{
  "smiley face": "A label for the \"smiley face\" symbol.",
  "rocket": "A label for the \"rocket\" symbol.",
  "wind blowing face": "A label for the \"wind blowing face\" symbol.",
  "floppy disk": "A label for the \"floppy disk\" symbol.",
  "heart": "A label for the \"heart\" symbol."
}

最后说一下这个po文件怎么才能被解析，说到这里，我们不得不说一下webpack.config.js文件中的CKEditorWebpackPlugin插件，这个插件在webpack打包ckeditor5启着重要最用，看看里面的参数

看到options中定义了很多参数，关于这些参数代表的含义我在github上翻译了一下

那么可以看到packageNamesPattern参数默认存在一个正则表达式，目的就是在wepback打包时，会扫描所有ckeditor5-开头的文件夹下的所有文件，那么看到这里你是否明白了？

回到我写的插件目录

只要将插件的目录重命名为ckeditor5-开头的文件夹，那么CKEditorWebpackPlugin插件便会在打包时自动扫描到po文件。

接下来，使用这个插件，找到 src/ckeditor.js，将插件引入：

import SpecialCharactersEmoji from './plugins/ckeditor5-SpecialCharactersEmoji/src';
class Editor extends ClassicEditor {}
// Plugins to include in the build.
Editor.builtinPlugins = [
  // 注册插件
  SpecialCharactersEmoji
];
// Editor configuration.
Editor.defaultConfig = {
  toolbar: {
    items: [
      // 如果你的插件还需要放到工具栏，这里也要加上
      'SpecialCharactersEmoji'
    ]
  },
};

这里在说一下怎么验证po文件是否生效。在打包完成后，在build目录下生成了ckeditor.js文件，打开搜索一下你翻译的emoji表情名称，比如"笑脸"，如果你能搜到就成功了：