tui.editor icon indicating copy to clipboard operation
tui.editor copied to clipboard

Cannot see editor after loading files from CDN

Open KTS915 opened this issue 7 months ago • 0 comments

Describe the bug

I am trying to install the Toast UI Editor in a textarea from a CDN. But, although the browser inspector shows that the Editor is in the HTML, nothing is visible.

To Reproduce

I installed Toast UI Editor from CDN by following the instructions at https://github.com/nhn/tui.editor/issues/2052#issuecomment-993168121

By looking at the browser inspector, I can see that I now have the following HTML within my textarea:

<textarea rows="1" cols="40" name="excerpt" id="excerpt" style="height: 500px;"><div class="toastui-editor-defaultUI"><div class="toastui-editor-toolbar"><div class="toastui-editor-md-tab-container" style="display: none"><div class="toastui-editor-tabs" aria-role="tabpanel"><div class="tab-item active" aria-role="tab" aria-label="Write" aria-selected="true" tabindex="0">Write</div><div class="tab-item" aria-role="tab" aria-label="Preview" aria-selected="false" tabindex="-1">Preview</div></div></div><div class="toastui-editor-defaultUI-toolbar" style="background: green;"><div class="toastui-editor-tooltip" style="display:none">
        <div class="arrow"></div>
        <span class="text"></span>
      </div><div class="toastui-editor-toolbar-group" style="null"><button type="button" class="more toastui-editor-toolbar-icons"></button><div class="toastui-editor-dropdown-toolbar" style="display: none;"><div class="toastui-editor-toolbar-group" style="null"><button type="button" class="heading toastui-editor-toolbar-icons" aria-label="Headings"></button><button type="button" class="bold toastui-editor-toolbar-icons" aria-label="Bold"></button><button type="button" class="italic toastui-editor-toolbar-icons" aria-label="Italic"></button><button type="button" class="strike toastui-editor-toolbar-icons" aria-label="Strike"></button><div class="toastui-editor-toolbar-divider" style="null"></div></div><div class="toastui-editor-toolbar-group" style="null"><button type="button" class="hrline toastui-editor-toolbar-icons" aria-label="Line"></button><button type="button" class="quote toastui-editor-toolbar-icons" aria-label="Blockquote"></button><div class="toastui-editor-toolbar-divider" style="display: none;"></div></div></div></div></div><div class="toastui-editor-popup " style="display: none;" aria-role="dialog"><div class="toastui-editor-popup-body"></div></div></div><div class="toastui-editor-main toastui-editor-ww-mode"><div class="toastui-editor-main-container"><div class="toastui-editor-md-container toastui-editor-md-vertical-style"><div class="toastui-editor md-mode" style="min-height: 200px;"><textarea class="toastui-editor-pseudo-clipboard"></textarea><div contenteditable="true" translate="no" class="ProseMirror"><div><br class="ProseMirror-trailingBreak"></div></div></div><div class="toastui-editor-md-splitter"></div><div class="toastui-editor-md-preview" style="min-height: 200px;"><div class="toastui-editor-contents"></div></div></div><div class="toastui-editor-ww-container"><div class="toastui-editor ww-mode" style="min-height: 200px;"><div contenteditable="true" translate="no" class="ProseMirror toastui-editor-contents"><p><br class="ProseMirror-trailingBreak"></p></div></div></div></div></div><div class="toastui-editor-mode-switch" style="display: block"><div class="tab-item">Markdown</div><div class="tab-item active">WYSIWYG</div></div><div class="toastui-editor-context-menu" style="display: none;" aria-role="menu"></div></div></textarea>

So it seems that the Toast UI Editor is in place as expected.

However, nothing shows up in the textarea. It is completely blank. The line <script src="https://uicdn.toast.com/editor-plugin-chart/3.0.1/toastui-editor-plugin-chart.min.js"></script> throws an error, so I have commented that out, but still nothing shows up, and there is now no error.

If I hover over various elements in the inspector, I can see that none of the Toast UI elements have any height.

Expected behavior

I expect to see the Toast UI Editor.

Screenshots

There is literally nothing to see: just a blank textarea.

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser Firefox
  • Version 128

KTS915 avatar Jul 23 '24 14:07 KTS915