Search code examples
reactjsckeditortext-alignmentunderline

How Can I add underline option & Alignment option in toolbar of CKEditor5 in reactjs

How can I add options as Text Alignment & Underline in CKEditor in reactjs, I tried but did not get success. Please help me

text-editor.js

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

const TextEditor = ({handleChildClick}) => {
    return (
        <div className="container">
            <CKEditor
                editor={ ClassicEditor }
                onChange={ ( event, editor ) => {
                    const data = editor.getData();
                    handleChildClick(data)
                } }
            />
            <style>
                {`
                .ck-content { height: 150px; }
                `}
            </style>
        </div>
    );
}; 
export default TextEditor

Parent.js

<TextEditor handleChildClick={getDataFromTextEditor} />

for reference

Solution

  • Using the ClassicEditor removes some buttons like the "Underline, Subscript, Superscript". You will need to use a Customized version of the editor and not the Classic version.

    I've come in contact with CKEditor team. They have sent me to their online builder : https://ckeditor.com/ckeditor-5/online-builder/

    I've tried it and it looks simple enough to use. There are a lot of options so you'll need to go through it.

    Basically, pick your Editor type, add plugins, choose your language, build and use the build.

    Hope it helps