2020年Ben Long的TinyMCE内联编辑教程失效 QuickBars不显示如何解决

问题产生原因 #

• 最核心的问题是你没有在TinyMCE初始化配置中手动引入quickbars插件：QuickBars属于TinyMCE的可选功能插件，不会默认加载，缺失插件声明的情况下，所有quickbars_开头的配置都不会生效。
• 你提供的测试代码还存在DOM结构问题：#mydiv节点没有正确闭合，末尾写的是<div>而非</div>，部分浏览器的DOM解析异常也会影响编辑器初始化效果。

QuickBars配置放置位置 #

所有QuickBars相关的配置项（包括quickbars_selection_toolbar、quickbars_insert_toolbar等），直接和selector、inline等配置平级，放在tinymce.init()的入参对象内即可，额外新增plugins字段声明加载quickbars插件就能正常生效。

修正后的可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    tinymce.init({
      selector: "#mydiv",
      inline: true,
      // 新增插件声明
      plugins: 'quickbars',
      quickbars_selection_toolbar: "styleselect | bold italic forecolor | removeformat",
      quickbars_insert_toolbar: false,
      menubar: false,
      toolbar: false,
    });
  </script>
</head>
<body>
  <div id="mydiv" style="margin: 50px">
    <h1>Hello!</h1>
    <p>Are you interested in a pair of...</p>
  </div>
</body>
</html>

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