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

user_2700673 0
Viewed 703

I've got the basic CKeditor5 installed -- but I am unable to add some toolbars to the plugin.

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

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

'subscript', 'superscript' are not showing up? I think its part of the basic styles feature -but do I need to include it here? replace the type of editor it is? Why isn't this working?

  <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 );
    }}
  />
reactjs ckeditor
1 Answers

The classic build 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 instead of the classic build

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

this is the fork of the sandbox with the changes https://codesandbox.io/s/ckeditor-subscript-lnnxv?file=/src/_SharedFormComponents/renderRichTextField.js

Regarding switching the view between the rich editor and HTML code, as for today is still a WIP to implement in CKEditor5 https://github.com/ckeditor/ckeditor5/issues/592

UPDATE

To toggle the view to HTML you can use a boolean state to conditional show the CKEditor or a textarea

    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>
        )}
...
user_18680080
Related