Add ckeditor plugins

Questions and Answers Strapi Admin
3

Hi @msg

what you will need to do, is create, build and publish your own ckeditor. Ill explain how:

  1. Customize your own ckeditor with plugins of your chioce and download: CKEditor 5 Online Builder | Create your own editor in 5 steps

  2. Create a repo and commit the downloaded files

  3. adapt name and info in package.json

  4. build it

  5. publish to npm

  6. add it to strapi / plugins package.json "my-custom-ckeditor": "^0.0.1"

  7. follow the strapi created tutorial to replace the wysiwyg editor but do the following:

  8. in ./plugins/wysiwyg/admin/src/components/CKEditor/index.js import your published editor: import Editor from 'my-custom-ckeditor/build/ckeditor'

  9. create your toolbar config:

const configuration = {
    toolbar: [
        'heading',
        '|',
        'bold',
        'italic',
        'underline',
        'subscript',
        'superscript',
        'strikethrough',
        'horizontalLine',
        '|',
        'link',
        'bulletedList',
        'numberedList',
        '|',
        'alignment',
        'indent',
        'outdent',
        '|',
        // 'insertTable',
        'removeFormat',
        'specialCharacters',
        'undo',
        'redo',
    ],
    language: 'de',
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells',
        ],
    },
    licenseKey: '',
}
  1. Create and export your CustomEditor:
import React from 'react'
import PropTypes from 'prop-types'
import {CKEditor} from "@ckeditor/ckeditor5-react";
import styled from 'styled-components'
import Editor from 'my-custom-editor/build/ckeditor'

const CustomEditor = ({onChange, name, value}) => {
    return (
        <Wrapper>
            <CKEditor
                editor={Editor}
                config={configuration}
                data={value}
                onChange={(event, editor) => {
                    const data = editor.getData()
                    onChange({target: {name, value: data}})
                }}
            />
        </Wrapper>
    )
}

CustomEditor.propTypes = {
    onChange: PropTypes.func.isRequired,
    name: PropTypes.string.isRequired,
    value: PropTypes.string,
}

export default CustomEditor
  1. Use this CustomEditor in your wysiwyg plugin ./plugins/wysiwyg/admin/src/components/Wysiwyg/index.js:
import CustomEditor from '../CKEditor'
const Wysiwyg = ({
                   inputDescription,
                   errors,
                   label,
                   name,
                   noErrorsDescription,
                   onChange,
                   value,
                 }) => {
  return (
    <div
      style={{
        marginBottom: '1.6rem',
        fontSize: '1.3rem',
        fontFamily: 'Lato',
      }}
    >
      <Label htmlFor={name} message={label} style={{marginBottom: 10}}/>
      <CustomEditor name={name} onChange={onChange} value={value}/>
      <InputDescription
        message={inputDescription}
        style={!isEmpty(inputDescription) ? {marginTop: '1.4rem'} : {}}
      />
      <InputErrors errors={(!noErrorsDescription && errors) || []} name={name}/>
    </div>
  )
}

rebuild and redeploy

@DMehaffy maybe something like this could be added to the docs / tutorials? This is a very basic use case and will be relevant to almost everybody using ckeditor, since the “classic-react-ckeditor” doesnt even come with “underline” etc. So anyone who wants to use a proper RTE needs to build der own.

2 Likes