Waka blog.

Html文字列をQuillエディタに挿入するためのDeltaオブジェクトに変換する

Html文字列をQuillエディタに挿入するためのDeltaオブジェクトに変換するコード

const htmlToDelta = (html: string) => {
  const div = document.createElement("div");
  div.setAttribute("id", "htmlToDelta");
  div.innerHTML = `<div id="quillEditor" style="display:none">${html}</div>`;
  document.body.appendChild(div);
  const quill = new Quill("#quillEditor", {
    theme: "snow",
  });
  const delta = quill.getContents();
  const element = document.getElementById("htmlToDelta");
  if (element) element.remove();
  return delta;
};

div 要素に対象のhtml文字列を挿入し、そのdiv要素をターゲットにQuillのインスタンスを生成。そのQuillインスタンスから getContents でDeltaオブジェクトを取得している。

Quill