search

froala / django-froala-editor

Package to integrate Froala WYSIWYG HTML rich text editor with Django.
https://froala.com/wysiwyg-editor
284 stars 71 forks source link

image_tui plugin doesn't seem to be doing much #64

Closed duoi closed 5 years ago

duoi commented 5 years ago

Trying to use image_tui, added it like so:

FROALA_EDITOR_THIRD_PARTY = ('image_tui', 'spell_checker', 'font_awesome', 'embedly')

Everything else seems to be working fine, but when I click on the button for advanced image editing, nothing seems to be happening. Using Django 2.1 on Firefox and Chrome.

stefanneculai commented 5 years ago

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

duoi commented 5 years ago

django-froala-editor==2.9.3

Yep.

stefanneculai commented 5 years ago

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 commented 5 years ago

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/tui-code-snippet@1.4.0/dist/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/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.

duoi commented 5 years ago

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/tui-code-snippet@1.4.0/dist/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/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.