3

I'm starting a new project using Strapi v4. I would like to change the default WYSIWYG with TinyMCE (using Tiny cloud).

I have read and followed:

Issue right now:

TinyMCE is not visible when running strapi develop.

enter image description here

But, it was visible during testing using the command: strapi develop --watch-admin

enter image description here

After hours of trying things and reading the articles that I mentioned before more than once, I cannot get it to work with strapi develop or strapi start.

Here is my configuration:

config/plugins.js

module.exports = ({ env }) => ({
  'wysiwyg': {
    enabled: true,
    resolve: './src/plugins/wysiwyg'
  },
});

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

import React from 'react';
import {prefixFileUrlWithBackendUrl, useLibrary} from '@strapi/helper-plugin';
import PropTypes from 'prop-types';

const MediaLib = ({isOpen, onChange, onToggle}) => {
  const {components} = useLibrary();
  const MediaLibraryDialog = components['media-library'];

  const handleSelectAssets = (files) => {
    const formattedFiles = files.map((f) => ({
      alt: f.alternativeText || f.name,
      url: prefixFileUrlWithBackendUrl(f.url),
      mime: f.mime,
    }));

    onChange(formattedFiles);
  };

  if (!isOpen) {
    return null;
  }

  return (
    <MediaLibraryDialog
      onClose={onToggle}
      onSelectAssets={handleSelectAssets}
    />
  );
};

MediaLib.defaultProps = {
  isOpen: false,
  onChange: () => {
  },
  onToggle: () => {
  },
};

MediaLib.propTypes = {
  isOpen: PropTypes.bool,
  onChange: PropTypes.func,
  onToggle: PropTypes.func,
};

export default MediaLib;

src/plugins/wysiwyg/admin/src/components/Tinymce/index.js

import React, {useRef} from 'react';
import {Editor} from '@tinymce/tinymce-react';
import PropTypes from 'prop-types';

const TinyEditor = ({onChange, name, value, disabled}) => {
  const onChangeRef = useRef(onChange);

  function onBlur(ev, editor) {
    const content = editor.getContent();
    onChangeRef.current({target: {name, value: content, type: 'wysiwyg'}});
  }

  return (
    <>
      <Editor
        apiKey="abc123"
        disabled={disabled}
        onInit={(evt, editor) => editorRef.current = editor}
        onBlur={onBlur}
        initialValue={value}
        init={{
          selector: 'textarea',
          height: 400,
          menubar: false,
          plugins: ['lists'],
          toolbar: 'undo redo',
          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        }}
      />
    </>
  );
}

TinyEditor.defaultProps = {
  value: '',
  disabled: false,
};

TinyEditor.propTypes = {
  onChange: PropTypes.func.isRequired,
  name: PropTypes.string.isRequired,
  value: PropTypes.string,
  disabled: PropTypes.bool,
};

export default TinyEditor;

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

import React, {useState} from 'react';
import PropTypes from 'prop-types';
import {Stack} from '@strapi/design-system/Stack';
import {Box} from '@strapi/design-system/Box';
import {Button} from '@strapi/design-system/Button';
import {Typography} from '@strapi/design-system/Typography';
import Landscape from '@strapi/icons/Landscape';
import MediaLib from '../MediaLib';
import Tinymce from '../Tinymce';
import {useIntl} from 'react-intl';

const Wysiwyg = ({
                   name,
                   onChange,
                   value,
                   intlLabel,
                   disabled,
                   error,
                   description,
                   required,
                 }) => {
  const {formatMessage} = useIntl();
  const [mediaLibVisible, setMediaLibVisible] = useState(false);

  const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);

  const handleChangeAssets = (assets) => {
    let newValue = value ? value : '';

    assets.map((asset) => {
      if (asset.mime.includes('image')) {
        const imgTag = `<p><img src="${asset.url}" alt="${asset.alt}"></img></p>`;

        newValue = `${newValue}${imgTag}`;
      }

      // Handle videos and other type of files by adding some code
    });

    onChange({target: {name, value: newValue}});
    handleToggleMediaLib();
  };

  return (
    <>
      <Stack size={1}>

        <Box>
          <Typography variant="pi" fontWeight="bold">
            {formatMessage(intlLabel)}
          </Typography>
          {required && (
            <Typography variant="pi" fontWeight="bold" textColor="danger600">
              *
            </Typography>
          )}
        </Box>

        <Button
          startIcon={<Landscape/>}
          variant="secondary"
          fullWidth
          onClick={handleToggleMediaLib}
        >
          Media library
        </Button>

        <Tinymce
          disabled={disabled}
          name={name}
          onChange={onChange}
          value={value}
        />

        {error && (
          <Typography variant="pi" textColor="danger600">
            {formatMessage({id: error, defaultMessage: error})}
          </Typography>
        )}
        {description && (
          <Typography variant="pi">{formatMessage(description)}</Typography>
        )}

      </Stack>

      <MediaLib
        isOpen={mediaLibVisible}
        onChange={handleChangeAssets}
        onToggle={handleToggleMediaLib}
      />

    </>
  );
};

Wysiwyg.defaultProps = {
  description: '',
  disabled: false,
  error: undefined,
  intlLabel: '',
  required: false,
  value: '',
};

Wysiwyg.propTypes = {
  description: PropTypes.shape({
    id: PropTypes.string,
    defaultMessage: PropTypes.string,
  }),
  disabled: PropTypes.bool,
  error: PropTypes.string,
  intlLabel: PropTypes.shape({
    id: PropTypes.string,
    defaultMessage: PropTypes.string,
  }),
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  required: PropTypes.bool,
  value: PropTypes.string,
};

export default Wysiwyg;

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

import pluginPkg from '../../package.json';
import pluginId from './pluginId';
import Initializer from './components/Initializer';
import Wysiwyg from './components/Wysiwyg';

const name = pluginPkg.strapi.name;

export default {
  register(app) {
    app.registerPlugin({
      id: pluginId,
      initializer: Initializer,
      isReady: false,
      name,
    });
    app.addFields({type: 'wysiwyg', Component: Wysiwyg});
  },

  bootstrap(app) {
  },
};

src/plugins/wysiwyg/package.json

{
  ....
  ...
  "dependencies": {
    "@tinymce/tinymce-react": "^4.1.0"
  },
  ...
  ....
}

My goal is to be able to use and see TinyMCE using the command strapi develop or strapi start.

2 Answers 2

0

I think I found the solution. If you look at console, it says it could not load https://cdn.tiny.cloud when you run without --watch. So, what I did is in middleware.js file, I have added the following line inside `directives':

"script-src": [
            "https://cdn.tiny.cloud",
            "self",
            "'self'",
            "data:",
            "blob:",
          ],
Sign up to request clarification or add additional context in comments.

Comments

0

Update your config/middleware.js file to:

export default [
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': [
            "'self'",
            'data:',
            'blob:',
            'cdn.tiny.cloud',
          ],
          "script-src": [
            "cdn.tiny.cloud",
            "self",
            "'self'",
            "data:",
            "blob:",
          ],
          'media-src': [
            "'self'",
            'data:',
            'blob:',
            'cdn.tiny.cloud',
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  'strapi::cors',
  // 'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.