我在我的 React 项目中使用 Ckeditor 4 很长时间了,我对它没有任何问题。为了添加它提供的添加视频的插件(视频 Html5 标签),我不得不使用 Ckeditor 5 而不是 Ckeditor 4。所以我 根据这个文档一步一步地通过CKEditor 5 在线构建器构建了一个编辑器。这是我项目中 Ckeditor 的目录:
( ckeditor.js
ckeditor5/src/ckeditor.js) 文件是:
/**
* @license Copyright (c) 2014-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code.js';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';
import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight.js';
import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed.js';
import Image from '@ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert.js';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize.js';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js';
import Indent from '@ckeditor/ckeditor5-indent/src/indent.js';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '@ckeditor/ckeditor5-link/src/link.js';
import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage.js';
import List from '@ckeditor/ckeditor5-list/src/list.js';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table.js';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';
class Editor extends ClassicEditor {}
// Plugins to include in the build.
Editor.builtinPlugins = [
Alignment,
Autoformat,
BlockQuote,
Bold,
CKFinder,
CKFinderUploadAdapter,
Code,
Essentials,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
Heading,
Highlight,
HtmlEmbed,
Image,
ImageCaption,
ImageInsert,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
Italic,
Link,
LinkImage,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
Table,
TableToolbar,
TextTransformation
];
export default Editor;
我Editor
以这种方式使用了:
import React, { useState, FunctionComponent } from "react";
import Editor from "ckeditor5-custom-build/build/ckeditor";
import CKEditor from "@ckeditor/ckeditor5-react";
export interface CreateNewArticleProps {}
const CreateNewArticle: FunctionComponent<CreateNewArticleProps> = () => {
const [articleFormData, setArticleFormData] = useState({
articleBody: "",
});
const editorConfiguration = { toolbar: ["bold", "italic"] };
const ckeditorDataChangeHandler = (event) => {
setArticleFormData({
...articleFormData,
articleBody: event.editor.getData(),
});
};
return (
<CKEditor
editor={Editor}
config={editorConfiguration}
data={articleFormData.articleBody}
onChange={ckeditorDataChangeHandler}
/>
);
};
export default CreateNewArticle;
常量是 CKEditor 组件最简单的editorConfiguration
配置,但没有一个工具栏不起作用。
ckeditor.js
我需要(ckeditor5/src/ckeditor.js) 文件中存在的所有工具栏。请考虑我使用 Ckeditor5 的主要目标是受益于在文本中添加视频的能力。