TinyMCE编辑器问题：如何删除div标签及阻止粘贴自动添加div标签

嘿，这俩问题我之前在项目里也踩过坑，给你分享几个实用的解决办法：

1. 如何删除已有的div标签？ #

方法一：手动清理（快速临时方案） #

直接点击编辑器工具栏里的源代码视图按钮（一般是<>图标），找到所有<div>和</div>标签，手动替换成<p>和</p>就行。比如把：

<div>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir...</div>

改成：

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir...</p>

方法二：配置编辑器自动转换（长期方案） #

如果编辑器里经常出现div标签，不如配置个自动转换规则，省得手动改。在初始化TinyMCE的时候，添加setup函数来处理节点：

tinymce.init({
  selector: '#your-editor-element',
  setup: function(editor) {
    // 每次节点变化时，把div转换成p
    editor.on('NodeChange', function(e) {
      const divElements = editor.dom.select('div');
      divElements.forEach(div => {
        // 创建新的p标签，把div里的内容移进去
        const pTag = editor.dom.create('p', {}, div.innerHTML);
        // 用p标签替换div
        editor.dom.replace(pTag, div);
      });
    });
  }
});

2. 阻止复制粘贴时自动添加div标签 #

要解决这个问题，核心是让编辑器默认用<p>作为块级元素，同时拦截粘贴内容里的div标签，这里有几个关键配置：

配置1：强制根元素为p #

在初始化时设置forced_root_block: 'p'，这样编辑器会自动把新输入的内容用<p>包裹，而不是<div>：

tinymce.init({
  selector: '#your-editor-element',
  forced_root_block: 'p' // 强制根块元素为p
});

配置2：粘贴时预处理内容 #

配合paste插件，在粘贴前把内容里的div标签替换成p。确保加载了paste插件，然后添加paste_preprocess事件：

tinymce.init({
  selector: '#your-editor-element',
  plugins: 'paste', // 必须加载paste插件
  forced_root_block: 'p',
  setup: function(editor) {
    // 粘贴前处理内容，替换div为p
    editor.on('paste_preprocess', function(e) {
      e.content = e.content.replace(/<div([^>]*)>/g, '<p$1>').replace(/<\/div>/g, '</p>');
    });
  }
});

效果示例 #

当你粘贴这段内容：

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinle

配置后，编辑器会自动生成：

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinle</p>

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