如何在Angular和JS中动态追加多个Quill编辑器

看起来你已经找对方向了！动态创建多个Quill编辑器的关键在于确保每个编辑器绑定到唯一的DOM节点，并且初始化时元素已经被正确添加到DOM中。你的现有思路没问题，但可以优化一下写法，避免潜在的DOM识别问题和错误中断。

问题分析 #

你当前用字符串拼接HTML的方式创建容器，再通过选择器初始化Quill。这种方式有时候会因为DOM渲染时机的问题，导致Quill找不到目标元素；另外如果item.content不是合法的JSON格式，会直接抛出错误中断整个循环。

修正后的代码 #

HTML部分

<div id="wallcontent"></div>

JavaScript部分

// 先定义Quill的基础配置（根据你的实际需求调整）
const optionwall = {
  theme: 'snow',
  modules: {
    toolbar: [
      // 这里可以添加你需要的工具栏按钮，比如：
      ['bold', 'italic', 'underline'],
      ['link', 'image']
    ]
  }
};

// 可选：存储所有Quill实例，方便后续操作（比如获取内容、修改配置）
const quillEditors = [];

$http.post("/getwallpost", reqGetPost).then(function(response) {
  // 获取目标容器的DOM节点（原生DOM比jQuery选择器更直接）
  const wallContentContainer = document.getElementById('wallcontent');

  response.data.forEach(function(item) {
    if (item.type_id === 1) {
      // 1. 创建唯一的编辑器容器
      const editorDiv = document.createElement('div');
      editorDiv.id = `editor-${item.id}`; // 加前缀避免ID冲突
      wallContentContainer.appendChild(editorDiv);

      try {
        // 2. 初始化Quill编辑器并绑定到刚创建的容器
        const quillInstance = new Quill(editorDiv, optionwall);
        // 3. 解析并设置内容
        quillInstance.setContents(JSON.parse(item.content));
        // 4. 保存实例到数组（后续需要时可调用）
        quillEditors.push({ postId: item.id, editor: quillInstance });
      } catch (error) {
        // 捕获错误，避免一个编辑器失败影响其他
        console.error(`初始化帖子ID ${item.id} 的编辑器失败:`, error);
        console.error(`原始内容:`, item.content);
        // 可以在这里添加错误提示，比如给容器显示错误信息
        editorDiv.textContent = `加载编辑器失败：${error.message}`;
      }
    } else if (item.type_id === 2) {
      // 创建文章类型的元素
      const articleDiv = document.createElement('div');
      articleDiv.className = 'myArticles';
      articleDiv.textContent = 'This is article';
      wallContentContainer.appendChild(articleDiv);
    }
  });
});

关键优化点 #

• 直接操作DOM元素：用document.createElement创建容器，直接传给Quill构造函数，确保元素已经存在，避免选择器找不到元素的问题。
• 避免ID冲突：给编辑器ID添加前缀（比如editor-${item.id}），防止和页面其他元素的ID重复。
• 错误捕获：用try-catch包裹JSON解析和编辑器初始化，避免单个错误导致整个循环终止，同时方便排查问题。
• 实例存储：把每个Quill实例保存到数组中，后续如果需要获取编辑器内容、修改内容或者调用Quill的API，都可以直接从数组中获取对应实例。

额外注意事项 #

• 确保页面已经正确引入Quill的JS和CSS文件（比如snow主题的CSS），否则编辑器无法正常渲染。
• 如果item.content本身就是Quill兼容的Delta格式对象，就不需要用JSON.parse，直接传入即可。
• 如果你的项目用的是jQuery，也可以用$(wallContentContainer).append(editorDiv)来添加元素，效果是一样的。

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