将CKEditor自定义在线构建集成到Elixir Phoenix项目失败

问题重现 #

我在CKEditor官网生成了自定义构建包，下载后放到项目assets/node_modules目录下，在app.js中这样导入：

import * as InlineEditor from '../node_modules/ckeditor5-custom-build/build/ckeditor.js';

然后尝试初始化编辑器：

export const Editor = {
    mounted() {
    if (document.querySelector( '#editor' )) {
        InlineEditor
        .create( document.querySelector( '#editor' ))
        .catch( error => {
            console.log(error);
            });
        }
    }
}

运行时报错：

Uncaught TypeError: InlineEditor.create is not a function

原因分析 #

CKEditor官网自定义构建的包，编辑器类是以默认导出的形式暴露的，而import * as会把整个模块的导出内容打包成一个对象，此时InlineEditor.create其实是不存在的，真正的编辑器类在这个对象的default属性里。

解决方案 #

方案1：改用默认导入 #

直接修改导入语句，获取默认导出的编辑器类：

import InlineEditor from '../node_modules/ckeditor5-custom-build/build/ckeditor.js';

此时InlineEditor就直接指向包含create方法的编辑器类，再调用初始化代码即可正常运行。

方案2：（备选）从模块对象中提取默认导出 #

如果不想修改导入方式，也可以从导入的模块对象中取default属性：

import * as CKEditorModule from '../node_modules/ckeditor5-custom-build/build/ckeditor.js';
const InlineEditor = CKEditorModule.default;

后续的初始化代码保持不变即可。

额外建议 #

• 不要把自定义构建包放到assets/node_modules目录，node_modules一般是npm自动管理的依赖目录，建议放到assets/ckeditor这类自定义目录下，避免混淆。
• 确保页面中id="editor"的DOM元素在mounted钩子执行时已经渲染完成，避免因元素未加载导致的初始化失败。

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