tui.editor: Uncaught TypeError: Cannot read property 'classList' of null

Describe the bug A clear and concise description of what the bug is. Uncaught TypeError: Cannot read property 'classList' of null

To Reproduce Steps to reproduce the behavior:

I use only Native HTML, CSS, JAVASCRIPT

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</head>
<body>
    <!-- ERROR -->
    <!--
    <form>
        <div id="editor"></div>
    </form>
    -->
    <div id="editor"></div>

    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://uicdn.toast.com/editor/latest/toastui-jquery-editor.min.js"></script>
    <!-- <script src="https://uicdn.toast.com/editor/latest/i18n/ko-kr.js"></script> -->
    <script>
        const option = {
            initialEditType: 'wysiwyg',
            height: '500px'
        };
        const editor = $('#editor').toastuiEditor(option);
    </script>
</body>
</html>

Expected behavior A clear and concise description of what you expected to happen.

“I cannot use editor with wrapping by <form> tag”

Screenshots If applicable, add screenshots to help explain your problem.

Console

Uncaught TypeError: Cannot read property 'classList' of null
    at e.exports (toastui-jquery-editor.min.js:14)
    at r.i._updateClassByButton (toastui-jquery-editor.min.js:30)
    at r.i._activateTabByButton (toastui-jquery-editor.min.js:30)
    at r.i.activate (toastui-jquery-editor.min.js:30)
    at r.i._render (toastui-jquery-editor.min.js:30)
    at new r (toastui-jquery-editor.min.js:30)
    at r.i._initDOM (toastui-jquery-editor.min.js:30)
    at r [as constructor] (toastui-jquery-editor.min.js:30)
    at new r (toastui-jquery-editor.min.js:30)
    at e.t._initPopupAddImage (toastui-jquery-editor.min.js:30)

Device Information -> SKIP

Additional context Add any other context about the problem here.

I want to use i18n with JQuery. But I got error When I add script line in document, ko-kr.js

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 20 (7 by maintainers)

Commits related to this issue

Merge pull request #837 from fe/list-convert Change OL, UL, TASK with multi line selection — committed to nhn/tui.editor by extremeFE 8 years ago

Most upvoted comments

Is there any reason you should write like this?

I think submit markdown data with form is a common usecase.

NateScarlet on Mar 23, 2020

@YBAZAN @gowda-nirmal @mieszko4 The npm release will be done later this month.

seonim-ryu on Apr 16, 2020

This is beacuse a form can not can have another form as child.

https://github.com/nhn/tui.editor/blob/7c50de827c3644a5033ea1b8f60b3cc78529d33d/apps/editor/src/js/ui/popupAddImage.js#L87 fileTypeSection will be null if used in form.

maybe change POP_CONTENT to not use form element can fix this.

NateScarlet on Mar 19, 2020

Hi, I have the same issue when I put the editor inside a modal with a form. But I do not use the jquery wrapper version. And I’m even not interested to use the image tool, but it seems we cannot deactivate it.

How can we handle this problem ?

YBAZAN on Mar 31, 2020

@YBHwang Have you ever used editor.getHtml() like this? If you use jQuery wrapper you shouldn’t use it like that. Would you like to call functions as below?

const $editor = $('#editor');

// create instance
$editor.toastuiEditor({
  // ...
});

// call instance methods
const markdown = $editor.toastuiEditor('getMarkdown');
const html = $editor.toastuiEditor('getHtml');

console.log(markdown);
console.log(html);

jquery-wrapper

seonim-ryu on Mar 26, 2020

@YBHwang And I have confirmed an error when using language files in the CDN of the jQuery wrapper. I will register and handle this issue separately.

seonim-ryu on Mar 23, 2020

@YBHwang First, the cause is what @NateScarlet said.

The editor uses a form tag to upload the image file, so if you wrap the editor wrapper element with a form tag in the way you use it, the structure is as follows:

<form>
  <div id="editor">
    ...
    <form enctype="multipart/form-data" class="te-file-type">
      ...
    </form>
    ...
  </div>
</form>

But the W3C spec says, you shouldn’t use form tags overlapping. The editor should not remove a form tag used internally, so you should not wrap it around with a form tag.

Every form must be enclosed within a FORM element. There can be several forms in a single document, but the FORM element can’t be nested.

Is there any reason you should write like this?

seonim-ryu on Mar 23, 2020