当尝试在页面中集成 CKEditor5 时,可能会遇到引入不成功的情况。包括配置引入不生效、DOM 节点修改后编辑器无法正确加载等。
如下,当页面初始化时修改了DOM 节点,此时CKEditor5 的配置已经引入,所以配置不生效。此时需要加defer async这两个属性,来确保在页面初始化后加载脚本。
<script>
$(function () {
receiveFromChild(layout.zoneHtml);
});
function receiveFromChild(value) {
$("#sortable").append(value);
var zonesContent = $('.zone').map(function () {
return $(this).html();
}).get();
$('#sortable').html(value);
$('.zone').each(function (index) {
$(this).html(zonesContent[index]);
});
layout.zoneHtml = value;
}
</script>
<script type="importmap">
{"imports": {"ckeditor5": "/imp/ckeditor5/ckeditor5.js", "ckeditor5/": "/imp/ckeditor5/"}}
</script>
<script type="module" th:src="@{/ckeditor5/main.js}" defer async></script>