6

I am new to React-Quill and I am using it to edit an HTML template. I already have custom API which I created using spark post. Now I need to get that HTML file into this editor and then user can edit the template and save it.

When I get the HTML data and pass it into editor, some of the alignments, background colors and image size are different than the original HTML.

Can anyone please provide me a solution how I can improve this?

This is my expected HTML template.

My expected Template . . .

This is what I got from React-Quill.

What I get

I want to get the preview as the first image. This is my current code.

import ReactQuill from 'react-quill';

import { PreviewProps } from 'app/event/emails/emailModal/preview/Preview.types';
import { useLocale } from 'hooks/useLocale/useLocale';
import { Heading, Loader, Typography } from 'ui/atoms';
import 'react-quill/dist/quill.snow.css';

import { useStyles } from './Preview.styles';

export const Preview = ({ title, previewData }: PreviewProps) => {
  const classes = useStyles();
  const { formatMessage } = useLocale();

  if (!previewData) {
    return <Loader className={classes.loader} />;
  }
  const modules = {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
      ['link', 'image'],
    ],
  };

  const formats = [
    'header',
    'font',
    'size',
    'bold',
    'italic',
    'underline',
    'strike',
    'blockquote',
    'list',
    'bullet',
    'indent',
    'link',
    'image',
    'color',
    'size',
    'video',
    'align',
    'background',
    'direction',
    'code-block',
    'code',
    ];

  return (
    <>
      <div className={classes.container}>
        <Heading variant="h4" bold className={classes.title}>
          {formatMessage({ id: 'event.emails.preview.title' })}
        </Heading>
        <Typography variant="h5" className={classes.subtitle}>
          {title}
        </Typography>
      </div>
      <ReactQuill theme="snow" modules={modules} formats={formats} value={previewData.html || ''}>
        <div className="text-editor" />
      </ReactQuill>
    </>
  );
};

Anyone please help me to get this correctly. Thank you in advance.

Deepika
  • 737
  • 7
  • 23
  • Have you figured it out ? We're also experiencing styling issue with HTML response... – emre-ozgun Aug 23 '22 at 10:44
  • @emre-ozgun I couldn't resolve the issue. So I have used 'SunEditor' package which worked very well. – Deepika Aug 26 '22 at 10:23
  • thanks for the response! So you can directly embed in it your own HTML structure that comes from an API as well as editing it ? – emre-ozgun Aug 26 '22 at 11:14
  • @emre-ozgun Yes. Got the html from the API and used it in the Sun Editor's setContent props. Then I used onchange prop to change the html when edit. – Deepika Aug 26 '22 at 12:50

0 Answers0