我正在尝试使用一个自定义构建的CKEditor 5。这个编辑器基于BalloonBlockEditor
。
在这里您可以看到自定义构建输出:
/**
* @license Copyright (c) 2014-2023, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
import BalloonBlockEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor.js';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage.js';
import AutoLink from '@ckeditor/ckeditor5-link/src/autolink.js';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
import BlockToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/block/blocktoolbar.js';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';
import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport.js';
import Heading from '@ckeditor/ckeditor5-heading/src/heading.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 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 ListProperties from '@ckeditor/ckeditor5-list/src/listproperties.js';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import MediaEmbedToolbar from '@ckeditor/ckeditor5-media-embed/src/mediaembedtoolbar.js';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough.js';
import Style from '@ckeditor/ckeditor5-style/src/style.js';
import Table from '@ckeditor/ckeditor5-table/src/table.js';
import TableCaption from '@ckeditor/ckeditor5-table/src/tablecaption.js';
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
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';
class Editor extends BalloonBlockEditor {}
// Plugins to include in the build.
Editor.builtinPlugins = [
Alignment,
Autoformat,
AutoImage,
AutoLink,
BlockQuote,
BlockToolbar,
Bold,
CKFinderUploadAdapter,
Essentials,
FontFamily,
FontSize,
GeneralHtmlSupport,
Heading,
HorizontalLine,
Image,
ImageCaption,
ImageInsert,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
Italic,
Link,
LinkImage,
List,
ListProperties,
MediaEmbed,
MediaEmbedToolbar,
Paragraph,
PasteFromOffice,
Strikethrough,
Style,
Table,
TableCaption,
TableCellProperties,
TableToolbar,
TextTransformation,
Underline
];
// Editor configuration.
Editor.defaultConfig = {
toolbar: {
items: [
'heading',
'|',
'alignment',
'fontFamily',
'fontSize',
'|',
'bold',
'italic',
'underline',
'link',
'|',
'indent',
'outdent'
]
},
language: 'tr',
blockToolbar: [
'imageUpload',
'blockQuote',
'insertTable',
'bulletedList',
'numberedList'
],
image: {
toolbar: [
'imageTextAlternative',
'toggleImageCaption',
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'linkImage'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties'
]
}
};
export default Editor;
甚至设置占位符config似乎也不起作用。下面是react组件:
import CustomEditorSetup from "ckeditor5-custom-build/build/ckeditor";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import React, { useEffect } from "react";
const CustomEditor = ({
content,
onChange,
}: {
content?: string;
onChange: (data: string) => void;
}) => {
const config = {
title: {
placeholder: "Type the title here!",
},
placeHolder: "Type the content here!",
};
return (
<CKEditor
config={config}
editor={CustomEditorSetup}
data={content || ""}
onChange={(event: any, editor: any) => {
const data = editor.getData();
onChange(data);
}}
onReady={(editor: any) => {
editor.editing.view.focus();
}}
/>
);
};
export default CustomEditor;
下面是一个输出:
1条答案
按热度按时间0yg35tkg1#
所以基本上,
第一个问题是错误的配置名称。它应该是
placeholder
而不是placeHolder
。另一个问题是编辑器版本中缺少
Title
插件。它可以通过online builder更新,因为它是一个自定义构建。