Svelte中contenteditable元素失焦更新变量但外部修改变量无法同步的问题求助

Hey，我明白你的问题了——你想让contenteditable的div只在失焦时同步内容到变量html，但现在遇到了反向的问题：当其他地方修改html变量时，div的内容不会跟着更新，对吧？

这其实是因为Svelte的DOM更新机制在处理contenteditable元素时的小特性：当用户手动编辑过contenteditable元素的内容后，Svelte会认为你想保留用户的手动修改，不会主动用innerHTML={html}去覆盖它，哪怕html变量已经变化了。

那怎么解决这个双向的需求呢？这里有两个实用的方案：

方案一：用绑定元素+反应式语句手动同步 #

我们可以通过bind:this获取到contenteditable的DOM元素，然后用Svelte的反应式语句监听html变量的变化，一旦html变了，就手动把新值同步到div的innerHTML里。

<script>
    let html = 'Write some text!';
    let editableDiv;

    // 当html变量变化时，同步到div中
    $: if (editableDiv) {
        editableDiv.innerHTML = html;
    }
</script>

<div 
    bind:this={editableDiv}
    on:blur={(e) => { html = e.target.innerHTML; }}
    contenteditable
/>

<!-- 用来测试外部修改的按钮 -->
<button on:click={() => html = '从外部更新的内容！'}>点击更新html变量</button>

<p>当前html变量值：{html}</p>

<style>
    [contenteditable] {
        padding: 0.5em;
        border: 1px solid #eee;
        border-radius: 4px;
        margin-bottom: 1em;
    }
</style>

这个方案的好处是比较直观，完全手动控制同步时机，不会破坏你想要的“失焦才更新变量”的逻辑。

方案二：用key属性强制重新渲染元素 #

Svelte会根据元素的key属性来判断是否需要重新创建元素。我们可以把html变量作为div的key，这样只要html变化，Svelte就会销毁旧的div，创建一个新的，自然就会用上新的innerHTML值。

<script>
    let html = 'Write some text!';
</script>

<div 
    key={html}
    innerHTML={html}
    on:blur={(e) => { html = e.target.innerHTML; }}
    contenteditable
/>

<button on:click={() => html = '从外部更新的内容！'}>点击更新html变量</button>

<p>当前html变量值：{html}</p>

<style>
    [contenteditable] {
        padding: 0.5em;
        border: 1px solid #eee;
        border-radius: 4px;
        margin-bottom: 1em;
    }
</style>

这个方案更简洁，不需要额外的DOM引用，适合逻辑比较简单的场景。不过要注意，重新创建元素会丢失一些DOM状态（比如光标位置），如果你的场景需要保留这些状态，方案一更合适。

两种方案都能解决你的问题：既保持“失焦时把div内容同步到变量”的逻辑，又能在外部修改html变量时，让div内容同步更新。你可以根据自己的实际场景选择~

备注：内容来源于stack exchange，提问作者tobiasBora