Import raw HTML on init

[lubosdz]

Hi,

is it possible to import custom HTML into EditorJS on initialization?

For example - I have already existing HTML page, for which I need some WYSIWYG functionality.

Currently when I do:

<div id="page-content">
   <p>Hello</p>
   <p>World</p>
</div>

var editor = new EditorJS({
	holder : 'page-content'
});

then existing content of element "page-content" is ignored, and editor is just appended at the end (e.g. page bottom).
Creates new empty space rather than importing two existing <p> nodes - Hello and World.

So it seems that EditosJS can only load supplied data of JSON blocks on initialization and cannot load any custom HTML contents. Is that correct or did I miss something .. ?

I also looked over plugins - could not find any plugin for importing/parsing/loading supplied HTML.

Thank you.

[tkrevh]

Looking to add EditorJS to an app with existing HTML content.
Is there a function that lets you convert the HTML to JSON before passing it to the editor?

[lubosdz]

@tkrevh - I dont think so. I ended up using another wysiwyg (https://summernote.org/) - which can load any HTML with a command e.g. $("#wysiwyg").summernote('code', myHtml).

[tkrevh]

@lubosdz I found the way!

await editor.isReady
editor.blocks.renderFromHTML(existingHtml)

[searich]

I am looking to set the first block to be a title default, with a placeholder. I tried the way to use getBlockByIndex(0) to select the first block and set it to be a new data, inside onReady. But it seems not good.

[entonee]

@lubosdz I found the way!

await editor.isReady
editor.blocks.renderFromHTML(existingHtml)

not working for me (

[tkrevh]

@entonee we're using that solution in production, so it's working for all our customers.
Maybe you have an issue with your HTML, or don't have the necessary EditorJS blocks installed.

[entonee]

@entonee we're using that solution in production, so it's working for all our customers.
Maybe you have an issue with your HTML, or don't have the necessary EditorJS blocks installed.

Thank you.
i found a way. i get error with await ( i`m not using react - may be thats why)

but i added it to onReady and everything works like a charm

onReady: () => {
editor.blocks.renderFromHTML("")
}

but have an issue with images - i get an error ( Image Tool: uploading failed because of incorrect response: {"url":"http://myimageurl"} )

cant figure out what is correct responce - trying send just http://myimageurl - same thing.
google not helped yet.

[sethmichaelbrown]

@tkrevh - for us, the blocks api is not exposed until onChange is fired, so editor.blocks is undefined. Any thoughts on why this might be?

The project is running the latest version (2.22.2) and we are using EditorJs inside React. Attempting this solution within the onChange (the only place where editor.blocks.renderFromHTML()) is defined, leads to an infinite loop issue (which makes sense).

[tkrevh]

@sethmichaelbrown are you making sure the isReady promise is resolved?
await editor.isReady

Before trying to access editor.blocks?

[tkrevh]

@entonee you need to implement your own upload function. I've implemented it so that I get a signed AWS S3 upload link from our backend API and then upload to S3 directly from the browser.

[sethmichaelbrown]

@tkrevh - I am logging the editor instance within the onReady function. editor.isReady appeals to be fulfilled. I tried adding await editor.isReady within the onReady but got the same result. Any additional insight would be awesome.

Thanks for your reply!

[tkrevh]

@sethmichaelbrown can you post your code from initialization to where the blocks is undefined?

[sethmichaelbrown]

Sure -

  const initEditor = () => {
    const editor = new EditorJS({
      holder: EDITOR_HOLDER_ID,
      data: editorData,
      placeholder: 'Hit tab to see options',
      logLevel: 'ERROR',
      onReady: () => {
        ejInstance.current = editor;
       console.log(ejInstance.current)
      },
      onChange,
      autofocus: true,
      tools
    });
  };

And the output of the console.log -

clear: ƒ ()
configuration: {holder: "editorjs", data: {…}, placeholder: "Hit tab to see options", logLevel: "ERROR", onReady: ƒ, …}
destroy: ƒ ()
emit: ƒ (e,n)
focus: ƒ ()
isReady: Promise {<fulfilled>: undefined}
off: ƒ (e,n)
on: ƒ (e,n)
render: ƒ (e)
save: ƒ ()

[tkrevh]

@sethmichaelbrown see what happens, if you create the editor instance first and before the end of the initEditor method call await editor.isReady before accessing editor.blocks...
You will need to make the initEditor async.
Also see if you can drop the onReady method handler you have in there.

[sethmichaelbrown]

Do you mean something like this? Not sure if I follow totally. Thank you for helping me understand!

  const initEditor = async () => {
    const editor = new EditorJS({
      holder: EDITOR_HOLDER_ID,
      data: editorData,
      placeholder: 'Hit tab to see options',
      logLevel: 'ERROR',
      onReady: () => onReady(),
      onChange,
      autofocus: true,
      tools
    });

    const onReady = async () => {
      await editor.isReady;
      ejInstance.current = editor;
      console.log('ejInstance.current', ejInstance.current);
    };
  };

[tkrevh]

Close. I meant something like this:

const initEditor = async (html) => {
    const editor = new EditorJS({
      holder: EDITOR_HOLDER_ID,
      data: editorData,
      placeholder: 'Hit tab to see options',
      logLevel: 'ERROR',
      onChange,
      autofocus: true,
      tools
    });
    await editor.isReady;
    editor.blocks.renderFromHTML(html);
  };

Then just call initEditor with a valid html as parameter.

[tkrevh]

Here's an example if you're struggling: https://codepen.io/tkrevh/pen/GRmPwYe

[sethmichaelbrown]

@tkrevh - this worked perfectly! Thank you very much for all your help!

[nfantone]

@tkrevh While your solution works, it seems to be very limited in what it can do. For example, pasting <strong>, <em>, <br> or <table> tags doesn't seem to work (even after initializing @editorjs/table).

To see what I mean, try using the following as the input for your initEditor function:

<html>

<body>
  <h1>This is a heading</h1>

  <p>This is a normal paragraph. <strong>This text should be in bold</strong>, and <em>this should be italic</em>.</p>

  <table>
    <thead>
      <th>This should be a table heading</th>
    </thead>
    <tbody>
      <tr>
        <td>
          <span>This should be a table cell.</span>
        </td>
      </tr>
    </tbody>
  </table>
  <br>
  <br>
  <p>This paragraph should be padded.</p>
</body>

</html>

[luciancic]

Thanks @sethmichaelbrown @tkrevh

I had the same issue as Seth. Tried debugging the value of editor right after await editor.isReady and could not see blocks. Turns out it was hidden under the prototype (which I thought was the base Object). Hope this saves someone from wasting time on this like I have.

[4e576rt8uh9ij9okp]

I have this here and it works!

const editor = new EditorJS({
    holder: "editor",
    onReady: () => {
        editor.blocks.renderFromHTML("<h1>Hello there xD</h1>")
    }
})