在 tinymce 所见即所得编辑器中保留空白换行符答案

【问题标题】：Preserve white space line breaks in tinymce wysiwyg editor在 tinymce 所见即所得编辑器中保留空白换行符
【发布时间】：2023-01-04 01:16:13
【问题描述】：

我在通过包安装的反应项目中实现了一个 tinymce 编辑器

"@tinymce/tinymce-react": "^3.12.6".

在所见即所得编辑器中进行编辑时，我试图保留来自外部源（excel 文件）的数据的空白换行符，但我无法这样做。我已经尝试过诸如 force_br_newlines 和 convert_newlines_to_brs 之类的选项，但它似乎没有帮助

场景详细解释：

我有一个 excel 文件，其中包含导入到应用程序的多行文本。多行文本保留在数据库中，当我将其记录到控制台时，我得到多行显示的文本。（控制台不输出新行字符 line \n、\r 等，而只是像原始文本中那样输出空白换行符）。但是，当我使用 tinymce 编辑器编辑相同的数据时，tinymce 编辑器将所有数据放在一行中。

原始文本不是 html 文本，我们不能期望最终用户在 excel 文件中键入 HTML 标记，例如 ... or 

excel文件中的示例数据：

This is line one
This is line two
This is line three

在编辑器中显示时的数据：

This is line one This is line two This is line three

我希望编辑保留换行符。那可能吗？如何实现？非常感谢您的帮助。提前致谢。

【问题讨论】：

标签： javascript reactjs tinymce wysiwyg

【解决方案1】：

据我所知，由于@micheal-fromin 概述的原因，TinyMCE 无法实现这一点。

您可以做的最好的事情是在源文本中搜索新行（和/或）并将其替换为 HTML 换行符（ ）。

PHP解决方案

PHP 有一个非常方便的函数可以做到这一点：nl2br()。

nl2br 的问题在于它还会替换 HTML 标记中的换行符。如果这对您来说是个问题，我建议使用 autop()（纯 PHP）或 wpautop()（在 WordPress 中）将文本块替换为段落标记 ()。

Javascript 解决方案

在 Javascript 中，nl2br 转换为：

function nl2br (str, is_xhtml) {
  var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br ' + '/>' : '<br>'; // Adjust comment to avoid issue on phpjs.org display

  return (str + '').replace(/([^>
]?)(
|

|
|
)/g, '$1' + breakTag + '$2');
}

【讨论】：

【解决方案2】：

TinyMCE 是一个 HTML 编辑器，因此当您向它传递一串纯文本时，它会将其转换为 HTML。由于换行符等不是有效的 HTML，因此它们被简单地删除了。

如果您的内容中有换行符，您可以将它们转换为某种有效的 HTML。

当您从 TinyMCE 中提取内容时，您可以选择获取纯文本，它会将段落（ 标签）转换为 2 个换行符（），并将换行符（  标签）转换为一个换行符（） .您可以对文本文件执行相反的操作，以创建适当表示换行符的 HTML。

【讨论】：