如何使用TinyMCE getContent() API获取完整内容并实现PDF全预览

我有一个使用TinyMCE的表单，希望通过getContent() API方法获取编辑器内容并在PDF页面预览，已编写如下TinyMCE初始化及预览触发代码：

TinyMCE初始化代码 #

<script nonce="{{ csp_nonce() }}">
    var options = {
        selector: "#body_sp3d",
        menubar: 'file edit view insert format tools table help',
        plugins: [
            "advlist autolink autosave lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime nonbreaking save table directionality",
            "template paste textpattern"
        ],
        toolbar: "fullscreen restoredraft insertfile undo redo toc | styleselect fontselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify codesample | bullist numlist outdent indent toc",
    };
    tinymce.init(options);
</script>

预览触发代码 #

<script>
    $(document).ready(function() {
        $('#previewSp3d').on('click', function() {
            //get content from tinyMCE editor and set to #content_sp3d
            var body_sp3d        = tinymce.get('body_sp3d').getContent();
            var no_sp3d          = $('#no_sp3d').val();
            var penerima_sp3d    = $('#penerima_sp3d').val();
            var klasifikasi_sp3d = $('#klasifikasi_sp3d').val();
            var url              = "{{ route('preview.sp3d')}}";
            var full_url         = url + '?no_sp3d=' + no_sp3d + '&penerima_sp3d=' + penerima_sp3d + '&body_sp3d=' + body_sp3d + '&klasifikasi_sp3d=' + klasifikasi_sp3d;

            $('#previewSp3d').attr('href', full_url);
        });
    });
</script>

但目前仅能预览部分内容，无法在PDF页面显示所有表单内容，请问如何实现完整内容的PDF预览？

1. 改用POST请求传递富文本内容 #

当前用GET方式把TinyMCE的HTML内容拼在URL里，而URL存在长度限制（不同环境下一般在2KB-8KB之间），内容较长时会被截断，直接导致PDF只显示部分内容。建议改成POST请求传递数据：

$('#previewSp3d').on('click', function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    // 创建临时表单
    var form = $('<form>', {
        'method': 'POST',
        'action': "{{ route('preview.sp3d')}}"
    });
    // 添加Laravel必需的CSRF令牌
    form.append($('<input>', {
        'type': 'hidden',
        'name': '_token',
        'value': "{{ csrf_token() }}"
    }));
    // 逐一添加表单字段
    form.append($('<input>', {
        'type': 'hidden',
        'name': 'no_sp3d',
        'value': $('#no_sp3d').val()
    }));
    form.append($('<input>', {
        'type': 'hidden',
        'name': 'penerima_sp3d',
        'value': $('#penerima_sp3d').val()
    }));
    form.append($('<input>', {
        'type': 'hidden',
        'name': 'body_sp3d',
        'value': tinymce.get('body_sp3d').getContent()
    }));
    form.append($('<input>', {
        'type': 'hidden',
        'name': 'klasifikasi_sp3d',
        'value': $('#klasifikasi_sp3d').val()
    }));
    // 设置在新窗口打开预览
    form.attr('target', '_blank');
    $('body').append(form);
    form.submit();
    form.remove();
});

同时要确保后端的preview.sp3d路由已配置为支持POST请求，并且能正确接收POST参数。

2. 检查PDF渲染工具的兼容性 #

如果后端使用的PDF生成工具（如dompdf、wkhtmltopdf等）对HTML/CSS支持有限，也会导致部分内容无法渲染：

• 查看TinyMCE输出的HTML是否包含PDF工具不支持的标签或复杂CSS样式，比如某些HTML5标签、嵌套过深的结构
• 对TinyMCE的输出做预处理，将复杂样式转为内联样式，移除PDF工具不兼容的标签
• 确保PDF生成时加载了必要的字体，避免特殊字符或自定义字体无法显示

3. 验证TinyMCE内容获取的完整性 #

先确认getContent()确实拿到了完整内容：在触发预览前，把内容打印到控制台检查：

console.log(tinymce.get('body_sp3d').getContent());

如果控制台输出不完整，检查TinyMCE配置里的valid_elements或invalid_elements规则，是否限制了某些标签的输出，调整配置确保所有内容都能被正确获取。

4. 处理URL编码问题（仅作为临时方案） #

如果一定要用GET请求（不推荐），必须对所有参数做URL编码，避免特殊字符（如&、<、>）导致内容损坏：

var full_url = url + '?no_sp3d=' + encodeURIComponent(no_sp3d) + 
               '&penerima_sp3d=' + encodeURIComponent(penerima_sp3d) + 
               '&body_sp3d=' + encodeURIComponent(body_sp3d) + 
               '&klasifikasi_sp3d=' + encodeURIComponent(klasifikasi_sp3d);

但这种方式依然无法解决URL长度限制的问题，优先使用POST请求。

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