Svelte动态更新Quill编辑器内容触发只读模式如何解决

你遇到的动态赋值后编辑器异常进入只读状态、无法响应编辑操作，是两处用法错误导致的：

• onTextChange回调中强行给绑定变量editorData写入固定值，会触发「用户输入→回调修改变量→组件检测变量变化重渲染→重渲染再次触发text-change事件」的死循环，直接打乱组件内部的编辑状态锁，最终触发异常只读。
• 你使用的第三方Quill封装组件没有对外部修改data属性做完整的响应式适配，直接修改绑定的editorData变量不会调用Quill原生的内容更新接口，反而会覆盖组件内部维护的编辑器实例状态，导致编辑功能锁死。

1. 修正事件回调逻辑 #

删除onTextChange中强行给editorData赋值的代码，组件自带的bind:data双向绑定已经会自动同步编辑器内容，不需要手动在回调里重复赋值，避免循环更新：

function onTextChange(event) {
  // 仅做业务逻辑处理即可，不要在这里修改editorData
  console.log(event.detail)
}

2. 通过Quill原生API动态更新内容 #

不要直接修改绑定变量来驱动编辑器内容更新，拿到Quill实例后调用原生API修改内容，从根源上避免组件状态错乱：

import { onMount } from 'svelte';
import {Editor, quill} from '@tadashi/svelte-editor-quill';

let editorData =  "";
// 存储Quill实例
let quillInstance = null;

// 组件挂载完成后拿到实例，初始化编辑状态
onMount(() => {
  quillInstance = quill;
  // 强制开启编辑状态，避免异常只读
  quillInstance.enable(true);
})

var toolbarOptions = [
   ['bold', 'italic', 'underline', 'strike'],
   ['link','blockquote', 'code-block'],
   [{ 'header': 1 }, { 'header': 2 }],
   [{ 'list': 'ordered'}, { 'list': 'bullet' }],
   [{ 'script': 'sub'}, { 'script': 'super' }],
   [{ 'indent': '-1'}, { 'indent': '+1' }],
   [{ 'direction': 'rtl' }],
   [{ 'size': ['small', false, 'large', 'huge'] }],
   [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
   [{ 'color': [] }, { 'background': [] }],
   [{ 'font': [] }],
   [{ 'align': [] }],
   ['clean'],
   ['link', 'image'],
];

const options = {
   modules: {
    toolbar: toolbarOptions
   },
   placeholder: "Write here..",
   theme: "snow",
};

function add(){
  if (!quillInstance) return;
  // 调用Quill原生API设置纯文本内容，需要设置富文本可替换为setContents接口
  quillInstance.setText("Apenas um show dfghdfgh", 'silent');
  // 同步更新绑定变量，保证数据一致
  editorData = quillInstance.root.innerHTML;
  // 再次确认编辑器处于可编辑状态
  quillInstance.enable(true);
  console.log(editorData);
}

3. 组件使用代码保持不变 #

<Editor {options} on:text-change={onTextChange} bind:data={editorData} />

• 所有主动修改编辑器内容的操作，都优先走Quill实例的原生API，不要直接修改绑定的editorData变量来触发内容更新。
• 不要在text-change事件回调中重复给editorData赋值，避免触发循环更新导致状态错乱。
• 如果遇到偶发的只读锁定，直接调用quillInstance.enable(true)即可强制解锁编辑状态。

内容的提问来源于stack exchange，提问作者R.alim