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

Created on 19 Mar 2020 · 20Comments · Source: nhn/tui.editor

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

Question jQuery

Source

ybhwang

Most helpful comment

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

seonim-ryu on 16 Apr 2020

🎉2 👍2

All 20 comments

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 19 Mar 2020

👍2

@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 23 Mar 2020

👍1

@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 23 Mar 2020

🎉1

Is there any reason you should write like this?

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

NateScarlet on 23 Mar 2020

👍4

@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?

That's because editor.getHtml(); or editor.getMarkdown(); is not working at JQuery Edition

ybhwang on 25 Mar 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 26 Mar 2020

👍1

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 31 Mar 2020

👀1

@YBAZAN As I replied here, wrapping up the form causes such an issue. How about getting the editor's value using editor.getHtml(), editor.getMarkdown() API and then sending the form data?

seonim-ryu on 6 Apr 2020

@YBAZAN As I replied here, wrapping up the form causes such an issue. How about getting the editor's value using editor.getHtml(), editor.getMarkdown() API and then sending the form data?

Thanks for your answer. I would like to add 2 points:

In my app, the editor is a field inside a form (in a modal in most of cases) containing others inputs. I cannot extract it outside the form. It would break the layout.
There is no issue with the 1.4.10 version. Is it a design change in v2 or was this problem present in previous versions but not visible?

YBAZAN on 6 Apr 2020

I am embedding the editor in wicket forms, which worked well with v1.4.10 and breaks in v2 due to the form tag. Moving the editor out of the forms is not easy (if possible at all) and makes the editor less versatile to use.
I wonder if it really must be a form in the image upload? (As a quick and dirty experiment I changed the form to a div and files are still inserted.)

HisDudedness on 7 Apr 2020

@YBHwang @HisDudedness @NateScarlet
We checked the form tag(legacy code) in our editor and concluded that it doesn't matter if it is eliminated because internal form is not submitted and used anywhere. So, It will be replaced to div tag. I think the jquery prevented this error in v1.x, but the error occurred after removing jquery dependency in v2.x.
Thank you!

js87zz on 7 Apr 2020

Great news! Thanks!

HisDudedness on 7 Apr 2020

Thnx for fixing, looking forward for the release!

Because this error happened to me when using react wrapper <Editor inside <Formik

mieszko4 on 7 Apr 2020

Thank you !

Do you havea release date for this fix ?

YBAZAN on 10 Apr 2020

Because this error happened to me when using react wrapper <Editor inside <Formik

@mieszko4 - I am facing the same issue in react wrapper. Can you let me know how you resolved this issue? Has this fix been released? Or any workaround suggested?

Yash-GitB on 15 Apr 2020

@gowda-nirmal https://github.com/nhn/tui.editor/pull/890 is merged but looks like it is not released yet (https://github.com/nhn/tui.editor/releases)

mieszko4 on 15 Apr 2020

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

seonim-ryu on 16 Apr 2020

🎉2 👍2

I face the same issue, too.
Maybe the component should use two DOM element to handle this thing.
one to create a inner form, the other to show the editor/viewer.