TinyMCE行内模式删除全部内容时丢失<p>标签属性求助

针对你遇到的全选删除时p标签被替换、属性丢失的问题，以下是几种更优的解决方案，无需禁用Delete/Backspace键：

方案一：拦截全选删除操作，手动清空内容 #

通过监听编辑器的keydown事件，判断是否为全选后的删除操作，直接清空内容而非删除标签，保留原p标签及其属性：

var config = {
  selector: '.tinymce-body',
  menubar: false,
  inline: true,
  plugins: [
    'autoresize',
    'quickbars',
    'help'
  ],
  toolbar: false,
  newline_behaviour: 'linebreak',
  setup: function(editor) {
    editor.on('keydown', function(e) {
      // 判断是否选中了全部文本
      const selectedText = editor.selection.getContent({ format: 'text' });
      const fullText = editor.getContent({ format: 'text' });
      const isFullSelection = selectedText.length === fullText.length && !editor.selection.isCollapsed();

      if (isFullSelection && (e.key === 'Delete' || e.key === 'Backspace')) {
        e.preventDefault();
        // 清空内容，保留原p标签
        editor.setContent('');
        // 将光标定位到空p标签内
        editor.selection.select(editor.getBody());
        editor.selection.collapse(true);
      }
    });
  }
};

tinymce.init(config);

方案二：监听内容变化，自动恢复原标签属性 #

先保存初始p标签的所有属性，在内容发生变化时检查并恢复属性，确保标签结构不变：

var config = {
  selector: '.tinymce-body',
  menubar: false,
  inline: true,
  plugins: [
    'autoresize',
    'quickbars',
    'help'
  ],
  toolbar: false,
  newline_behaviour: 'linebreak',
  setup: function(editor) {
    // 存储原p标签的属性
    const originalAttributes = {};

    editor.on('init', function() {
      const body = editor.getBody();
      if (body.tagName === 'P') {
        originalAttributes.id = body.id;
        originalAttributes.className = body.className;
        originalAttributes['data-original-text'] = body.getAttribute('data-original-text');
      }
    });

    // 每次节点变化时检查并恢复属性
    editor.on('NodeChange', function() {
      const body = editor.getBody();
      if (body.tagName === 'P') {
        body.id = originalAttributes.id;
        body.className = originalAttributes.className;
        body.setAttribute('data-original-text', originalAttributes['data-original-text']);
      }
    });
  }
};

tinymce.init(config);

方案三：配置内容过滤规则，确保属性被保留 #

通过valid_elements和extended_valid_elements明确允许p标签保留指定属性，避免TinyMCE过滤掉自定义属性：

var config = {
  selector: '.tinymce-body',
  menubar: false,
  inline: true,
  plugins: [
    'autoresize',
    'quickbars',
    'help'
  ],
  toolbar: false,
  newline_behaviour: 'linebreak',
  // 允许p标签保留id、class、data-original-text属性
  valid_elements: 'p[id|class|data-original-text]',
  extended_valid_elements: 'p[id|class|data-original-text]'
};

tinymce.init(config);

建议优先尝试方案一，它直接从操作源头解决问题，逻辑更直观；方案二作为兜底，确保属性不会丢失；方案三用于防止TinyMCE的内容过滤机制误删属性。

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