Tui.editor: toastui-editor-all.min.js not working if the script tag is put into head tag

Created on 4 Apr 2020 · 2Comments · Source: nhn/tui.editor

Describe the bug

If toastui-editor-all.min.js is being put info head tag, Chrome throws the following errors because document.body is null at the time tui editor is being initialized

Uncaught TypeError: Cannot read property 'appendChild' of null
    at new e (toastui-editor-all.min.js:23)
    at Module.<anonymous> (toastui-editor-all.min.js:23)
    at n (toastui-editor-all.min.js:7)
    at toastui-editor-all.min.js:7
    at toastui-editor-all.min.js:7
    at toastui-editor-all.min.js:7
    at toastui-editor-all.min.js:7

To Reproduce

Run the following code, which is similar to the minimal example documented in apps/editor/README.md, but script tags are being moved into head tag

<!DOCTYPE html>

<html>

<head>
  <!-- Editor's Dependecy Style -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
  <!-- Editor's Style -->
  <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />

  <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
  <script>
    const Editor = toastui.Editor;

    const editor = new Editor({
      el: document.querySelector('#editor'),
      height: '500px',
      initialEditType: 'markdown',
      previewStyle: 'vertical'
    });

    editor.getHtml();
  </script>
</head>

<body>
  <div id="editor"></div>
</body>

</html>

Expected behavior

tui editor is initialized after DOMContentLoaded event fired

Question

Source

maxloh

👍2

All 2 comments

@maxloh It was wrong to use it like that.. This issue is an error when trying to load a script without a dom. You have to use the script inside the body as shown in the example. A detailed article on why it should be used is also below, so please refer to it.

https://ui.toast.com/fe-guide/en_PERFORMANCE/#javascript-optimization

seonim-ryu on 6 Apr 2020

👎2

@maxloh It was wrong to use it like that.. This issue is an error when trying to load a script without a dom. You have to use the script inside the body as shown in the example. A detailed article on why it should be used is also below, so please refer to it.

https://ui.toast.com/fe-guide/en_PERFORMANCE/#javascript-optimization

Thx.

It will be better if this behavior is explicitly documented.

maxloh on 6 Apr 2020

Was this page helpful?

0 / 5 - 0 ratings