Laravel中TinyMCE搭配Prism代码高亮时代码合并为一行的问题求助

针对你遇到的pre标签内代码被合并为一行的问题，给你几个可行的解决方案：

1. 调整TinyMCE配置，强制保留换行 #

修改你的TinyMCE初始化代码，添加以下配置项，确保编辑器不会自动移除pre标签内的换行：

tinymce.init({
    selector: '#content',
    height: 500,
    plugins: 'codesample code',
    codesample_languages: [
        {text: 'HTML/XML', value: 'markup'},
        {text: 'JavaScript', value: 'javascript'},
        {text: 'CSS', value: 'css'},
        {text: 'PHP', value: 'php'},
        {text: 'Ruby', value: 'ruby'},
        {text: 'Python', value: 'python'},
        {text: 'Java', value: 'java'},
        {text: 'C', value: 'c'},
        {text: 'C#', value: 'csharp'},
        {text: 'C++', value: 'cpp'}
    ],
    toolbar: 'codesample code',
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
    // 添加以下配置
    preserve_newlines: true,
    remove_linebreaks: false,
    entity_encoding: 'raw',
    formats: {
        pre: { block: 'pre', preserve_newlines: true }
    }
});

这些配置的作用：

• preserve_newlines: 保留编辑器中的换行符
• remove_linebreaks: 禁止自动移除换行
• entity_encoding: 'raw': 避免将换行转义为实体字符
• formats 配置：明确指定pre标签保留换行

2. 检查数据库存储的内容 #

先查看Laravel数据库中posts表的content字段，确认pre标签内的代码是否原本就没有换行：

• 如果数据库里的代码已经是一行，说明TinyMCE在提交时丢失了换行，优先用方案一解决
• 如果数据库里有换行但渲染后消失，检查CSS样式：给pre标签添加white-space: pre或pre-wrap样式，确保浏览器正确解析换行：

pre {
    white-space: pre; /* 保留原始换行和空格 */
    /* 或者用 pre-wrap: 自动换行，同时保留原始换行 */
    /* white-space: pre-wrap; */
}

3. 排除Laravel的内容过滤 #

确保你的Post模型没有在保存/获取内容时做额外的过滤处理，比如不要在模型的setContentAttribute方法中使用strip_tags或类似函数，避免意外移除换行。

4. 验证Prism.js的渲染 #

虽然你说高亮正常，但可以确认Prism的初始化代码是否正确执行，确保它没有修改pre内的文本结构：

// 页面加载完成后执行高亮
document.addEventListener('DOMContentLoaded', function() {
    Prism.highlightAll();
});

内容的提问来源于stack exchange，提问作者Mohammad Salim Hosen