我正在尝试在我的React strapi
应用中自定义@ckeditor
。
这是我的package.json
:
"@ckeditor/ckeditor5-basic-styles": "^16.0.0","@ckeditor/ckeditor5-block-quote": "^16.0.0","@ckeditor/ckeditor5-editor-classic": "^16.0.0","@ckeditor/ckeditor5-essentials": "^16.0.0","@ckeditor/ckeditor5-link": "^16.0.0","@ckeditor/ckeditor5-list": "github:ckeditor/ckeditor5-list","@ckeditor/ckeditor5-react": "^2.0.0","@ckeditor/ckeditor5-ui": "^16.0.0",
这是我的WYSIWYG
编辑器:
import React from 'react';
import PropTypes from 'prop-types';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import styled from 'styled-components';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
ClassicEditor.builtinPlugins = [
Essentials,Bold,Italic,BlockQuote,Paragraph,List,Underline,Strikethrough,Subscript,Superscript,Link,Code
];
// Editor configuration.
ClassicEditor.defaultConfig = {
toolbar: {
items: [
'Underline','Strikethrough','Code','Subscript','Superscript','link','bulletedList','numberedList'
]
},language: 'en'
};
const Wrapper = styled.div`
.ck-editor__main {
min-height: 200px;
> div {
min-height: 200px;
}
}
`;
const Editor = ({ onChange,name,value }) => {
return (
<Wrapper>
<CKEditor
editor={ClassicEditor}
data={value}
onChange={(event,editor) => {
const data = editor.getData();
onChange({ target: { name,value: data } });
}}
/>
</Wrapper>
);
};
export default Editor;
当我尝试strapi build
时,出现以下错误:
Error: Module not found: Error: Can't resolve './@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css' in '/Users/xx/Documents/xx/01. Code/Franklin-ford/franklin-ford-cms/ford-cms/node_modules/@ckeditor/ckeditor5-link/theme'
注意:当我转到node_modules/@ckeditor/ckeditor5-link/theme
时,看不到所需的/mixins/_rwd.css
感谢您的帮助