使用PHP(Laravel)处理Monaco Editor换行并存入MySQL的最佳实践是什么

• PHP替换逻辑使用单引号包裹\n，最终存入数据库的是字面量的\n字符串，而非真正的换行符，回显时无法被Monaco Editor识别
• 直接用{!! $monacoValue !!}输出到JS反引号模板字符串中，若代码包含反引号、${、特殊标签字符会直接触发JS语法错误、标签损坏问题
• 隐藏textarea设置了white-space: pre-line，会自动合并换行、空白符，提交时拿到的内容本身已经被篡改

1. PHP后端代码修改 #

MySQL的text类型原生支持存储换行符，无需手动替换换行，仅需在回显时做JS兼容转义即可：

// 直接存储原始提交内容，不需要替换换行
$code = request()->custom_script;
$this->storeToMySQL($code);

// 回显给前端前用json_encode转义所有JS特殊字符，输出结果为合法JS字符串
$monacoValue = json_encode($code);

2. Blade模板代码修改 #

修改textarea的空白样式，保留原始换行和空白符：

<label for="">Custom Script</label>
<div class="monaco-editor-container" style="height: 250px; border: 1px solid rgb(238, 238, 238);"></div>
<textarea name="custom_script" id="monaco_editor_textarea" style="display: none; white-space: pre;"></textarea>

3. JS代码修改 #

不需要用模板字符串包裹输出变量，json_encode输出的结果本身就是合法的JS字符串字面量：

require(["vs/editor/editor.main"], function () {
    const monacoEditor = monaco.editor.create(document.querySelector('.monaco-editor-container'), {
        // 直接输出json_encode处理后的变量，无需额外加引号
        value: {!! $monacoValue !!},
        language: 'html',
        base: 'vs',
        fontSize: "14px",
        minimap: { enabled: false },
    });

    $('#monaco_editor_textarea').val(monacoEditor.getModel().getValue())

    monacoEditor.onKeyDown(debounce(e => {
        $('#monaco_editor_textarea').val(monacoEditor.getModel().getValue())
    }, 500))
});

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