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

Question

I have an HTML page (not django admin) showing a WYSIYYG tinymce field: What i need to do with it is writing some text (it works), upload some images to illustrate the text (it doesn't work) and finally if possible give a class to these uploaded images.

This is for a kind of 'page' generator, every content written in the edidor will show up as new page on my webite.

the form :

class PageForm(forms.Form):
    name = forms.CharField(max_length=255)
    content = forms.CharField(widget=TinyMCE())

the model:

class Page(models.Model):
    name = models.CharField(max_length=255,
                            null=False,
                            blank=False,
                            unique=True,)
    content = models.TextField(null=False,
                               blank=False)
    slug = models.CharField(max_length=255)

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

the html page (basic):

<body>
    {% if error %}
        <p>Une erreur est survenue</p>
    {% endif %}

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

For the moment when i click on the insert/edit icon it just offers me to give a 'link' and not upload an image.

So how do i have to setup my django and/or setup tinymce

Thank you. (please consider in your answers that my english and my dev lvl is sometimes too weak to understand some parts of technical documentation)

Calpurnio Pisone · Answer 1 · 2023-01-16T10:33:39.707

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 }",
}

score 0 · Answer 2 · edited Feb 01 '23 at 23:08

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}))

ANFAS PV · Answer 3 · 2022-09-29T20:40:39.057

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,
}

score -6 · Answer 4 · answered Mar 26 '19 at 19:45

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

Hello I get this, but my question is specific about the use of tinymce. I want to be able to upload images through the editor and not have a specific field for the images. — Paul Choppin, Mar 26 '19 at 20:11

score -8 · Answer 5 · edited Feb 05 '23 at 03:54

-8

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).

edited Feb 05 '23 at 03:54

Ruedi Schwarzenbach

68
7

answered Mar 28 '19 at 11:16

Paul Choppin

116
1
11

1

Broken link. Can you please directly write down the solution in this answer? – ikonuk Jun 07 '20 at 21:34
1

Yet another useless answer because of a broken link. Please at least copy/paste the content of the link next time. – Leogout Jun 17 '20 at 07:26
broken link with no valid alternative. – Zeedia Aug 18 '20 at 20:00
The broken link to fosstack.com was moved to [here](https://karansthr.gitlab.io/fosstack/how-to-set-up-tinymce-in-django-app/index.html) – Ruedi Schwarzenbach Feb 03 '23 at 10:47

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

5 Answers5