TinyMCE「naked」皮肤未按预期生效问题求助

问题描述 #

我按照TinyMCE官方文档配置使用「naked」皮肤，但编辑器未应用该皮肤样式，仍显示默认外观，工具栏、插件等其他功能均正常工作。相关代码及效果如下：

<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
    <script src="https://cdn.tiny.cloud/1/[myapikey]/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
    <style>
        .custom-editor-wrapper {
            border: 1px solid #ccc;
            padding: 4px;
            margin: 1rem;
            max-width: 640px;
            border-radius: 4px;
            box-shadow: 0 3px 0px -1px rgba(0, 0, 0, .05);
        }
    </style>
</head>
<body>
    <div class="custom-editor-wrapper">
        <textarea id="premiumskinsandicons-naked"></textarea>
    </div>
    <script type="text/javascript">
        tinymce.init({
            selector: 'textarea#premiumskinsandicons-naked',
            skin: 'naked',
            icons: 'small',
            toolbar_location: 'bottom',
            plugins: 'lists code table codesample link',
            toolbar: 'blocks | bold italic underline strikethrough bullist link codesample',
            menubar: false,
            statusbar: false
        });
    </script>
</body>
</html>

预期效果：

实际效果：

问题原因 #

「naked」是TinyMCE的高级付费皮肤，仅对拥有Professional或Enterprise等高级订阅的用户开放。如果你的API密钥对应的是免费版或基础订阅，编辑器会自动忽略skin: 'naked'配置，回退到默认皮肤。

解决方法 #

1. 确认订阅权限：登录TinyMCE控制台查看你的订阅等级，确认是否包含高级皮肤使用权。若符合要求，检查API密钥是否正确配置，确保CDN链接中的密钥无误。

2. 免费版替代方案：若使用免费版，可通过自定义CSS模拟「naked」皮肤的简洁效果，添加以下样式到页面的<style>标签中：

/* 移除编辑器主体边框和背景 */
.tox-tinymce {
    border: none !important;
    background-color: transparent !important;
}

/* 简化工具栏样式 */
.tox-toolbar {
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* 调整工具栏按钮样式 */
.tox-button {
    background-color: transparent !important;
    border: none !important;
    color: inherit !important;
}

.tox-button:hover {
    background-color: rgba(0,0,0,.05) !important;
    border-radius: 4px;
}

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