Froala编辑器页面加载后自动修改内容致脏检查异常求助

问题详情 #

• 加载已保存的HTML内容（如 <div style="font-size: 12px;">test123</div>）时，Froala自动嵌套外层div，变为 <div style="font-size: 12px;"><div style="font-size: 12px;">test123</div></div>，触发脏状态
• 空控件初始化时，自动插入空格和换行，导致脏检查误判

环境：Froala 4.2.1，Edge最新版

解决方案 #

1. 禁用自动段落/容器生成 #

Froala默认会给内容自动包裹段落或div，通过以下配置关闭该行为：

new FroalaEditor('#editor', {
  autoParagraph: false, // 禁用自动生成<p>标签
  htmlCleaner: {
    wrapBlocks: false // 禁止自动给块级元素添加外层容器
  }
});

2. 精准控制HTML清理规则 #

调整htmlCleaner的允许标签和属性，确保原始内容结构不被修改：

htmlCleaner: {
  allowedTags: ['div', 'span', 'strong', 'em'], // 按需添加业务需要的标签
  allowedAttributes: {
    div: ['style', 'class'],
    span: ['style', 'class']
    // 其他标签的属性配置
  },
  wrapBlocks: false
}

3. 处理空内容的自动填充问题 #

初始化时手动重置空内容，避免编辑器自动插入空格换行：

new FroalaEditor('#editor', {
  // 其他配置
  init: function() {
    // 若初始内容为空，强制设置为空字符串
    if (!this.html.get().trim()) {
      this.html.set('');
    }
    // 记录初始内容用于脏检查
    window.initialEditorContent = this.html.get();
  }
});

4. 修正脏检查逻辑 #

确保脏检查的基准值是编辑器初始化完成后的最终内容，而非原始保存的HTML：

// 检查是否脏的函数
function isEditorDirty() {
  const currentContent = document.querySelector('#editor .fr-view').innerHTML;
  return currentContent !== window.initialEditorContent;
}

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