Início / user-18809272

Ratnesh's questions

Martin Hope
Ratnesh
Asked: 2025-04-02 15:21:54 +0800 CST
  • 5

Estou usando react-quill-new no meu projeto Next.js e quero aplicar estilos inline em vez dos estilos baseados em classe padrão do Quill (por exemplo, ql-align-center). Quando envio meu conteúdo como um e-mail HTML, os estilos não são aplicados porque são baseados em classe.

Já tentei definir matchVisual: false dentro do módulo da área de transferência, mas a saída ainda contém estilos baseados em classe em vez de estilos embutidos.

Aqui está meu componente Editor atual:

'use client'

import dynamic from "next/dynamic"; import "./EditorStyle/bubble.css"; import Quill from "quill";

const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });

export const Editor = ({ content, onChange, className }: { content: any, className: string, onChange: (value: string) => void }) => {

    const module = {
        toolbar: {
            container: [
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                ["bold", "italic", "underline"],
                ['link'],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'color': [] }, { 'background': [] }],
                ['clean'],
                [{ 'font': [] }],
                [{ 'align': [] }],
            ],
            handlers: {
                link: function(value: string) {
                    const that: any = this;
                    const tooltip = that.quill.theme.tooltip;
                    const input = tooltip.root.querySelector("input[data-link]");
                    input.dataset.link = "google.com";
    
                    if (value) {
                        const range = that.quill.getSelection();
                        if (range == null || range.length === 0) {
                            return;
                        }
                        let preview = '';
                        if (/^\S+@\S+\.\S+$/.test(preview) && preview.indexOf("mailto:") !== 0) {
                            preview = `mailto:${preview}`;
                        }
                        const { tooltip } = that.quill.theme;
                        tooltip.edit("link", preview);
                    } else {
                        that.quill.format("link", false);
                    }
                }
            }
        },
        clipboard: {
            matchVisual: false
        }
    };
    
    return (
        <div>
            <div>
                <ReactQuill
                    theme="bubble"
                    value={content}
                    modules={module}
                    placeholder="Write something amazing..."
                    onChange={onChange}
                    className={`${className}`}
                />
            </div>
        </div>
    );
    
};`

Quero garantir que:

  1. O alinhamento (por exemplo, centro, esquerda, direita) é aplicado usando estilos embutidos como style="text-align: center;" em vez de class="ql-align-center".

  2. Listas, cores, fontes e outros estilos também usam estilos embutidos.

Como posso modificar minha configuração Quill para conseguir isso? Obrigado antecipadamente!

Tentei usar a propriedade formats no ReactQuill para especificar opções de formatação explicitamente, mas não fez diferença — a saída ainda continha estilos baseados em classe, como ql-align-center, em vez de estilos embutidos.

Também defini matchVisual: false no módulo da área de transferência, esperando que isso forçasse o Quill a aplicar estilos embutidos em vez de classes, mas isso também não funcionou.

Eu esperava que o Quill aplicasse estilos diretamente aos elementos usando atributos inline como style="text-align: center;" em vez de depender de classes CSS externas. No entanto, quando eu verifico o HTML gerado, ele ainda usa class="ql-align-center", que não funciona corretamente em clientes de e-mail.

Estou procurando uma maneira de modificar minha configuração para que todos os estilos (alinhamento, cores, listas, fontes, etc.) sejam aplicados como estilos embutidos em vez de classes.

reactjs