TinyMCE加载数据库存储的格式化代码出现标签丢失问题如何解决？

API 探路者

2026-10-1

问题原因

你遇到的问题由两个独立错误共同导致：

第一是textarea的内容渲染方式完全错误，这是出现标签截断、多余右箭头符号的核心原因
第二是TinyMCE默认的内容过滤规则会清理未被允许的标签和属性，导致span标签被剥离

修复步骤

步骤1：修正textarea的内容渲染逻辑

textarea标签本身没有value属性，其内容需要直接写在开闭标签之间，且需要对HTML内容做实体转义避免标签提前闭合，修改后的代码如下：

<textarea name="notes"><?= htmlspecialchars($results[0]['notes']) ?></textarea>

步骤2：调整TinyMCE初始化配置，保留需要的格式

在原有配置中新增3项配置，明确允许编辑器保留span标签和对应的样式属性，修改后的完整配置如下：

<script>
    tinymce.init({
        forced_root_block : false,
        selector: "textarea",
        menubar: false,
        plugins: "link code lists",
        toolbar: 'undo redo | styleselect | forecolor | bold italic | numlist bullist | alignleft aligncenter alignright alignjustify | outdent indent | link | code',
        // 新增配置开始
        extended_valid_elements: 'span[style|class]', // 允许span标签保留style、class属性
        valid_styles: {
            '*': 'color,font-size,font-weight,font-style,text-decoration' // 允许的内联样式属性，可按需扩展
        },
        verify_html: true, // 保持HTML校验，基于上面的规则放行需要的内容
        // 新增配置结束
        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            });
        }
    });
</script>