Summernote配置方式一

A WYSIWYG (pronounced "wiz-ee-wig") editor or program is one that allows a developer to see what the result will look like while the interface or document is being created. WYSIWYG is an acronym for "what you see is what you get".

Integrating Summernote WYSIWYG Editor in Django

There are many WYSIWYG editors out there such as TinyMCE, Froala, CKEditor, etc. But recently I stumble on this very simple yet flexible text editor Summernote.

In this tutorial, we will go through the integration of the Summernote WYSIWYG HTML Editor in Django.

But why would you need a WYSIWYG editor?

Suppose you are building a blog application you have to format your content a lot like adding different headings, links, images and lot in such case a WYSIWYG editor can save you from a lot of pain.

Also even if you are not making a blog application, any kind of application needs about us, terms and conditions kind of pages, writing them on WYSIWYG is comparatively faster.

Here is a preview of what we are going to build by the end of this tutorial.

这个是默认界面，还存在一个定制化界面。这个blog其实还是在用一个定制化界面。

Integrating Summernote In Django

Considering the scope of the article I am assuming you already have a basic Django project up and running if not reading the following articles is recommended.

• Starting A Django Project

• Building A Blog Application With Django

In this tutorial, I am implementing the editor in a blog application and this is the post model of the app.

class Post(models.Model):
    title = models.CharField(max_length=200, unique=True)
    slug = models.SlugField(max_length=200, unique=True)
    author = models.ForeignKey(
        User, on_delete=models.CASCADE, related_name='blog_posts')
    updated_on = models.DateTimeField(auto_now=True)
    content = models.TextField()
    created_on = models.DateTimeField(auto_now_add=True)
    status = models.IntegerField(choices=STATUS, default=0)
    class Meta:
        ordering = ['-created_on']
​
    def __str__(self):
        return self.titleCopy

以上是django for beginner的套路。接下来要插入summernote了。

Next Install django-summernote.

pip install django-summernote

Add django_summernote to INSTALLED_APP in settings.py.

INSTALLED_APPS += ('django_summernote', )

Add django_summernote.urls to urls.py.

from django.urls import include
​
# ...
urlpatterns = [
...
path('summernote/', include('django_summernote.urls')),
...]Copy

Django-summernote allows you to upload media files, therefore make sure media URLs are configured.

An example of media settings could be as follows,

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

In order to make the development server i.e. DEBUG=True serve the media files add the following configuration to url.py.

from django.conf import settings
from django.conf.urls.static import static
​
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)Copy

Django 3.X users must add the below configuration

X_FRAME_OPTIONS = 'SAMEORIGIN'Copy

Save the settings file and run migrations.

Now we need to add summernote to model fields, open admin.py file of the app.

from django_summernote.admin import SummernoteModelAdmin
from .models import Post
​
class PostAdmin(SummernoteModelAdmin):
    summernote_fields = ('content',)
admin.site.register(Post, PostAdmin)Copy

Save the file create a superuser and navigate to the admin dashboard you should see the summernote editor on the content field.

Similarly, the editor can be applied to forms.

在这个地方做定制化？

from django_summernote.widgets import SummernoteWidget, SummernoteInplaceWidget

# Apply summernote to specific fields.
class SomeForm(forms.Form):
    foo = forms.CharField(widget=SummernoteWidget())  # instead of forms.TextareaCopy

While rendering the content in templates use the safe filter which prevents HTML from escaping.

现在新app的页面貌似需要这个来防范。

{{ content | safe }}

To explore more configuration read the official documentation of the package, https://github.com/summernote/django-summernote