Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot see editor after loading files from CDN #3259

Open
KTS915 opened this issue Jul 23, 2024 · 0 comments
Open

Cannot see editor after loading files from CDN #3259

KTS915 opened this issue Jul 23, 2024 · 0 comments
Labels

Comments

@KTS915
Copy link

KTS915 commented Jul 23, 2024

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 #2052 (comment)

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 KTS915 added the Bug label Jul 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant