Question

我有一个显示WYSIYYG tinymce字段的HTML页面（不是django admin）：我需要做的是写一些文本（它可以工作），上传一些图像来说明文本（它不起作用），最后，如果可能的话，给这些上传的图像上一堂课。

这是一种“页面”生成器，用edidor编写的每个内容都会在我的网站上显示为新页面。

表格：

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

模型：

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)

html页面（基本）：

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

目前，当我单击插入/编辑图标时，它只是为我提供“链接”，而不是上传图片。

那我该如何设置django和/或设置tinymce

谢谢。（请在您的回答中考虑我的英语和我的开发水平有时太弱，无法理解技术文档的某些部分）

Answer 1

对于图像处理，建议您使用流行的Pillow库和models.ImageField。

此字段仅保存图像的URL /路径，而不保存数据库中的实际图像。但是，django将实际图像保存在静态文件资产文件夹中。

将类似图像放入包含图像对象作为上下文变量的模板时，服务器将为图像提供图像。

一个很棒的教程在这里：https://coderwall.com/p/bz0sng/simple-django-image-upload-to-model-imagefield

Answer 2

最终我在这里找到了我想要的东西

https://fosstack.com/how-to-set-up-tinymce-in-django-app/

因此，如果您要在django项目中设置WYSIWYG编辑器，则可以从客户端计算机上载图像/文件，并以admin和/或您的个性化形式使用它（如果没有）完美地运行，您可能需要检查他在github上上传的代码，这与django的最新版本（如果在2054年阅读此版本为2.1）有所不同，但可以使用。

Answer 3

您可以使用django-tinymce之类的WYSWYG编辑器动态创建页面。

首先为您的项目安装django-tinymce pip install django-tinymce4-lite并将tinymce添加到INSTALLED_APPS中的settings.py中

并添加到urlpatterns

urlpatterns = [

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

像您一样创建模型

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)

请注意，您无需在任何字段中使用null=False,blank=False。它是默认设置，您应该使用HTMLField()而不是TextField。

您的forms.py应该像

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

模板应该像

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

这是django-tinymce的基本设置。此外，可以在Django项目的tinymce4-lite文件中为settings.py定义以下选项。

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

Answer 4

我使用 https://django-filebrowser.readthedocs.io/en/3.5.2/quickstart.html 制作的和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}))

如何将图像（例如从计算机中）上传到django-tinymce formField？

4 个答案: