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} />
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
I see the question is already answered, but I thought I could add how I solved this.
While installing the ckeditor for react I used
npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-decoupled-document
in place of the example given in the docs
npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
and then I followed the method of creating a decoupled editor as shown in the docs
import { CKEditor } from '@ckeditor/ckeditor5-react';
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
class App extends Component {
editor = null;
render() {
return (
<div className="App">
<h2>CKEditor 5 using a custom build - decoupled editor</h2>
<CKEditor
onReady={ editor => {
console.log( 'Editor is ready to use!', editor );
editor.ui.getEditableElement().parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
);
this.editor = editor;
} }
onError={ ( { willEditorRestart } ) => {
// This is why you need to remove the older toolbar.
if ( willEditorRestart ) {
this.editor.ui.view.toolbar.element.remove();
}
} }
onChange={ ( event, editor ) => console.log( { event, editor } ) }
editor={ DecoupledEditor }
data="<p>Hello from CKEditor 5's decoupled editor!</p>"
config={ /* the editor configuration */ }
/>
);
}
}
export default App;
This is for Angular, would be helpful if anyone looking for this.
Reference: https://github.com/ckeditor/ckeditor5-angular/issues/156 1)
npm install --save ckeditor5-build-classic-plus
<ckeditor (ready)="editorsReady($event)" [editor]="Editor" data="test" [config]="optionsNews">
import ClassicEditor from 'ckeditor5-build-classic-plus';
public editorsReady(editor) {
editor.ui.getEditableElement().parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement() );
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.