HTML to Delta

[alankarglobant]

Currenlty,I am using quill's 1.2.6 version. I can able to set the contents as HTML in editor when it has been saved as Delta format. Now in my application I have in plain HTML text format content has been saved in database.
like "<p><em><span style="text-style:underline">Some text goes here</span></em></p> " but, these contents are not rendering properly.

I have used "quill.clipboard.dangerouslyPasteHTML" function which applies some internal matchers and removes original arbitrary HTML contents.

Like we have an option for Delta to HTML so is there any option or way to generate the Delta from provided HTML. There is one option to save the contents of the database that is Delta in JSON string format but, I can apply this to the new contents which are being created by using the quill editor, not for existing. Because existing contents are saved in plain HTML format.

Also, I have tried for quill.root.innerHTML but it doesn't make any difference.

[jhchen]

Quill does not allow arbitrary HTML. It enforces a consistent unambiguous subset so you don't get stuff like:

<div>
  <div>
    <strong>Hello</strong><span></span><b>World</b>
  </div>
  <p><br></p>
</div>

If you need exactly your HTML to show up then your option is really contenteditable. It is as error-prone as it is because of how inconsistent and ambiguous HTML is. Otherwise Quill has dangerouslyPasteHTML.

[spenweb]

Use clipboard's convert method to create a delta from an HTML string.

const delta = editorInstance.clipboard.convert(content);

See https://github.com/quilljs/quill/blob/develop/modules/clipboard.js#L81

[pavan-shipmnts]

@lizy0329 are you using quill 2 or quill 1?
For quill two use this way
convert({html: '<div>'})

[pavan-shipmnts]

Yes they'll be.

[vuyo97]

Use clipboard's convert method to create a delta from an HTML string.

const delta = editorInstance.clipboard.convert(content);

See https://github.com/quilljs/quill/blob/develop/modules/clipboard.js#L81

But, In my case

const deltas = this.editor.clipboard.convert('<div id=\"mse-1\" class=\"mse\" data-video-setting=\"%7B%22url%22%3A%20%22https%3A%2F%2Fqimg.cdnmama.com%2Fmwh%2F2019%2F10%2F12%2Ff29952d427344551b69663d2b199584d.mp4%22%2C%20%22title%22%3A%20%22test2.mp4%22%2C%20%22enterLogo%22%3A%20%7B%22url%22%3A%20%22https%3A%2F%2Fstatic1.cdnmama.com%2Fstd%2Fimages%2Fnew%2Flogo.png%3Fv%3D1%22%2C%20%22width%22%3A%20%22145px%22%2C%20%22height%22%3A%20%2265vw%22%7D%2C%20%22poster%22%3A%20%22https%3A%2F%2Fqimg.cdnmama.com%2Fmwh%2F2019%2F10%2F12%2Ff29952d427344551b69663d2b199584d.mp4%3Fvframe%2Fjpg%2Foffset%2F1%2Fh%2F80%2F%22%7D\">123123</div>');

deltas just nothing

deltas =>
ops: Array(1)
0: {insert: "123123"}
length: 1
proto: Array(0)
proto: Object

how do i impelement this in my angularJS app , it gives off error "Uncaught SyntaxError: Cannot use import statement outside a module"

[jyjin]

import Quill from 'quill'; // npm i quill -S
/**
 * 将html字符串转成delta
 * @param {*} html 
 * @returns delta json
 */
function htmlToDelta(html) {
  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();
  document.getElementById('htmlToDelta').remove();
  return delta;
}