TinyMCE工具栏未显示

Question

Hey guys I have been on this for a few hours an im stumped. 嘿，我已经在这个问题上呆了几个小时了。 I set up a distract-free editor on my website, but cant get the toolbar to show up when I click on text. 我在网站上设置了无干扰的编辑器，但是单击文本时无法显示工具栏。

I appreciate any help, im not sure what it is that im doing wrong and have done extensive research trying to figure this out. 感谢您的帮助，我不确定自己做错了什么，并且已经进行了广泛的研究以找出问题所在。 So thank you for your time! 因此，感谢您的宝贵时间！

Here is my HTML: 这是我的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>

Here is my script placed in my header: 这是我的脚本放在标题中：

<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

I might be wrong, but I guess what you want to use is the "Inline Editor" instead of the "Distraction free" one? 我可能错了，但是我想您要使用的是“ Inline Editor”而不是“ Distraction free”吗？

Have a look at the official example: https://www.tiny.cloud/docs/demo/inline/ 看一下官方示例： https ： //www.tiny.cloud/docs/demo/inline/

EDIT: Your selectors are wrong. 编辑：您的选择器是错误的。 In JS you call for '.tinymce-heading' and '.tinymce-body'. 在JS中，您需要输入“ .tinymce-heading”和“ .tinymce-body”。 But in your HTML you named them '.dfree-header' and '.dfree-body'. 但是在您的HTML中，您将它们命名为“ .dfree-header”和“ .dfree-body”。

Change them to fit and after double-clicking your content your toolbar should show up. 更改它们以适合您的内容，然后双击您的内容，工具栏应会显示。

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