如何在CKEditor 5中本地离线安装Word Count字数统计插件

核心问题说明 #

你当前使用的是官方预编译的CDN版CKEditor 5，这类预构建包已固定内置插件集合，无法直接加载未参与同版本编译的插件源码，因此你直接放置在本地plugins目录的源码版插件无法生效，还会触发依赖缺失、版本不匹配类报错。

可落地实现方案（无需npm操作） #

方案一：自定义预构建包（推荐） #

• 选择和你当前使用的27.1.0版本匹配的CKEditor在线构建入口，选择Classic编辑器类型
• 勾选Word Count插件和你需要的其他功能，调整工具栏顺序后下载完整自定义构建包
• 用下载包中的ckeditor.js替换当前CDN引入的编辑器文件，本地直接引用即可，所有依赖已内置
• 初始化配置参考如下：

$(function() {   
    var editorTextarea
    ClassicEditor.create( document.querySelector( '#cktext' ),{
        // 字数统计配置
        wordCount: {
            displayWords: true, // 显示字数
            displayCharacters: true // 显示字符数
        },
        toolbar: [
            // 保留你原有需要的工具栏按钮，末尾添加wordCount显示项
            'heading', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', '|', 'wordCount'
        ]
    } )
    .then (editor => {
        editorTextarea = editor;                            
    })
    .catch( error => {
        console.error( error );
    } );
});

方案二：单独引入同版本预编译插件 #

• 下载和你当前27.1.0版本完全匹配的Word Count预编译插件包，不要使用源码目录下的src/wordcount.js文件，该文件为ES6源码无法直接在浏览器运行
• 将插件的预编译js文件放置在本地plugins目录，在ckeditor.js引入之后加载该插件文件
• 初始化时在配置项中注册插件即可：

ClassicEditor.create( document.querySelector( '#cktext' ),{
    plugins: [ WordCount ],
    wordCount: {
        displayWords: true,
        displayCharacters: true
    },
    toolbar: [ /* 原有工具栏项 + 'wordCount' */ ]
} )

目录结构调整参考 #

CKEditor 
 |---ckeditor.js // 替换为自定义构建后的文件或保留原有+引入插件预编译文件
 |---ckeditor.js.map
 |---translations (folder)
 |---plugins(folder) 
     |---ckeditor5-word-count (folder)
         |---wordcount.js // 替换为对应版本的预编译文件

内容的提问来源于stack exchange，提问作者shibin