CKEditor5 react和ClassicEditor的自定义构建不再起作用
CKEditor5 react和ClassicEditor的自定义构建不再起作用
提问于 2021-04-16 22:29:16
在我的一个应用程序中，我使用了CKEditor5和React。标准版不支持某些功能。我用这些功能定制了一个构建。它工作得很完美。上周，需要将图片嵌入到编辑器中。虽然我有一个添加图像的按钮，并且我可以选择后面的文件，但它给出了一个错误，没有上传插件。然后，我尝试将Base64UploadAdapter添加到我的自定义构建中，并在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;以前的版本如下所示：
在新版本之后，它看起来：
这种方法没有区别，但现在它不起作用了。有什么帮助吗？
我的react组件代码：
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 );
} }
/>)回答 2
Stack Overflow用户
发布于 2021-04-23 19:07:35
您应该手动定义配置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 );
} }
/>)Stack Overflow用户
发布于 2021-04-26 20:35:54
我找到了解决方案。问题出在npm包装系统或CKEditor包上。因为对于Base64ImageUpload，我必须安装ckeditor-upload。当我安装它时，它会在它自己下面创建nodemodules目录，在这个目录下有一些cekeditor包，比如ckeditor-ui等等。当我在项目中构建和使用它时，出现了一个错误，比如重复包……在我意识到这一点后，我返回到我的ckeditor构建，我删除了ckeditor下的node_modules目录-上传并构建它，然后发布它，然后使用它。而且它起作用了。我不知道为什么以前它不能真正工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67127114
复制相关文章
相似问题
腾讯云开发者
