strapiのrich textをckeditorに変更する

はじめに

• 下記のブログを参考に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バージョンにする方法を見つけることが出来なかった。下記の人も探していたが答えが見つからず。

stackoverflow.com

• 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を反映することが出来ました。