tui.editor
tui.editor copied to clipboard
Cannot see editor after loading files from CDN
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