[Django]-How to upload images (like from my computer) to my django-tinymce formField?

The solution suggested by this tutorial works, and it uses a file picker JavaScript callback, but it overrides your TINYMCE_DEFAULT_CONFIG if you have one in settings.py.

So, I suggest adding that file_picker_callback in settings.py, like this:

TINYMCE_DEFAULT_CONFIG = {
    "entity_encoding": "raw",
    "menubar": "file edit view insert format tools table help",
    "plugins": 'print preview paste importcss searchreplace autolink autosave save code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap emoticons quickbars',
    "toolbar": "fullscreen preview | undo redo | bold italic forecolor backcolor | formatselect | image link | "
    "alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | fontsizeselect "
    "emoticons | ",
    "custom_undo_redo_levels": 50,
    "quickbars_insert_toolbar": False,
    "file_picker_callback": """function (cb, value, meta) {
        var input = document.createElement("input");
        input.setAttribute("type", "file");
        if (meta.filetype == "image") {
            input.setAttribute("accept", "image/*");
        }
        if (meta.filetype == "media") {
            input.setAttribute("accept", "video/*");
        }

        input.onchange = function () {
            var file = this.files[0];
            var reader = new FileReader();
            reader.onload = function () {
                var id = "blobid" + (new Date()).getTime();
                var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                var base64 = reader.result.split(",")[1];
                var blobInfo = blobCache.create(id, file, base64);
                blobCache.add(blobInfo);
                cb(blobInfo.blobUri(), { title: file.name });
            };
            reader.readAsDataURL(file);
        };
        input.click();
    }""",
    "content_style": "body { font-family:Roboto,Helvetica,Arial,sans-serif; font-size:14px }",
}

I made this using https://django-filebrowser.readthedocs.io/en/3.5.2/quickstart.html
and https://django-tinymce.readthedocs.io/en/latest/usage.html.

settings.py

wyswyg = [  # what you see is what you get ---  enables to add a text editor on website
    "tinymce",
    "grappelli",
    "filebrowser",
]
INSTALLED_APPS = (
    [
        "django.contrib.admin",
        "django.contrib.auth",
        "django.contrib.contenttypes",
        "django.contrib.sessions",
        "django.contrib.messages",
        "django.contrib.staticfiles",
    ]
    + wyswyg
)

TINYMCE_JS_ROOT = os.path.join(STATIC_ROOT, "tinymce")



urls.py

from filebrowser.sites import site


urlpatterns = [
    url(r"^admin/filebrowser/", site.urls),
    url(r"^tinymce/", include("tinymce.urls")),
    path("admin/", admin.site.urls),
] 


form

from tinymce.widgets import TinyMCE


class MailForm(forms.Form):
    to = forms.SelectMultiple()
    subject = forms.CharField(max_length=50)
    content = forms.CharField(widget=TinyMCE(attrs={"cols": 80, "rows": 30}))

You can dynamically create pages with WYSWYG editors like django-tinymce.

First of all install django-tinymce pip install django-tinymce and add tinymce to INSTALLED_APPS in settings.py for your project

and add to urlpatterns

urlpatterns = [

    path('admin/', admin.site.urls),
    path('tinymce/', include('tinymce.urls')),
    
    ...
)

Create a Model just like you did

from tinymce.models import HTMLField

class Page(models.Model):
    name = models.CharField(max_length=255,unique=True)
    slug = models.CharField(max_length=255,unique=True)
    content = models.HTMLField()

    def save(self, *args, **kwargs):
        self.slug = slugify(self.name)
        super(Page, self).save(*args, **kwargs)

note that you didnt need to use null=False,blank=False to any field. It is set by default and you should use HTMLField() instead of TextField.

And your forms.py should be like

from django import forms
from django.forms.widgets import TextInput
from app.models import Page
from tinymce.widgets import TinyMCE

class PageForm(forms.ModelForm):

    class Meta:
        model = Page
        exclude = ['slug']
        widgets = {
            'name' : TextInput(attrs={'class': 'form-control', 'placeholder': 'Page Title'}),
            'content' : TinyMCE(attrs={'cols': 80, 'rows': 30,'class': 'form-control'}),
        }

And template should be like

 <form method="post" action="
    {% if action == "update-page" %}
        {% url "page_update" page.slug %}
    {% elif action == "create-page" %}
        {% url 'page_create' %}
    {% endif %}
 ">
       {% csrf_token %}
       {{ form.as_p }}
       <input type="submit" value="Enregistrer" />
 </form>

This is the basic setup of django-tinymce. Additionally, the following options can be defined for tinymce in your Django project’s settings.py file.

DEFAULT = {
    'selector': 'textarea',
    'theme': 'modern',
    'plugins': 'link image preview codesample contextmenu table code',
    'toolbar1': 'bold italic underline | alignleft aligncenter alignright alignjustify '
           '| bullist numlist | outdent indent | table | link image | codesample | preview code',
    'contextmenu': 'formats | link image',
    'menubar': False,
    'inline': False,
    'statusbar': True,
    'height': 360,
}

For image handling, I’d suggest you to use the popular Pillow library and a models.ImageField.

This field only saves the URL / path of the image and not the actual image within the database. However, django saves the actual image in your static files assets folder.

The image will be served by your server when you put something like into a template containing the image object as a context variable.

A great tutorial is here: https://coderwall.com/p/bz0sng/simple-django-image-upload-to-model-imagefield

finally i found exactly what I was looking for here:

https://karansthr.gitlab.io/fosstack/how-to-set-up-tinymce-in-django-app/index.html

So if you what to setup a WYSIWYG editor in your django project, be able to upload images/files from the client computer and use it in admin and/or in your personalised forms just follow the steps, if it doesn’t work perfectly you may need to check the code he uploaded on github witch is a bit different but functional with the very lasts versions of django (2.1 if you read this in 2054).