Uncaught TypeError: Cannot read property 'classList' of null #837

ybhwang · 2020-03-19T06:27:43Z

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

The text was updated successfully, but these errors were encountered:

NateScarlet · 2020-03-19T10:16:05Z

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

tui.editor/apps/editor/src/js/ui/popupAddImage.js

Line 87 in 7c50de8

const fileTypeSection = popup.querySelector(`.${CLASS_FILE_TYPE}`);

fileTypeSection will be null if used in form.

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

seonim-ryu · 2020-03-23T04:08:26Z

@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 · 2020-03-23T04:33:13Z

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

NateScarlet · 2020-03-23T05:07:47Z

Is there any reason you should write like this?

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

ybhwang · 2020-03-25T15:51:42Z

@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

seonim-ryu · 2020-03-26T01:16:19Z

@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);

YBAZAN · 2020-03-31T16:14:28Z

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 ?

seonim-ryu · 2020-04-06T01:29:16Z

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

YBAZAN · 2020-04-06T08:11:31Z

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

HisDudedness · 2020-04-07T06:30:22Z

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.)

js87zz · 2020-04-07T08:06:03Z

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

HisDudedness · 2020-04-07T08:25:36Z

Great news! Thanks!

mieszko4 · 2020-04-07T12:17:27Z

Thnx for fixing, looking forward for the release!

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

YBAZAN · 2020-04-10T07:54:36Z

Thank you !

Do you havea release date for this fix ?

gowda-nirmal · 2020-04-15T19:48:37Z

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?

mieszko4 · 2020-04-15T20:27:22Z

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

seonim-ryu · 2020-04-16T02:37:49Z

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

landall · 2020-04-19T08:12:57Z

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.

gowda-nirmal · 2020-04-26T20:25:17Z

@seonim-ryu Any updates on when this release is for React?

seonim-ryu · 2020-04-29T11:26:47Z

@landall @Yash-GitB The 2.1.0 version has been released and the wrappers have also been updated with the Editor.

So I'll close this issue. If you have any problems, please register a new issue. :)

Change OL, UL, TASK with multi line selection

ybhwang added the Bug label Mar 19, 2020

seonim-ryu mentioned this issue Mar 23, 2020

Error when including i18n language file in jQuery wrapper #845

Closed

seonim-ryu added the Question label Mar 26, 2020

seonim-ryu mentioned this issue Mar 26, 2020

Is it possible to get editor value via class when adding to FormData()? #853

Closed

seonim-ryu added Wrapper: jQuery and removed Bug labels Mar 26, 2020

seonim-ryu mentioned this issue Apr 6, 2020

Is it possible to use this inside a form? #884

Closed

js87zz mentioned this issue Apr 7, 2020

fix: replace form tag to div tag to prevent script error(fix: #837) #890

Merged

6 tasks

seonim-ryu added this to the 2.1.0 milestone Apr 16, 2020

seonim-ryu closed this as completed Apr 29, 2020

js87zz pushed a commit that referenced this issue Jun 17, 2021

Merge pull request #837 from fe/list-convert

bece8a4

Change OL, UL, TASK with multi line selection

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught TypeError: Cannot read property 'classList' of null #837

Uncaught TypeError: Cannot read property 'classList' of null #837

ybhwang commented Mar 19, 2020 •

edited

Loading

NateScarlet commented Mar 19, 2020

seonim-ryu commented Mar 23, 2020

seonim-ryu commented Mar 23, 2020

NateScarlet commented Mar 23, 2020

ybhwang commented Mar 25, 2020

seonim-ryu commented Mar 26, 2020 •

edited

Loading

YBAZAN commented Mar 31, 2020

seonim-ryu commented Apr 6, 2020 •

edited

Loading

YBAZAN commented Apr 6, 2020

HisDudedness commented Apr 7, 2020

js87zz commented Apr 7, 2020

HisDudedness commented Apr 7, 2020

mieszko4 commented Apr 7, 2020

YBAZAN commented Apr 10, 2020

gowda-nirmal commented Apr 15, 2020 •

edited

Loading

mieszko4 commented Apr 15, 2020

seonim-ryu commented Apr 16, 2020

landall commented Apr 19, 2020

gowda-nirmal commented Apr 26, 2020

seonim-ryu commented Apr 29, 2020 •

edited

Loading

Uncaught TypeError: Cannot read property 'classList' of null #837

Uncaught TypeError: Cannot read property 'classList' of null #837

Comments

ybhwang commented Mar 19, 2020 • edited Loading

NateScarlet commented Mar 19, 2020

seonim-ryu commented Mar 23, 2020

seonim-ryu commented Mar 23, 2020

NateScarlet commented Mar 23, 2020

ybhwang commented Mar 25, 2020

seonim-ryu commented Mar 26, 2020 • edited Loading

YBAZAN commented Mar 31, 2020

seonim-ryu commented Apr 6, 2020 • edited Loading

YBAZAN commented Apr 6, 2020

HisDudedness commented Apr 7, 2020

js87zz commented Apr 7, 2020

HisDudedness commented Apr 7, 2020

mieszko4 commented Apr 7, 2020

YBAZAN commented Apr 10, 2020

gowda-nirmal commented Apr 15, 2020 • edited Loading

mieszko4 commented Apr 15, 2020

seonim-ryu commented Apr 16, 2020

landall commented Apr 19, 2020

gowda-nirmal commented Apr 26, 2020

seonim-ryu commented Apr 29, 2020 • edited Loading

ybhwang commented Mar 19, 2020 •

edited

Loading

seonim-ryu commented Mar 26, 2020 •

edited

Loading

seonim-ryu commented Apr 6, 2020 •

edited

Loading

gowda-nirmal commented Apr 15, 2020 •

edited

Loading

seonim-ryu commented Apr 29, 2020 •

edited

Loading