问题描述
在我的一个应用程序中，我将 ckeditor5 与 React 一起使用。标准版不支持某些功能。我使用这些功能进行了自定义构建。它完美无缺。上周需要将图片嵌入到编辑器中。虽然我有一个按钮来添加图像，我可以选择后面的文件，但它给出了没有上传插件的错误。然后我尝试将 Base64UploadAdapter 添加到我的 cutom 构建中，并在 npmjs 上发布了我的自定义构建的新版本。当我使用新版本时，我看不到编辑器。在那之后，我在互联网上搜索并找到了使用 CKEditor 的 custombuilder 的建议。我试过custombuilder，它给了我来源。我在 npmjs 上构建并发布了新包。我在我的项目中使用了这个新的。这是一样的。不存在编辑器。我不知道自定义构建操作有什么问题。
我的 ckeditor.js 文件：
/**
* @license copyright (c) 2014-2021,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 Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter.js';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock.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 HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline.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 IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock.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 ListStyle from '@ckeditor/ckeditor5-list/src/liststyle.js';
import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown.js';
import MathType from '@wiris/mathtype-ckeditor5';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import MediaEmbedToolbar from '@ckeditor/ckeditor5-media-embed/src/mediaembedtoolbar.js';
import Mention from '@ckeditor/ckeditor5-mention/src/mention.js';
import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak.js';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat.js';
import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters.js';
import SpecialCharactersArrows from '@ckeditor/ckeditor5-special-characters/src/specialcharactersarrows.js';
import SpecialCharactersCurrency from '@ckeditor/ckeditor5-special-characters/src/specialcharacterscurrency.js';
import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials.js';
import SpecialCharactersLatin from '@ckeditor/ckeditor5-special-characters/src/specialcharacterslatin.js';
import SpecialCharactersMathematical from '@ckeditor/ckeditor5-special-characters/src/specialcharactersmathematical.js';
import SpecialCharactersText from '@ckeditor/ckeditor5-special-characters/src/specialcharacterstext.js';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough.js';
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript.js';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript.js';
import Table from '@ckeditor/ckeditor5-table/src/table.js';
import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
import Tabletoolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline.js';
import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount.js';
class Editor extends ClassicEditor {}
// Plugins to include in the build.
Editor.builtinPlugins = [
Alignment,Autoformat,Base64UploadAdapter,BlockQuote,Bold,CodeBlock,Essentials,FontBackgroundColor,FontColor,FontFamily,FontSize,heading,Highlight,HorizontalLine,Image,ImageCaption,ImageInsert,ImageResize,ImageStyle,Imagetoolbar,ImageUpload,Indent,IndentBlock,Italic,Link,LinkImage,List,ListStyle,Markdown,MathType,MediaEmbed,MediaEmbedToolbar,Mention,PageBreak,Paragraph,PasteFromOffice,RemoveFormat,SpecialCharacters,SpecialCharactersArrows,SpecialCharactersCurrency,SpecialCharactersEssentials,SpecialCharactersLatin,SpecialCharactersMathematical,SpecialCharactersText,Strikethrough,Subscript,Superscript,Table,TableProperties,Tabletoolbar,TextTransformation,Underline,WordCount
];
export default Editor;
以前的版本看起来像：
新版本后的样子：
与方法没有区别，但现在不起作用。有什么帮助吗？
我的反应组件代码：
import React from 'react';
import { connect } from 'react-redux';
import CKEditor from '@ckeditor/ckeditor5-react';
import moment from 'moment';
import Header from './header';
import Sidebar from './sidebar';
import FindingList from './findingList';
import {Button,Input,Accordion,Icon,Form} from 'semantic-ui-react';
import { postSaveReportFields,fetchUserList,fetchGroupList,setReportEditactiveIndex,setReportFieldsList,clearauditProgramReportState,fetchProgramFindingList,postUpdateReportStatus
} from '../actions';
import ClassicEditor from '@sbilgil/ckeditor5-build-classic-with-alignment-upload';
.....
return (<CKEditor
editor={ ClassicEditor }
data={text}
onInit={ editor => {
// You can store the "editor" and use when it is needed.
console.log( 'Editor is ready to use!',editor );
} }
onChange={ ( event,editor ) => {
const data = editor.getData();
console.log( { event,editor,data,type } );
this.setReportFieldsList(type,data)
} }
onBlur={ editor => {
console.log( 'Blur.',editor );
} }
onFocus={ editor => {
console.log( 'Focus.',editor );
} }
/>)
解决方法
您应该手动定义配置 config={editorConfiguration} 并定义自定义工具栏，因为它无法在 CKEditor5 生成的构建中正确显示默认工具栏。
const editorConfiguration = {
toolbar: {
items: [
'heading','|','bold','italic','underline','strikethrough','subscript','superscript','bulletedList','numberedList','todoList','alignment','outdent','indent',]
}
};
return (<CKEditor
editor={ ClassicEditor }
data={text}
config={editorConfiguration}
onInit={ editor => {
// You can store the "editor" and use when it is needed.
console.log( 'Editor is ready to use!',editor );
} }
onChange={ ( event,editor ) => {
const data = editor.getData();
console.log( { event,editor,data,type } );
this.setReportFieldsList(type,data)
} }
onBlur={ editor => {
console.log( 'Blur.',editor );
} }
onFocus={ editor => {
console.log( 'Focus.',editor );
} }
/>)
我找到了解决方案。问题在于 npm 打包系统或 CKEditor 包。因为对于 Base64ImageUpload，我必须安装 ckeditor-upload。当我安装它时，它会在自身下创建 nodemodules 目录，在该目录中有一些 cekeditor 包，如 ckeditor-ui 等。当我在项目中构建和使用它时，出现了类似重复包的错误......在我意识到这一点后，我回去了在我的 ckeditor 构建中，我删除了 ckeditor-upload 下的 node_modules 目录，然后构建并发布它，然后使用它。它奏效了。我不知道为什么之前它没有真正起作用。