Laravel8集成TinyMCE5提交表单无法获取完整HTML输出

你遇到这个问题核心是两点：

• 你虽然写了let innerText = tinyMCE.activeEditor.getContent({format : 'raw'});获取编辑器完整内容，但这个变量根本没被放进提交参数里。
• TinyMCE初始化后会隐藏原textarea，默认不会实时把编辑生成的完整HTML同步回原textarea，你直接调用$(this).serializeArray()拿到的只是textarea的初始值，或者是TinyMCE同步的纯文本内容，自然会丢失外层标签。

选任意一种方式修改即可：

方案1：提交前手动同步编辑器内容到表单 #

在序列化表单之前调用TinyMCE的triggerSave()方法，这个方法会自动把当前所有编辑器的内容写回对应的原生textarea，之后序列化表单就能拿到完整HTML：

$('form').on('submit', function (e) {
    e.preventDefault();
    // 加这一行就够
    tinymce.triggerSave();
    let route = $(this).data('route');
    let formData = $(this).serializeArray();

    $.ajax({
        url: route,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: "POST",
        data: formData,
        beforeSend: function () {
            $('body').css('cursor', 'progress');
        },
        complete: function () {
            $('body').css('cursor', 'default');
        },
        success: function (response) {
            // 你的业务逻辑
        },
    });
})

方案2：手动把获取到的编辑器内容追加到提交参数 #

如果你不想做全局同步，直接把你已经拿到的innerText变量塞进formData就行，注意要确保字段名和后端接收的一致：

$('form').on('submit', function (e) {
    e.preventDefault();
    let route = $(this).data('route');
    let innerText = tinyMCE.activeEditor.getContent({format : 'raw'});
    let formData = $(this).serializeArray();
    // 追加/覆盖innerText字段
    formData.push({name: 'innerText', value: innerText});

    // 后续ajax逻辑保持不变即可
    $.ajax({
        // 原有配置
    });
})

一劳永逸的配置 #

你可以在TinyMCE初始化时加个监听，每次内容变更就自动同步回textarea，之后不管是ajax提交还是普通表单提交，都不用额外写同步逻辑：

tinymce.init({
    selector: '#editor',
    plugins: [
        "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
        "help", "image", "insertdatetime", "link", "lists", "media",
        "preview", "searchreplace", "table", "visualblocks",
    ],
    toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    // 新增以下配置
    setup: function(editor) {
        editor.on('change keyup blur', function() {
            editor.save();
        });
    }
});

如果前端调整完后，后端存库时还是丢失HTML标签，检查三处：

• 接收参数时不要用strip_tags()等函数手动过滤内容
• 对应模型如果有修改器、$casts配置，确认没有对该字段做HTML清理
• 如果开启了Blade的默认转义，回显内容的时候要用{!! $content !!}而不是{{ $content }}，后者会把HTML标签转义成实体。

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