Tui.editor: Can´t make the editor work

Created on 22 Jan 2018 · 11Comments · Source: nhn/tui.editor

Version

Version 1.1 from "Production" Branch

Test Environment

Client: Chrome 63.0.3239.13, Windows 10 64 Bits
Server: Ubuntu 16.04 LTS, NGINX, PHP-FPM, PHP 7.2, Laravel 5.5

Current Behavior

I can´t load the editor, using the file "tui-editor-Editor-all.min.js": gives me this error:
Uncaught TypeError: Cannot read property 'WwCodeBlockManager' of undefined
With this file: "tui-editor-Editor.min.js" it gives me this error:
Uncaught TypeError: (0 , r.default) is not a function

Code example

<script src="{{ asset('/plugins/tui-editor/dist/tui-editor-Editor-all.min.js') }}" type="text/javascript"></script>    
    <link href="{{ asset('/plugins/tui-editor/dist/tui-editor.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('/plugins/tui-editor/dist/tui-editor-contents.min.css') }}" rel="stylesheet" type="text/css" />

<div id="editSection"></div>

<script>
        $('#editSection').tuiEditor({
            initialEditType: 'markdown',
            previewStyle: 'vertical',
            height: '300px'
          });
        });
</script>

Expected Behavior

Show the Editor in the div selected.

Enhancement Question

Source

brunonetadmin

Most helpful comment

this "-all.min.js" its not with "All" the basic dependencies? And where this is documented? How i will know what file and from when to load, even to make the basic functions of this plugin work? Don´t get me wrong, but i think that Editor needs to works "out-of-box", and ONLY when a need more plugins, or advanced features, then i will need another pieces of software ... well this is my idea and sugestion.

brunonetadmin on 23 Jan 2018

👍44

All 11 comments

I think you're missing dependencies.

check out https://github.com/nhnent/tui.editor/blob/production/examples/example01-basic.html

kyuwoo-choi on 23 Jan 2018

brunonetadmin on 23 Jan 2018

👍44

I am inclined to agree with @brunonetadmin my assumption is that I should be able to pull the library, include the .js and .css files and be able to run it. (especially if the name -all implies, otherwise need to know all required dependencies up front) Looks fantastic, I am just stumbling to get it running due to dependencies I am sure.

xavisavvy on 5 Feb 2018

👍8

ok guys. It makes sense.
I'll consider add bundled distributions in next release.
until then see usage for npm or usage for bower

kyuwoo-choi on 6 Feb 2018

I have checked the usage for bower guide to load all the dependencies shown there.
All the dependencies are loading in the browser and I am not getting any errors in console but the editor is not loading. Am I missing any other dependency apart from those listed on the page?

quantumkv on 7 Feb 2018

@quantumkv I can't tell you before I check your actual code.
would you setup an example on codepen or something?

kyuwoo-choi on 7 Feb 2018

My mistake. I had a script tag for tui-editor-Viewer-all.min.js in the file. Including the file caused the editor to silently fail without any error.
Removed it and the editor works flawlessly.

quantumkv on 7 Feb 2018

When trying to use the instructions for npm (bower is deprecated) I see the issues that I describe below. It might very well be due to my limited npm foo however, here they come as I see them:
The command:

npm install --save tui-editor

gives you a node_modules/ directory where you can find all the dependencies. The code of each of them is organized in different ways.

So, first you have to find out which dependencies you need. It is not written in any documentation. You only find the answer either poking around in the code (the webpack loading mechanism in tui-editor-Editor.js:

module.exports = factory(require("jquery"), require("tui-code-snippet"), require("codemirror"), require("markdown-it"), require("to-mark"), require("highlight.js"), require("squire-rte")

or looking at the examples inside the /examples directory:

<head lang="en">
    <meta charset="UTF-8">
    <title>1. Basic</title>
    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src='../lib/markdown-it/dist/markdown-it.js'></script>
    <script src="../lib/to-mark/dist/to-mark.js"></script>
    <script src="../lib/tui-code-snippet/dist/tui-code-snippet.js"></script>
    <script src="../lib/codemirror/lib/codemirror.js"></script>
    <script src="../lib/highlightjs/highlight.pack.js"></script>
    <script src="../lib/squire-rte/build/squire-raw.js"></script>
    <link rel="stylesheet" href="../lib/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="../lib/highlightjs/styles/github.css">
    <link rel="stylesheet" href="./explain.css">
  </head>

By the way the ../lib/ directory is nowhere present in the distribution.

If you then go on with the documentation under "Usage", you find:

Add dependencies & initialize Editor class with given element to make an Editor.

// deps for editor
require('codemirror/lib/codemirror.css'); // codemirror
require('tui-editor/dist/tui-editor.css'); // editor ui
require('tui-editor/dist/tui-editor-contents.css'); // editor content
require('highlight.js/styles/github.css'); // code block highlight

var Editor = require('tui-editor');
...
var editor = new Editor({
    el: document.querySelector('#editSection'),
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: '300px'
});

The first 4 lines give you obviously only some css dependencies and the last one "var Editor = require('tui-editor');" will give you at best only the editor's code. Also in this case you would have to have a webpack.config.js file with instructions for how to treat the code.
As presented in the docs, in practice, you are unable to do anything with those lines alone.

Finally, as a workaround, trying to build the code using the webpack.config.js in the repository does not give you those dependencies either.

So the only way I could make the editor work is collecting the single dependencies one by one after fetching them either from cdnjs.cloudflare.com or copying them from the source in the live examples or node_modules/ directory.

tribis on 9 Nov 2018

I wanna add a note related to this issue, in the case that you're including <script> tags in a HTML file:

Do exactly as the example code, that all dependencies are put inside <head>, and tui-editor-Editor.js, tui-editor.css, tui-editor-contents.css inside <body>.

I previously put all stylesheets and scripts inside <head>, and found tooltips no longer shows up when hovering over editor buttons. tui-editor-Editor.js would append a <div> element in <body> which serves as the tooltip, so it needs to be put inside <body>.

Here's a part of the source code

const TOOLTIP_CONTENT = '<div class="tui-tooltip"><div class="arrow"></div><span class="text"></span></span></div>';

/**
 * Class Tooltip
 */
class Tooltip {
  /**
   * Creates an instance of Tooltip.
   * @memberof Tooltip
   */
  constructor() {
    this.$el = $(TOOLTIP_CONTENT);
    this.$el.appendTo('body');
    this.hide();
}