記錄一下日常捅僵，封裝CKEditor 5慷妙，函數(shù)里每次初始化CKEditor 5 的時候眷昆，把editor輸出到全局變量。因為重復使用初始化弟孟，導致全局變量只顯示最后初始化的editor贝咙。
要解決這個問題，我們需要確保每次調(diào)用 createEditor 函數(shù)時拂募，都能正確地將新的 editor 實例存儲到一個地方庭猩，而且這個地方不會因為重復調(diào)用而覆蓋之前的實例。我們可以通過以下幾種方法來解決這個問題：
- 使用一個數(shù)組來存儲所有的 editor 實例陈症，每個實例都關聯(lián)到相應的 editorId蔼水。
- 使用一個對象，其中 key 是 editorId爬凑，value 是對應的 editor 實例徙缴。
- 使用一個映射（Map）试伙，其中 key 是 editorId嘁信，value 是對應的 editor 實例于样。
代碼
// 用一個對象來存儲所有編輯器實例
const editors = {};
function createEditor(editorId, content) {
// 檢查編輯器是否已存在
if (editors[editorId]) {
console.error(`id為"${editorId}"的編輯器已存在。`);
return;
}
// 創(chuàng)建新的編輯器實例
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) {
// 設置編輯器的內(nèi)容
editor.setData(content);
} else {
console.error(`id為"${editorId}"的編輯器不存在潘靖。`);
}
}
使用方法
// 初始化第一個編輯器
createEditor('notice1', '請輸入公告內(nèi)容1');
// 初始化第二個編輯器
createEditor('notice2', '請輸入公告內(nèi)容2');
// 設置第一個編輯器的內(nèi)容
setContext('notice1', '這是第一個編輯器的內(nèi)容');
// 設置第二個編輯器的內(nèi)容
setContext('notice2', '這是第二個編輯器的內(nèi)容');
//獲取編輯器內(nèi)容
//editors是存儲所有編輯器實例穿剖，詳情見上面第一塊第二行帶代碼
const editor = editors['notice1'];
console.log(editor.getData()); //輸出：這是第一個編輯器的內(nèi)容
每次調(diào)用 createEditor 函數(shù)時，都會檢查該 editorId 是否已存在卦溢。如果已存在糊余，會打印一個錯誤信息。如果不存在单寂，就會創(chuàng)建一個新的編輯器實例贬芥，并將其存儲到 editors 對象中。這樣宣决，即使你多次調(diào)用 createEditor 函數(shù)蘸劈，也不會覆蓋之前的編輯器實例。
同樣地尊沸，當你調(diào)用 setContext 函數(shù)時威沫，它會檢查 editors 對象中是否存在對應的 editor 實例。如果存在洼专，就會更新其內(nèi)容棒掠；如果不存在，會打印一個錯誤信息屁商。
