如何在TinyMCE中为多段落高亮内容添加单个外层span类

首先要明确：你想要的输出不符合HTML规范——<span>是行内元素，按照标准，行内元素不能包含<p>这类块级元素，浏览器渲染时会自动拆分结构，最终达不到你预期的效果。

正确实现方式：用块级元素替代span #

把自定义格式里的inline: 'span'改成block: 'div'（或其他块级元素，比如<section>），这样就能用单个容器包裹多个段落，同时保留样式、属性和类。

修改后的自定义格式代码 #

customformat: { 
  block: 'div', 
  styles: { color: '#00ff00', fontSize: '20px' }, 
  attributes: { title: 'My custom format'}, 
  classes: 'customclass'
}

应用后的输出结果 #

<div class="customclass" style="color: #00ff00; font-size: 20px;" title="My custom format">
  <p style="text-align: justify;">parapgraph1</p>
  <p style="text-align: justify;">parapgraph2</p>
</div>

为什么不能用span包裹段落？ #

HTML规范中，行内元素（如span、a、em等）只能包含文本或其他行内元素，不能嵌套块级元素。即使你通过自定义代码强行生成这种结构，浏览器也会自动修正为无效的拆分结构，完全达不到你想要的包裹效果。

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