Ckeditor5 React 插件创建不同的工具栏 - 显示 'subscript'、'superscript'

Question

我已经安装了基本的 CKeditor5 -- 但我无法向插件添加一些工具栏。

https://www.npmjs.com/package/ckeditor5

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

'subscript'、'superscript'都没有出现？我认为它是基本样式功能的一部分 - 但我需要在这里包含它吗？更换编辑器的类型是什么？为什么这不起作用？

  <CKEditor
    editor={ClassicEditor}
    config={{
      toolbar: {
          items: [
              'heading', '|',
              'fontfamily', 'fontsize', '|',
              'alignment', '|',
              'fontColor', 'fontBackgroundColor', '|',
              'bold', 'italic', 'strikethrough', 'underline', 'subscript', 'superscript', '|',
              'link', '|',
              'outdent', 'indent', '|',
              'bulletedList', 'numberedList', 'todoList', '|',
              'code', 'codeBlock', '|',
              'insertTable', '|',
              'uploadImage', 'blockQuote', '|',
              'undo', 'redo'
          ],
          shouldNotGroupWhenFull: true
      }
    }}          
    data={input.value}
    onReady={ editor => {
      // You can store the "editor" and use when it is needed.
      //console.log( 'Editor is ready to use!', editor );
    }}
    onChange={ ( event, editor ) => {
        const value = editor.getData();
        //console.log( { event, editor, value } );
        input.onChange(value);
        onHandle(input.name, value);
    }}
    onBlur={ ( event, editor ) => {
      //console.log( 'Blur.', editor );
    }}
    onFocus={ ( event, editor ) => {
      //console.log( 'Focus.', editor );
    }}
  />

Answer 1

经典构建does not include the plugins for subscript and superscript. You will need to create a custom build or look for one in npm. For instance, you could use this one https://www.npmjs.com/package/ckeditor5-build-classic-extended而不是经典构建

import ClassicExtended from "ckeditor5-build-classic-extended";
...
        <CKEditor
          editor={ClassicExtended}
          config={{
            toolbar: [
              "heading",
              "|",
              "bold",
              "italic",
              "link",
              "bulletedList",
              "subscript",
              "superscript"
            ]
          }}
          data={input.value}
...

这是沙盒的分支，其中包含更改 https://codesandbox.io/s/ckeditor-subscript-lnnxv?file=/src/_SharedFormComponents/renderRichTextField.js

关于在富编辑器和HTML代码之间切换视图，至于今天仍然是在CKEditor5中实现的WIP https://github.com/ckeditor/ckeditor5/issues/592

更新

要将视图切换到 HTML，您可以使用布尔状态来有条件地显示 CKEditor 或文本区域

    this.state = {
...
      editing: true
    };
...
    return (
      <>
        <button
          onClick={() =>
            this.setState((state) => ({ ...state, editing: !state.editing }))
          }
        >
          Toggle
        </button>
        {this.state.editing ? (
          <FormControl
            component="fieldset"

...

          </FormControl>
        ) : (
          <div>
            <textarea
              onChange={(e) => {
                input.onChange(e.target.value);
                onHandle(input.name, e.target.value);
              }}
            >
              {input.value}
            </textarea>
          </div>
        )}
...

Ckeditor5 React 插件创建不同的工具栏 - 显示 'subscript'、'superscript'

Ckeditor5 react plugin creating different toolbars - getting 'subscript', 'superscript' to showup

ckeditor

reactjs