TinyMCE行内编辑器工具栏无法显示求助（附完整示例代码）

问题场景 #

使用自托管的TinyMCE 7.6.1搭建行内编辑器时，编辑器区域正常渲染，但工具栏始终无法显示。以下是完整可复现的测试代码（需自行修改TinyMCE资源文件路径）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TinyMCE Inline Editor Example</title>

    <!-- <<<< NOTE: SELF HOSTING, ADJUST TO TASTE. I'm using 7.6.1. >>>> -->
    <script src="/public/js/tinymce/js/tinymce/tinymce.min.js"></script> 
    <style>
        /* Style for the inline editor container */
        .editable {
            border: 1px solid #ccc;
            padding: 10px;
            min-height: 200px;
            background-color: #fdfdfd;
            border-radius: 4px;
        }

        /* Ensure the toolbar is visible */
        .tox-tinymce-inline {
            z-index: 10000 !important;
        }
    </style>
</head>
<body>
<h1>Simple TinyMCE Inline Editor</h1>

<!-- Inline editable container -->
<div id="editor" class="editable">This is an editable inline area. Start typing here...</div>

<!-- Form submission -->
<form id="editor-form">
    <button type="submit">Submit</button>
</form>

<script>
    // Check if TinyMCE is loaded
    if (typeof tinymce === 'undefined') {
        console.error('TinyMCE is not loaded. Check the script path.');
    } else {
        console.log('TinyMCE loaded successfully.');
    }

    // Initialize TinyMCE inline editor
    tinymce.init({
        selector: '#editor', // Target the inline editable element
        inline: true,
        menubar: false, // Disable the menu bar
        toolbar: 'bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | link', // Toolbar options
        plugins: ['link', 'lists'], // Required plugins for toolbar functionality
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }', // Styling for content
        license_key: 'gpl',
        setup: function (editor) {
            editor.on('init', function () {
                console.log('Editor initialized:', editor.id);
            });
        }
    });

    // Handle form submission
    document.getElementById('editor-form').addEventListener('submit', function (event) {
        event.preventDefault(); // Prevent form submission for debugging
        const content = tinymce.get('editor').getContent(); // Get content from the inline editor
        console.log('Editor Content:', content); // Log content for debugging
    });
</script>
</body>
</html>

排查与修复方案 #

• 确保自托管资源完整
  仅引入tinymce.min.js不足以加载工具栏，TinyMCE的UI组件依赖skins、themes等配套资源。检查自托管目录结构，需包含以下核心文件夹：

  tinymce/
  ├── tinymce.min.js
  ├── skins/       # 工具栏、编辑器样式文件
  ├── themes/      # 编辑器主题
  └── plugins/     # 已配置的插件文件
  

  缺失skins文件夹会直接导致工具栏样式加载失败，无法显示。

• 修正资源加载路径
  打开浏览器开发者工具（F12）→「网络」标签，刷新页面后检查是否有404错误的资源请求（如skins/ui/oxide/skin.min.css）。若存在路径错误，在tinymce.init中明确指定资源路径：

  tinymce.init({
    selector: '#editor',
    inline: true,
    // 新增资源路径配置
    skin_url: '/public/js/tinymce/js/tinymce/skins/ui/oxide',
    content_css: '/public/js/tinymce/js/tinymce/skins/content/default/content.min.css',
    // 其他原有配置...
  });
  

• 验证编辑器激活状态
  行内编辑器的工具栏默认仅在点击编辑区域激活后显示，页面加载时不会自动显示。先点击#editor容器进入编辑状态，再观察工具栏是否出现。若激活后仍不显示：

  • 移除自定义的.tox-tinymce-inline样式，避免z-index或其他属性干扰工具栏渲染
  • 检查页面其他CSS是否隐藏了.tox前缀的元素（TinyMCE工具栏使用该类名前缀）

• 确认插件与工具栏匹配
  当前配置中plugins: ['link', 'lists']与工具栏bullist numlist link按钮对应，这部分配置正确。后续添加新工具栏按钮时，需确保对应插件已引入，否则可能导致工具栏渲染异常。

• 版本兼容性测试
  若以上步骤无效，可临时替换为CDN版本测试，排除自托管资源的版本问题：

  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
  

  （注：CDN版本仅用于测试，正式环境请使用自托管并配置合法license_key）

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