如何通过名称识别页面Quill实例并编写函数获取对应内容？

我在同一页面中实例化了四个Quill编辑器实例，现在需要获取每个实例的内容。请问是否可以编写一个函数，通过传入实例名称来指定要操作的Quill实例？以下是我初步编写的代码：

$.fn.getQuillContent = function(instantiatedquill) { 
  var content = { 
    text: instantiatedquill.getContents(), 
  }; 
};

当然可以实现这个需求！不过你目前的代码有几个小细节需要调整，我来帮你梳理两种实用的实现思路：

思路1：直接传入Quill实例对象（最推荐） #

这是最直接可靠的方式——Quill实例本身就是一个对象，直接传入它就能调用API获取内容，还能避免名称映射可能出现的错误：

// 定义通用的Quill内容获取函数
function getQuillContent(quillInstance) {
  // 先校验传入的是不是有效的Quill实例，避免报错
  if (!(quillInstance instanceof Quill)) {
    console.error('传入的参数不是有效的Quill实例哦');
    return null;
  }
  
  // 返回多种格式的内容，你可以按需选择使用
  return {
    plainText: quillInstance.getText(), // 获取纯文本内容
    deltaFormat: quillInstance.getContents(), // 获取Quill专属的Delta格式内容
    htmlFormat: quillInstance.root.innerHTML // 获取HTML格式内容
  };
}

// 使用示例：假设你已经实例化了四个编辑器
const quillEditor1 = new Quill('#editor-container-1', { theme: 'snow' });
const quillEditor2 = new Quill('#editor-container-2', { theme: 'snow' });
const quillEditor3 = new Quill('#editor-container-3', { theme: 'snow' });
const quillEditor4 = new Quill('#editor-container-4', { theme: 'snow' });

// 获取第二个编辑器的内容
const editor2Content = getQuillContent(quillEditor2);
console.log('编辑器2的纯文本：', editor2Content.plainText);
console.log('编辑器2的Delta内容：', editor2Content.deltaFormat);

思路2：通过实例名称字符串获取（适合需要按名称管理的场景） #

如果你确实需要通过名称字符串来指定实例，可以先把所有Quill实例存储到一个映射对象里，通过键名来快速定位：

// 先把所有Quill实例统一存储到一个对象中，用名称作为键
const quillInstanceMap = {
  userProfileEditor: new Quill('#profile-editor', { theme: 'snow' }),
  articleContentEditor: new Quill('#article-editor', { theme: 'snow' }),
  commentEditor: new Quill('#comment-editor', { theme: 'snow' }),
  replyEditor: new Quill('#reply-editor', { theme: 'snow' })
};

// 定义通过名称获取内容的函数
function getQuillContentByName(instanceName) {
  const targetInstance = quillInstanceMap[instanceName];
  if (!targetInstance) {
    console.error(`找不到名为${instanceName}的Quill实例，请检查名称是否正确`);
    return null;
  }
  
  return {
    plainText: targetInstance.getText(),
    deltaFormat: targetInstance.getContents(),
    htmlFormat: targetInstance.root.innerHTML
  };
}

// 使用示例：获取文章编辑器的内容
const articleContent = getQuillContentByName('articleContentEditor');
console.log('文章编辑器的HTML内容：', articleContent.htmlFormat);

针对你原有jQuery插件写法的优化 #

如果你想用jQuery插件的风格实现，也可以调整成这样（通常jQuery插件是绑定到DOM元素上的）：

$.fn.getQuillContent = function() {
  // 从当前jQuery对象对应的DOM元素中找到Quill实例
  const quillInstance = Quill.find(this[0]);
  if (!quillInstance) {
    console.error('当前DOM元素不是Quill编辑器的容器哦');
    return null;
  }
  
  return {
    plainText: quillInstance.getText(),
    deltaFormat: quillInstance.getContents(),
    htmlFormat: quillInstance.root.innerHTML
  };
};

// 使用示例：通过编辑器容器的jQuery对象获取内容
const profileContent = $('#profile-editor').getQuillContent();
console.log('个人资料编辑器的Delta内容：', profileContent.deltaFormat);

这样不管用哪种方式，都能轻松获取指定Quill实例的内容啦～

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