记录一下日常，封装CKEditor 5，函数里每次初始化CKEditor 5 的时候，把editor输出到全局变量。因为重复使用初始化，导致全局变量只显示最后初始化的editor。
要解决这个问题，我们需要确保每次调用 createEditor 函数时，都能正确地将新的 editor 实例存储到一个地方，而且这个地方不会因为重复调用而覆盖之前的实例。我们可以通过以下几种方法来解决这个问题：
- 使用一个数组来存储所有的 editor 实例，每个实例都关联到相应的 editorId。
- 使用一个对象，其中 key 是 editorId，value 是对应的 editor 实例。
- 使用一个映射（Map），其中 key 是 editorId，value 是对应的 editor 实例。
代码
// 用一个对象来存储所有编辑器实例
const editors = {};
function createEditor(editorId, content) {
// 检查编辑器是否已存在
if (editors[editorId]) {
console.error(`id为"${editorId}"的编辑器已存在。`);
return;
}
// 创建新的编辑器实例
ClassicEditor
.create(document.querySelector(`#${editorId}`), {
toolbar: {},
placeholder: content,
})
.catch(error => {
console.error(error);
})
.then(editor => {
// 将编辑器实例存储到全局对象中
editors[editorId] = editor;
});
}
function setContext(editorId, content) {
// 获取编辑器实例
const editor = editors[editorId];
if (editor) {
// 设置编辑器的内容
editor.setData(content);
} else {
console.error(`id为"${editorId}"的编辑器不存在。`);
}
}
使用方法
// 初始化第一个编辑器
createEditor('notice1', '请输入公告内容1');
// 初始化第二个编辑器
createEditor('notice2', '请输入公告内容2');
// 设置第一个编辑器的内容
setContext('notice1', '这是第一个编辑器的内容');
// 设置第二个编辑器的内容
setContext('notice2', '这是第二个编辑器的内容');
//获取编辑器内容
//editors是存储所有编辑器实例，详情见上面第一块第二行带代码
const editor = editors['notice1'];
console.log(editor.getData()); //输出：这是第一个编辑器的内容
每次调用 createEditor 函数时，都会检查该 editorId 是否已存在。如果已存在，会打印一个错误信息。如果不存在，就会创建一个新的编辑器实例，并将其存储到 editors 对象中。这样，即使你多次调用 createEditor 函数，也不会覆盖之前的编辑器实例。
同样地，当你调用 setContext 函数时，它会检查 editors 对象中是否存在对应的 editor 实例。如果存在，就会更新其内容；如果不存在，会打印一个错误信息。
