我正在尝试自定义 @ckeditor
在我的 react 中 strapi
应用程序。
这是我的 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
谢谢你的帮助
最佳答案
我也遇到过这个,_rwd.css
在 ckeditor5-ui
正如错误消息所指定的,但是因为 create-react-app 缺少一些 webpack 插件而没有被加载,所以你需要弹出应用程序并尝试像在 here 中那样集成它们.
This是我最终得到的,但在 react 方面有问题。
但是考虑到弹出和额外的构建时间,最好将它包含在一个预构建的模块中,例如 here .
更新:
我设法通过从预先构建的模块 here 创建一个本地 npm 模块来让它工作。然后使用 "my-ckeditor": "file: ]../../vendor/ckeditor"通过 package.json 作为包导入。该软件包是在 npm i install 期间使用预安装构建的。
关于reactjs - @ckeditor : Error: Module not found: Error: Can't resolve './@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59409838/