CODEWITHSUNDEEP
djangodjango-formstinymcedjango-tinymce
Paul Choppin
Paul Choppin

Reputation: 116

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

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)

Upvotes: 4

Views: 8004

Answers (5)

Paul Choppin
Paul Choppin

Reputation: 116

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

Upvotes: -8

Vishesh Mangla
Vishesh Mangla

Reputation: 763

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

Upvotes: 0

Calpurnio Pisone
Calpurnio Pisone

Reputation: 57

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

Upvotes: 3

ANFAS PV
ANFAS PV

Reputation: 453

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

Upvotes: -2

ABC
ABC

Reputation: 199

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

Upvotes: -6

Related Questions