如何在 reactjs 的 CKEditor5 工具欄中添加下划線選項和 Alignment 選項

Question

如何在 reactjs 的 reactjs 中添加選項作為文本 Alignment 和 CKEditor 中的下划線，但沒有成功。 請幫我

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} />

Answer 1

使用 ClassicEditor 會刪除一些按鈕，例如“下划線、下標、上標”。 您將需要使用編輯器的自定義版本，而不是經典版本。

我已經與 CKEditor 團隊取得了聯系。 他們已將我發送給他們的在線構建器： https://ckeditor.com/ckeditor-5/online-builder/

我已經嘗試過了，它看起來很簡單好用。 有很多選項，所以你需要通過它 go 。

基本上，選擇你的編輯器類型，添加插件，選擇你的語言，構建和使用構建。

希望能幫助到你

Answer 2

我看到這個問題已經回答了，但我想我可以補充一下我是如何解決這個問題的。

在安裝 ckeditor 進行反應時，我使用了

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-decoupled-document

代替文檔中給出的示例

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

然后我按照文檔中所示的創建解耦編輯器的方法

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;

Answer 3

這是給 Angular 的，如果有人在找這個會很有幫助。

參考： https://github.com/ckeditor/ckeditor5-angular/issues/156 1)

npm install --save ckeditor5-build-classic-plus

2. 包含在 hmtl 中

<ckeditor (ready)="editorsReady($event)" [editor]="Editor" data="test" [config]="optionsNews">

3. 包含在您使用編輯器的 ts 文件中（例如任何編輯器組件）

從'ckeditor5-build-classic-plus'導入ClassicEditor；

public editorsReady(editor) {
         editor.ui.getEditableElement().parentElement.insertBefore(
         editor.ui.view.toolbar.element,
       editor.ui.getEditableElement() );
       }