javascript - How can I direct React-Quill to apply inline styles instead of classes? - Stack Overflow

admin管理员组

文章数量:1343687

I'm using React-quill and noticed that for some content the classes are being returned. Is there any way to get inline styles instead of classes.

<p>Pjhfdcjhad <span class="ql-size-large">jadhjvhgds</span> dsbjhvgdsz xv</p>

should instead be

<p>Pjhfdcjhad <span style="font-size: 1.5em;">jadhjvhgds</span> dsbjhvgdsz xv</p>

Sample codesandbox below

I'm using React-quill and noticed that for some content the classes are being returned. Is there any way to get inline styles instead of classes.

<p>Pjhfdcjhad <span class="ql-size-large">jadhjvhgds</span> dsbjhvgdsz xv</p>

should instead be

<p>Pjhfdcjhad <span style="font-size: 1.5em;">jadhjvhgds</span> dsbjhvgdsz xv</p>

Sample codesandbox below

https://codesandbox.io/s/agitated-snowflake-zvy6l

• javascript
• reactjs
• react-quill

Share Improve this question Follow edited Oct 11, 2021 at 19:16 isherwood 61.2k1616 gold badges121121 silver badges170170 bronze badges asked Oct 11, 2021 at 19:11 meteormeteor 2,56844 gold badges3939 silver badges5757 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

My oh my, this is extremely difficult to customize. A few work out of the box with just register. Some require CSS changes and some don't.

This helps get inline styles for font-sizes, indent, text direction etc.

Align & Direction:

Easiest of the lot--just needs registering:

//Text direction
Quill.register(Quill.import("attributors/style/direction"), true);
//Alignment
Quill.register(Quill.import("attributors/style/align"), true);

Font-size:

const Size = Quill.import("attributors/style/size");
Size.whitelist = ["0.75em", "1em", "1.5em", "2.5em"];
Quill.register(Size, true);

Requires CSS changes to get the menu acmodated correctly in addition to registering:

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="0.75em"]::before {
  content: "Small";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1em"]::before {
  content: "Normal";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1.5em"]::before {
  content: "Large";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="2.5em"]::before {
  content: "Huge";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="0.75em"]::before {
  content: "Small";
  font-size: 0.75em !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1em"]::before {
  content: "Normal";
  font-size: 1em !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1.5em"]::before {
  content: "Large";
  font-size: 1.5em !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="2.5em"]::before {
  content: "Huge";
  font-size: 2.5em !important;
}

Text Indent:

Parchment custom format

const Parchment = Quill.import("parchment");
class IndentAttributor extends Parchment.Attributor.Style {
  add(node, value) {
    if (value === 0) {
      this.remove(node);
      return true;
    } else {
      return super.add(node, `${value}em`);
    }
  }
}

let IndentStyle = new IndentAttributor("indent", "text-indent", {
  scope: Parchment.Scope.BLOCK,
  whitelist: ["1em", "2em", "3em", "4em", "5em", "6em", "7em", "8em", "9em"]
});

Quill.register(IndentStyle, true);

Link Editor cut-off at left:

Needs a data-text-editor for bounding container

  <div data-text-editor="form-editor">
    <ReactQuill
      ....
      bounds={`[data-text-editor="form-editor"]`} //for link editor to be not cut-off
    />
  </div>

https://codesandbox.io/s/vibrant-chebyshev-50eg7

Background: I was working with the React-Quill editor and needed to ensure that the HTML output, specifically text alignment, would be preserved when sending emails. Email clients often require inline styles for proper rendering, but React-Quill outputs HTML with classes styled by Quill's CSS. This bees an issue because many email clients do not support styles defined in <style> tags or even classes.

While Quill provides a way to register custom attributors for inline styles, the documentation primarily covers usage within a standard JavaScript environment. However, when using React-Quill within a Next.js application, the process is not as straightforward due to the server-side rendering and the need for dynamic imports.

After researching and bining information from two separate solutions—one for Quill.js and another specific to using React-Quill with Next.js—I found a way to register attributors that work for React-Quill in this context.

Solution: Here's how to dynamically import React-Quill in a Next.js application and register custom attributors for inline styles to ensure better patibility with email clients:

import dynamic from 'next/dynamic';
import React from 'react';
const ReactQuill = dynamic(
  async () => {
    const { default: RQ } = await import('react-quill');
    const Quill = RQ.Quill;
    const AlignStyle = Quill.import('attributors/style/align');
    const DirectionStyle = Quill.import('attributors/style/direction');
    // Import other style attributors as needed
    // Register the attributors for inline styles
    Quill.register(AlignStyle, true);
    Quill.register(DirectionStyle, true);
    // Register other attributors as needed
    // If you're using additional modules like BlotFormatter, register them as well
    const { default: BlotFormatter } = await import('quill-blot-formatter');
    Quill.register('modules/blotFormatter', BlotFormatter);
    // Return a ReactQuill ponent with the registered attributors
    return function forwardRef({ forwardedRef, ...props }) {
      return <RQ ref={forwardedRef} {...props} />;
    };
  },
  {
    ssr: false, // This is important for Next.js to avoid server-side rendering issues
  }
);
export default ReactQuill;

By using this approach, you can ensure that your React-Quill editor is configured correctly for use in a Next.js application, and that the HTML output is more likely to be rendered as expected in various email clients. This solution is particularly useful for those who need to send rich text content via email and want to maintain consistent styling across different email platforms. It bines the registration of custom attributors in Quill with the dynamic import capabilities of Next.js, allowing for a seamless integration of React-Quill in a server-side rendering environment.

本文标签： javascriptHow can I direct ReactQuill to apply inline styles instead of classesStack Overflow