如何实现TinyMCE编辑器中预格式化文本自动换行？

你的核心需求是让<pre>标签内的内容自动换行，而非横向滚动。现有代码的问题是CSS选择器写错了——你写的wrappretext是元素选择器，但实际要选中的是类名为wrappretext的元素，应该写成.wrappretext。

下面提供两种可行的实现方案：

方案一：全局修改所有预格式化文本样式（最简单） #

直接给所有<pre>标签添加自动换行样式，无需额外配置格式菜单，插入的预格式化文本会自动生效：

<Editor
  ...
  plugins: [
      'advlist autolink lists link image charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table paste code help wordcount'
  ],
  selector: 'textarea',
  content_style: `
    body {
      font-weight: normal;
    }
    /* 给所有pre标签添加自动换行样式 */
    pre {
      white-space: pre-wrap;
      overflow-wrap: break-word; /* 替代旧的word-wrap，兼容性更好 */
    }
  `
/>

方案二：保留自定义格式菜单（按需选择） #

如果你希望通过编辑器的样式菜单手动选择带换行的预格式化样式，修正原有代码的错误即可：

<Editor
  ...
  plugins: [
      'advlist autolink lists link image charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table paste code help wordcount'
  ],
  selector: 'textarea',
  content_style: `
    body {
      font-weight: normal;
    }
    /* 修正类选择器，添加.前缀 */
    .wrappretext {
      white-space: pre-wrap;
      overflow-wrap: break-word;
    }
  `,
  formats: {
    prewrap: {
      selector: 'pre',
      classes: 'wrappretext'
    }
  },
  style_formats: [
    {
      title: '带换行的预格式化文本',
      format: 'prewrap'
    }
  ]
/>

效果说明 #

两种方案都会让<pre>内的超长文本自动换行到下一行，避免出现横向滚动条，匹配你截图中的需求。

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