Tui.editor: JS Errors When Loading the Editor

[cyberjacob]

Version 1.3.0

Test Environment Firefox 64.0.2, Windows 10

Current Behavior

When attempting to load the editor (e.g. https://codepen.io/anon/pen/rPzgVG?editors=1010 ), the editor does not load, and one of two JS errors are shown in the console:

TypeError: tui.Editor is not a constructor

Error: Syntax error, unrecognized expression: <div class="tui-editor-defaultUI"> <div class="te-toolbar-section"><div class="te-markdown-tab-section"></div></div> <div class="te-editor-section"></div> <div class="te-mode-switch-section"></div> </div>

Expected Behavior

The editor loads.

[cs09g]

Similiar error is happening with jsfiddle: https://jsfiddle.net/Lrb6hqtk/. I guess it needs webpack-like environment?

[cs09g]

After a bit of investigation, found it requires many dependencies:

• jquery.js, markdown-it.js, to-mark.js, tui-code-snippet.js, codemirror.js, highlight.pack.js, squire-raw.js

In your case, if you add jquery, it will work as expected.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

codepen: https://codepen.io/anon/pen/ZwjxoY

[sohee-lee7]

@cyberjacob tui.editor have dependencies of jquery, markdownIt and etc. tui-editor-Editor-full.js is bundled with all dependencies. So if you don't want to load dependecies, use tui-editor-Editor-full.js

[sohee-lee7]

@cyberjacob I think this issue is resolved so I will close it. If you have any problem, please make a new issue.