image_tui plugin doesn't seem to be doing much about django-froala-editor

[duoi]

Looks like I managed to get it going. On top of what the app provides, I have to manually include the following:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-image-editor.min.js"></script>

And ensure it is loaded before the app includes its own JS files. Then I have to also manually include the CSS files. It might be worth including those JS files into the main app if they're required.

Thanks for your help.

[stefanneculai]

Could you please make sure that you are using the latest 2.9.3 version?

[duoi]

django-froala-editor==2.9.3

Yep.

[stefanneculai]

Could you also please check that you are including the JS and CSS files required by TUI: https://www.froala.com/wysiwyg-editor/examples/tui-advanced-image-editor?

[duoi]

Here is a full list of the files that the plugin includes:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/froala_editor.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/froala_style.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/froala-django.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/char_counter.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/code_view.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/colors.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/draggable.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/emoticons.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/file.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/fullscreen.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/help.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/image.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/image_manager.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/line_breaker.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/quick_insert.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/special_characters.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/table.min.css" type="text/css" media="all" rel="stylesheet">
<link href="/static/froala_editor/css/plugins/video.min.css" type="text/css" media="all" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/froala_editor.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/froala-django.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/align.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/char_counter.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/code_beautifier.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/code_view.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/colors.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/draggable.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/emoticons.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/entities.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/file.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/font_family.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/font_size.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/fullscreen.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/help.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/image.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/inline_style.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/line_breaker.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/link.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/lists.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/print.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/quick_insert.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/quote.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/save.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/special_characters.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/table.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/url.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/video.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/word_paste.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/third_party/image_tui.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/third_party/font_awesome.min.js"></script>

I also added the following lines at the end of the page as instructed:

<!-- Include TUI JS. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-image-editor.min.js"></script>

<!-- Include TUI plugin. -->
<script type="text/javascript" src="../js/third_party/image_tui.min.js"></script>

When added like this, there are two "advanced editor" buttons. Clicking either one of them opens up the editor but with no CSS applied, so it's all over the place (see here: https://i.imgur.com/w9P7eAk.png). If I remove <script type="text/javascript" src="../js/third_party/image_tui.min.js"></script>, which is in there twice due to being included by the app, I go back to only having on "Advanced Editor" button but it also goes back to not doing anything when clicked.