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 个答案: