如何通过JavaScript修改ContentTools内容并让其识别更改？

直接修改DOM元素的innerHTML后，ContentTools编辑器不会自动感知到内容变化——因为它内部维护了独立的内容状态副本，保存时会优先使用这个副本而非当前DOM内容。要让编辑器识别并保存更改，需要通过ContentTools提供的API同步修改：

方法一：修改DOM后触发编辑器更新 #

先修改目标元素内容，再通知对应可编辑区域同步状态：

// 修改DOM内容
const pElement = document.getElementById('p-text');
pElement.innerHTML = "Hello World";

// 获取该元素对应的可编辑区域实例
const editable = ContentTools.EditorApp.get().editableForElement(pElement);

// 通知编辑器内容已更新
editable.updated();

方法二：直接通过编辑器API修改区域内容 #

调用编辑区域的html()方法直接修改内容，编辑器会自动同步DOM与内部状态：

// 获取对应data-name="content"的编辑区域
const region = ContentTools.EditorApp.get().regions().get('content');

// 传入HTML字符串更新区域内容
region.html(`<p id='p-text'>Hello World</p>`);

两种方法都能让编辑器识别内容变化，点击保存按钮时即可保存修改后的内容。

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