Creating a new Field in the administration panel

In this guide we will see how you can create a new Field for your administration panel.

Introduction

For this example, we will see how to change the WYSIWYG with CKEditorRegistering a new field in the admin panel - 图1 (opens new window) in the Content Manager plugin by creating a new plugin which will add a new Field in your application.

Setup

  1. Create a new project:
  1. # Create an application using SQLite and prevent the server from starting automatically as we will create a plugin
  2. # right after the project generation
  3. yarn create strapi-app my-app --quickstart --no-run
  1. # Create an application using SQLite and prevent the server from starting automatically as we will create a plugin
  2. # right after the project generation
  3. npx create-strapi-app my-app --quickstart --no-run
  1. Generate a plugin:
  1. cd my-app
  2. yarn strapi generate:plugin wysiwyg
  1. cd my-app
  2. npm run strapi generate:plugin wysiwyg
  1. cd my-app
  2. strapi generate:plugin wysiwyg
  1. Install the needed dependencies:
  1. cd plugins/wysiwyg
  2. yarn add @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
  1. cd plugins/wysiwyg
  2. npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
  1. Start your application with the front-end development mode:
  1. # Go back to to strapi root folder
  2. cd ../..
  3. yarn develop --watch-admin
  1. # Go back to to strapi root folder
  2. cd ../..
  3. npm run develop -- --watch-admin
  1. # Go back to to strapi root folder
  2. cd ../..
  3. strapi develop --watch-admin

Once this step is over all we need to do is to create our new WYSIWYG which will replace the default one in the Content Manager plugin.

Creating the WYSIWYG

In this part we will create three components:

  • MediaLib which will be used to insert media in the editor
  • Wysiwyg which will wrap the CKEditor with a label and the errors
  • CKEditor which will be the implementation of the new WYSIWYG

Creating the MediaLib

Path — ./plugins/wysiwyg/admin/src/components/MediaLib/index.js

  1. import React, { useEffect, useState } from 'react';
  2. import { useStrapi, prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin';
  3. import PropTypes from 'prop-types';
  5. const MediaLib = ({ isOpen, onChange, onToggle }) => {
  6.   const {
  7.     strapi: {
  8.       componentApi: { getComponent },
  9.     },
  10.   } = useStrapi();
  11.   const [data, setData] = useState(null);
  12.   const [isDisplayed, setIsDisplayed] = useState(false);
  14.   useEffect(() => {
  15.     if (isOpen) {
  16.       setIsDisplayed(true);
  17.     }
  18.   }, [isOpen]);
  20.   const Component = getComponent('media-library').Component;
  22.   const handleInputChange = data => {
  23.     if (data) {
  24.       const { url } = data;
  26.       setData({ ...data, url: prefixFileUrlWithBackendUrl(url) });
  27.     }
  28.   };
  30.   const handleClosed = () => {
  31.     if (data) {
  32.       onChange(data);
  33.     }
  35.     setData(null);
  36.     setIsDisplayed(false);
  37.   };
  39.   if (Component && isDisplayed) {
  40.     return (
  41.       <Component
  42.         allowedTypes={['images', 'videos', 'files']}
  43.         isOpen={isOpen}
  44.         multiple={false}
  45.         noNavigation
  46.         onClosed={handleClosed}
  47.         onInputMediaChange={handleInputChange}
  48.         onToggle={onToggle}
  49.       />
  50.     );
  51.   }
  53.   return null;
  54. };
  56. MediaLib.defaultProps = {
  57.   isOpen: false,
  58.   onChange: () => {},
  59.   onToggle: () => {},
  60. };
  62. MediaLib.propTypes = {
  63.   isOpen: PropTypes.bool,
  64.   onChange: PropTypes.func,
  65.   onToggle: PropTypes.func,
  66. };
  68. export default MediaLib;

Creating the WYSIWYG Wrapper

Path — ./plugins/wysiwyg/admin/src/components/Wysiwyg/index.js

  1. import React, { useState } from 'react';
  2. import PropTypes from 'prop-types';
  3. import { isEmpty } from 'lodash';
  4. import { Button } from '@buffetjs/core';
  5. import { Label, InputDescription, InputErrors } from 'strapi-helper-plugin';
  6. import Editor from '../CKEditor';
  7. import MediaLib from '../MediaLib';
  9. const Wysiwyg = ({
  10.   inputDescription,
  11.   errors,
  12.   label,
  13.   name,
  14.   noErrorsDescription,
  15.   onChange,
  16.   value,
  17. }) => {
  18.   const [isOpen, setIsOpen] = useState(false);
  19.   let spacer = !isEmpty(inputDescription) ? <div style={{ height: '.4rem' }} /> : <div />;
  21.   if (!noErrorsDescription && !isEmpty(errors)) {
  22.     spacer = <div />;
  23.   }
  25.   const handleChange = data => {
  26.     if (data.mime.includes('image')) {
  27.       const imgTag = `<p><img src="${data.url}" caption="${data.caption}" alt="${data.alternativeText}"></img></p>`;
  28.       const newValue = value ? `${value}${imgTag}` : imgTag;
  30.       onChange({ target: { name, value: newValue } });
  31.     }
  33.     // Handle videos and other type of files by adding some code
  34.   };
  36.   const handleToggle = () => setIsOpen(prev => !prev);
  38.   return (
  39.     <div
  40.       style={{
  41.         marginBottom: '1.6rem',
  42.         fontSize: '1.3rem',
  43.         fontFamily: 'Lato',
  44.       }}
  45.     >
  46.       <Label htmlFor={name} message={label} style={{ marginBottom: 10 }} />
  47.       <div>
  48.         <Button color="primary" onClick={handleToggle}>
  49.           MediaLib
  50.         </Button>
  51.       </div>
  52.       <Editor name={name} onChange={onChange} value={value} />
  53.       <InputDescription
  54.         message={inputDescription}
  55.         style={!isEmpty(inputDescription) ? { marginTop: '1.4rem' } : {}}
  56.       />
  57.       <InputErrors errors={(!noErrorsDescription && errors) || []} name={name} />
  58.       {spacer}
  59.       <MediaLib onToggle={handleToggle} isOpen={isOpen} onChange={handleChange} />
  60.     </div>
  61.   );
  62. };
  64. Wysiwyg.defaultProps = {
  65.   errors: [],
  66.   inputDescription: null,
  67.   label: '',
  68.   noErrorsDescription: false,
  69.   value: '',
  70. };
  72. Wysiwyg.propTypes = {
  73.   errors: PropTypes.array,
  74.   inputDescription: PropTypes.oneOfType([
  75.     PropTypes.string,
  76.     PropTypes.func,
  77.     PropTypes.shape({
  78.       id: PropTypes.string,
  79.       params: PropTypes.object,
  80.     }),
  81.   ]),
  82.   label: PropTypes.oneOfType([
  83.     PropTypes.string,
  84.     PropTypes.func,
  85.     PropTypes.shape({
  86.       id: PropTypes.string,
  87.       params: PropTypes.object,
  88.     }),
  89.   ]),
  90.   name: PropTypes.string.isRequired,
  91.   noErrorsDescription: PropTypes.bool,
  92.   onChange: PropTypes.func.isRequired,
  93.   value: PropTypes.string,
  94. };
  96. export default Wysiwyg;

Implementing CKEditor

Path — ./plugins/wysiwyg/admin/src/components/CKEditor/index.js

  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import { CKEditor } from '@ckeditor/ckeditor5-react';
  4. import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
  5. import styled from 'styled-components';
  7. const Wrapper = styled.div`
  8.   .ck-editor__main {
  9.     min-height: 200px;
  10.     > div {
  11.       min-height: 200px;
  12.     }
  13.   }
  14. `;
  16. const configuration = {
  17.   toolbar: [
  18.     'heading',
  19.     '|',
  20.     'bold',
  21.     'italic',
  22.     'link',
  23.     'bulletedList',
  24.     'numberedList',
  25.     '|',
  26.     'indent',
  27.     'outdent',
  28.     '|',
  29.     'blockQuote',
  30.     'insertTable',
  31.     'mediaEmbed',
  32.     'undo',
  33.     'redo',
  34.   ],
  35. };
  37. const Editor = ({ onChange, name, value }) => {
  38.   return (
  39.     <Wrapper>
  40.       <CKEditor
  41.         editor={ClassicEditor}
  42.         config={configuration}
  43.         data={value}
  44.         onChange={(event, editor) => {
  45.           const data = editor.getData();
  46.           onChange({ target: { name, value: data } });
  47.         }}
  48.       />
  49.     </Wrapper>
  50.   );
  51. };
  53. Editor.propTypes = {
  54.   onChange: PropTypes.func.isRequired,
  55.   name: PropTypes.string.isRequired,
  56.   value: PropTypes.string,
  57. };
  59. export default Editor;

At this point we have simply created a new plugin which is mounted in our project but our custom Field has not been registered yet.

Registering a our new Field

Since the goal of our plugin is to override the current WYSIWYG we don’t want it to be displayed in the administration panel but we need it to register our new Field. In order to do so, we will simply modify the front-end entry point of our plugin.

This file is already present. Please replace the content of this file wit the following:

Path — ./plugins/wysiwyg/admin/src/index.js

  1. import pluginPkg from '../../package.json';
  2. import Wysiwyg from './components/Wysiwyg';
  3. import pluginId from './pluginId';
  5. export default strapi => {
  6.   const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
  8.   const plugin = {
  9.     blockerComponent: null,
  10.     blockerComponentProps: {},
  11.     description: pluginDescription,
  12.     icon: pluginPkg.strapi.icon,
  13.     id: pluginId,
  14.     initializer: () => null,
  15.     injectedComponents: [],
  16.     isReady: true,
  17.     isRequired: pluginPkg.strapi.required || false,
  18.     mainComponent: null,
  19.     name: pluginPkg.strapi.name,
  20.     preventComponentRendering: false,
  21.     settings: null,
  22.     trads: {},
  23.   };
  25.   strapi.registerField({ type: 'wysiwyg', Component: Wysiwyg });
  27.   return strapi.registerPlugin(plugin);
  28. };

Finally you will have to rebuild strapi so the new plugin is loaded correctly

  1. yarn build
  1. npm run build
  1. strapi build

TIP

If the plugin still doesn’t show up, you should probably empty the .cache folder too.

And VOILA, if you create a new collectionType or a singleType with a richtext field you will see the implementation of CKEditorRegistering a new field in the admin panel - 图2 (opens new window) instead of the default WYSIWYG.