Froala 所见即所得编辑器未在 React 中显示所有工具栏按钮答案

【问题标题】：Froala WYSIWYG editor not showing all the toolbar buttons in ReactFroala 所见即所得编辑器未在 React 中显示所有工具栏按钮
【发布时间】：2020-04-24 07:17:32
【问题描述】：

由 facebook/create-react-app 创建的 React 应用中没有显示工具栏按钮。

我尝试在 src/index.tsx 中或在使用组件之前导入 JS 和 CSS 文件。我还尝试导入单个插件。它们都不起作用。

// Froala Editor JS files.
import 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/js/plugins.pkgd.min.js';
// Froala Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/plugins.pkgd.min.css';
// Froala requires Font Awesome.
import 'font-awesome/css/font-awesome.css';

这就是我设置选项的方式。我什至尝试只设置对齐按钮，但它不起作用。

<FroalaEditor
  model={model}
  onModelChange={onModelChange}
  config={{
    key: FROALA_KEY,
    attribution: false,
    toolbarButtons: {
      moreText: {
        buttons: [
          'bold',
          'italic',
          'underline',
          'strikeThrough',
          'subscript',
          'superscript',
          'fontFamily',
          'fontSize',
          'textColor',
          'backgroundColor',
          'inlineClass',
          'inlineStyle',
          'clearFormatting',
        ],
        align: 'left',
        buttonsVisible: 3,
      },
      moreParagraph: {
        buttons: [
          'alignLeft',
          'alignCenter',
          'formatOLSimple',
          'alignRight',
          'alignJustify',
          'formatOL',
          'formatUL',
          'paragraphFormat',
          'paragraphStyle',
          'lineHeight',
          'outdent',
          'indent',
          'quote',
        ],
        align: 'left',
        buttonsVisible: 3,
      },
      moreRich: {
        buttons: [
          'insertLink',
          'insertImage',
          'insertVideo',
          'insertTable',
          'emoticons',
          'fontAwesome',
          'specialCharacters',
          'embedly',
          'insertFile',
          'insertHR',
        ],
        align: 'left',
        buttonsVisible: 3,
      },
      moreMisc: {
        buttons: [
          'undo',
          'redo',
          'fullscreen',
          'print',
          'getPDF',
          'spellChecker',
          'selectAll',
          'html',
          'help',
        ],
        align: 'right',
        buttonsVisible: 2,
      },
    },
    ...config,
  }}
/>

无论我如何设置选项，我都只能在 UI 上看到这些按钮。

【问题讨论】：

对我来说，我想这部分工作。但是我看不到插件中的所有按钮。例如全屏选项根本不起作用。使用与您相同的设置。
遇到同样的问题

标签： reactjs froala

【解决方案1】：

我刚刚发现了问题。您还必须在配置中的 pluginsEnabled 数组中传递插件。像这样：

pluginsEnabled: [
  'fullscreen',
  'codeBeautifier',
],

【讨论】：

只是添加，对于每个遇到问题中描述的相同问题的人，请确保您拥有import 'froala-editor/js/plugins.pkgd.min.js，因为没有它，任何插件都无法工作。