はじめに
- 下記のブログを参考にckeditorに変更する strapi.io
CKeditorをインストールする
- 下記のコマンドを実行する
cd my-app yarn add @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
CKeditorには数種類のエディタの種類があるので、利用用途に合わせてエディタをインストールする Classic editor - CKEditor 5 Documentation
fullバージョンを利用したかったがckeditor5だとfullバージョンにする方法を見つけることが出来なかった。下記の人も探していたが答えが見つからず。
- fullバージョンを見つけたがckeditor4でかつインストールするとエラーが発生して動作せず。 www.npmjs.com
いったん諦める
実装方法
- ckeditorを反映するために必要なフォルダを作成する
cd my-app/extensions mkdir -p content-manager/admin/src/components/WysiwygWithErrors cd content-manager/admin/src
my-app/extensions/content-manager/admin/src/components/WysiwygWithErrors/index.js
ファイルを作成し下記のコードを貼り付ける
import React from 'react'; import PropTypes from 'prop-types'; import { isEmpty } from 'lodash'; import { Label, InputDescription, InputErrors } from 'strapi-helper-plugin'; import Editor from '../CKEditor'; const WysiwygWithErrors = ({ inputDescription, errors, label, name, noErrorsDescription, onChange, value, }) => { let spacer = !isEmpty(inputDescription) ? ( <div style={{ height: '.4rem' }} /> ) : ( <div /> ); if (!noErrorsDescription && !isEmpty(errors)) { spacer = <div />; } return ( <div className="col-12" style={{ marginBottom: '1.6rem', fontSize: '1.3rem', fontFamily: 'Lato', }} > <Label htmlFor={name} message={label} style={{ marginBottom: 10 }} /> <Editor name={name} onChange={onChange} value={value} /> <InputDescription message={inputDescription} style={!isEmpty(inputDescription) ? { marginTop: '1.4rem' } : {}} /> <InputErrors errors={(!noErrorsDescription && errors) || []} name={name} /> {spacer} </div> ); }; WysiwygWithErrors.defaultProps = { errors: [], label: '', noErrorsDescription: false, value: '', }; WysiwygWithErrors.propTypes = { errors: PropTypes.array, inputDescription: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, PropTypes.shape({ id: PropTypes.string, params: PropTypes.object, }), ]), label: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, PropTypes.shape({ id: PropTypes.string, params: PropTypes.object, }), ]), name: PropTypes.string.isRequired, noErrorsDescription: PropTypes.bool, onChange: PropTypes.func.isRequired, value: PropTypes.string, }; export default WysiwygWithErrors;
- 下記のパスにフォルダとファイルを作成する
cd my-app/extensions/content-manager/admin/src/components && mkdir CKEditor touch CKEditor/index.js
- 作成した
CKEditor/index.js
ファイルに下記のコードを貼り付ける
import React from 'react'; import PropTypes from 'prop-types'; import { CKEditor } from '@ckeditor/ckeditor5-react'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; import styled from 'styled-components'; 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> ); }; Editor.propTypes = { onChange: PropTypes.func.isRequired, name: PropTypes.string.isRequired, value: PropTypes.string, }; export default Editor;
buildしてサーバーを再起動する
- 下記のbuildコマンドを実行しないと修正が反映されません。
yarn build
実際の画面
- ckeditorを反映することが出来ました。