如何在reactjs的CKEditor5工具栏中添加下划线选项和对齐选项

Question

如何添加选项作为文本对齐&在reactjs中的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团队有过接触。他们把我送到他们的在线建设者那里：

我试过了，它看起来很简单，可以使用。有很多选择，所以你需要仔细考虑一下。

基本上，选择你的编辑器类型，添加插件，选择你的语言，构建和使用构建。

希望它能帮上忙

Answer 2

我知道这个问题已经回答了，但我想我可以补充一下我是如何解决这个问题的。

在安装react的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

这是角质的，如果有人找这个会很有帮助。

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

npm安装-保存ckeditor5 5-构建-经典-+

1. 包含在hmtl

中

1. 包含在ts文件中，您在其中使用编辑器(例如任何编辑器)

导入ClassicEditor从‘ckeditor5 5-构建-经典-+’；

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