Hi @msg
what you will need to do, is create, build and publish your own ckeditor. Ill explain how:
-
Customize your own ckeditor with plugins of your chioce and download: CKEditor 5 Online Builder | Create your own editor in 5 steps
-
Create a repo and commit the downloaded files
-
adapt name and info in package.json
-
build it
-
publish to npm
-
add it to strapi / plugins package.json "my-custom-ckeditor": "^0.0.1"
-
follow the strapi created tutorial to replace the wysiwyg editor but do the following:
-
in ./plugins/wysiwyg/admin/src/components/CKEditor/index.js
import your published editor: import Editor from 'my-custom-ckeditor/build/ckeditor'
-
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: '',
}
- 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
- 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.