TinyMCE工具栏未显示

Question

嘿，我已经在这个问题上呆了几个小时了。 我在网站上设置了无干扰的编辑器，但是单击文本时无法显示工具栏。

感谢您的帮助，我不确定自己做错了什么，并且已经进行了广泛的研究以找出问题所在。 因此，感谢您的宝贵时间！

这是我的HTML：

<form method="post">
<div class='demo-dfree'>
  <h2 class="dfree-header mce-content-body" contenteditable="true" style="position: relative;" spellcheck="false">
    Header
  </h2>
  <br/>
  <div class="dfree-body mce-content-body" contenteditable="true" style="position: relative;" spellcheck="false">
    <p>
     Body
    </p>
  </div>
</div>
</form>

这是我的脚本放在标题中：

<script src="https://cdn.tiny.cloud/1/79eqkg3mxj7h6alrcmz1yxjsp6fxm1qhdvkrrfy9uxdxwjrf/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>tinymce.init({selector:'textarea'});</script>

  <script >
var dfreeHeaderConfig = {
  selector: '.dfree-header',
  menubar: false,
  inline: true,
  toolbar: false,
  plugins: [ 'quickbars' ],
  quickbars_insert_toolbar: 'undo redo',
  quickbars_selection_toolbar: 'italic underline'
};

var dfreeBodyConfig = {
  selector: '.dfree-body',
  menubar: false,
  inline: true,
  plugins: [
    'autolink',
    'codesample',
    'link',
    'lists',
    'media',
    'powerpaste',
    'table',
    'image',
    'quickbars'
  ],
  toolbar: false,
  quickbars_insert_toolbar: 'quicktable image',
  quickbars_selection_toolbar: 'bold italic | h2 h3 | blockquote quicklink',
  contextmenu: 'inserttable | cell row column deletetable',
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean'
};

tinymce.init(dfreeHeaderConfig);
tinymce.init(dfreeBodyConfig);
  </script>

Answer 1

我可能错了，但是我想您要使用的是“ Inline Editor”而不是“ Distraction free”吗？

看一下官方示例： https ： //www.tiny.cloud/docs/demo/inline/

编辑：您的选择器是错误的。 在JS中，您需要输入“ .tinymce-heading”和“ .tinymce-body”。 但是在您的HTML中，您将它们命名为“ .dfree-header”和“ .dfree-body”。

更改它们以适合您的内容，然后双击您的内容，工具栏应会显示。

Answer 2

事实证明，我的脚本需要在其页面的顶部具有<!DOCTYPE html> ，一切都可以正常工作。

TinyMCE工具栏未显示

问题描述

2 个解决方案

解决方案1
0 2019-09-16 09:23:17

解决方案2
0 2019-09-17 00:27:31

TinyMCE工具栏未显示

问题描述

2 个解决方案

解决方案1 0 2019-09-16 09:23:17

解决方案2 0 2019-09-17 00:27:31

解决方案1
0 2019-09-16 09:23:17

解决方案2
0 2019-09-17 00:27:31