如何在AngularJS中禁用TinyMCE的内容自动格式化行为

你碰到的是TinyMCE默认启用的内容清理、格式化以及标签/属性过滤特性，这些特性会自动调整HTML结构、移除自定义标签（比如你的<margin>）、重排属性顺序。下面是针对AngularJS集成场景的具体解决方案，一步步来配置：

1. 允许所有元素和属性，避免自定义标签被移除 #

TinyMCE默认会过滤它认为“不合法”的HTML标签和属性，你的<margin>标签就是被这个机制移除的。添加以下配置来禁用这种过滤：

• valid_elements: '*[*]'：允许所有HTML元素以及它们的任意属性
• extended_valid_elements: 'margin[*]'：明确将自定义的<margin>标签加入白名单，确保它不会被清理（有时候*[*]可能对自定义标签的覆盖不够彻底，额外加这个更保险）

2. 关闭自动格式化与排版调整 #

这些配置会阻止TinyMCE自动修改你的内容结构、换行和空格：

• format_on_save: false：禁用保存时的自动格式化操作
• remove_linebreaks: false：保留原始的换行符，不会自动移除
• preserve_newlines: true：确保内容中的换行被完整保留
• indent: false：禁止自动缩进HTML代码
• forced_root_block: false：不让TinyMCE自动给内容包裹<p>或其他根标签（避免额外的结构修改）

3. 固定属性顺序，避免TinyMCE重排 #

如果你想保留原始的属性顺序（比如你的例子里align在style前面），可以通过attribute_order指定输出顺序：

attribute_order: 'align,valign,style,id,class'

你可以根据自己的需求调整这个顺序列表，TinyMCE会严格按照你指定的顺序输出属性。

4. 在AngularJS中集成这些配置 #

把上述配置整合到你的AngularJS TinyMCE选项中，比如在控制器里：

angular.module('yourApp').controller('EditorController', function($scope) {
  $scope.tinymceOptions = {
    // 核心配置
    valid_elements: '*[*]',
    extended_valid_elements: 'margin[*]',
    cleanup: false, // 旧版本TinyMCE用这个；如果是v5+，改用content_filtering: false
    format_on_save: false,
    remove_linebreaks: false,
    preserve_newlines: true,
    indent: false,
    forced_root_block: false,
    attribute_order: 'align,valign,style,id,class',
    
    // 其他你原本的配置（比如toolbar、theme等）
    theme: 'silver',
    toolbar: 'undo redo bold italic'
  };
});

注意事项 #

• 如果你使用的是TinyMCE 5及以上版本，部分配置项名称有变化：比如cleanup替换为content_filtering: false，remove_linebreaks可能需要配合br_newlines: true使用，建议对照对应版本的官方文档调整。
• 测试时尽量只做微小修改（比如修改文本内容），然后保存查看HTML是否和原始结构一致，确保所有配置生效。

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