reactjs - dangerouslyPasteHTML dosent work for quill (Primereact) - Stack Overflow

admin管理员组

文章数量:1122846

I am trying to insert a template into the editor without any changes.

import React, { useEffect, useRef, useState } from 'react';
import { Editor, EditorProps, EditorTextChangeEvent } from "primereact/editor";
import juice from "juice";
import Quill from 'quill';

import './index.scss'
import { htmlDataContent } from "./__mocks__/htmlData";
import { Button } from "primereact/button";


export const HTMLEditor: React.FC<THTMLEditorProps> = (props) => {
  const [value, setValue] = useState<string>(juice(htmlDataContent));
  const editorRef = useRef<Editor>(null); // Ссылка на Editor

  const htmlTemplate = `
<div style="font-size: 24px;" class="big">Hello, World!</div>
`;

  const setQuillContent = (quill: any) => {
    const quillFromEditorInstance = editorRef.current?.getQuill();
    quillFromEditorInstance.clipboard.dangerouslyPasteHTML(htmlTemplate);
  };


  return (
    <div className={'html-editor-container'}>
      <Editor
        onLoad={setQuillContent}
        ref={editorRef}

      />
    </div>
  );
}

But Quill still transforms the template, and in the DOM (Chrome DevTools):

<div style="font-size: 24px;" class="big">Hello, World!</div> turns into <p>Hello, World!</p>.

How can I ensure that the passed template is displayed without changes? Or at least, how can I ensure that classes, IDs, and inline styles are applied? Thank you in advance.

I tried to do it this way:

// Extend Quill to support custom classes
const Block: any = Quill.import('blots/block');

class CustomBlock extends Block {
  static blotName = 'custom';
  static tagName = 'div';

  static formats(domNode: HTMLElement) {
    return domNode.getAttribute('class');
  }

  format(name: string, value: any) {
    if (name === 'class' && value) {
      (this.domNode as HTMLElement).setAttribute('class', value);
    } else {
      super.format(name, value);
    }
  }
}

However, inline styles and the class attribute are still not applied to the element. The only thing that changed is that instead of the p element, a div element is displayed in the DOM.

本文标签： reactjsdangerouslyPasteHTML dosent work for quill (Primereact)Stack Overflow