120-在前端使用django-ckeditor,很简单,很方便

使用django-ckeditor在后端实现富文本编辑,包括这样几个步骤:

【1】安装

pip install django-ckeditor

  

【2】setting进行配置

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'notebook',
    'taggit',
    'ckeditor',

]

  

CKEDITOR_CONFIGS = {
    'awesome_ckeditor': {
        'toolbar': 'Basic',
        'height': 450,
        'width': 800,
    },
}

  

【3】模型中引入

——这里勘误一下,pub_date取消,按日期索引时,使用从pub_time.date()

from django.db import models
from taggit.managers import TaggableManager
from ckeditor.fields import RichTextField


# Create your models here.
class MyNote(models.Model):
    title = models.CharField(max_length=64, default='a default title')
    content = RichTextField(config_name='awesome_ckeditor')
    pub_time = models.DateTimeField(auto_now_add=True)
    update_time = models.DateTimeField(auto_now=True)
    # pub_date = models.DateField(auto_now=True)
    personal_tags = TaggableManager()

    def __str__(self):
        return self.title[0:32]

  

【4】如何在前端也使用ckeditor呢?只需要如此(这里暂不考虑功能,只呈现出来):

from django import forms
from .models import MyNote


class NoteForm(forms.ModelForm):
    class Meta:
        model = MyNote
        fields = ['title', 'content', 'personal_tags']

 

在django中,模型表格类是一个很特殊的存在!

建立的form类:NoteForm,其对应于MyNote,则其所有的表格内容,都继承了MyNote模型中的设定,他们是什么类型,有什么设置,在表格里一模一样。

form类里唯一要做的就是fields,这里列表具体的form里要显示多少内容。

 

<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>

 

由于content是一个ckeditor.fields的RichTextField,它需要额外的js配置才能真正显示出来。在django后端,这一切被自动完成了,但是前端还需要额外、显式地给定js配置。

在admin页面,django完成了所有配置,但是因为前端页面是用户创建的,django不能自动帮你完成设置。

上面两行js配置在工程里找不到任何具体的对应目录,所以这里当一个固定写法即可!关于admin,ckeditor的静态文件都是隐藏的,无法看见,除非使用:python3 manage.py collectstatic,收集所有静态资源时,你会发现很多以前看不到的模块或内容。

 

    {% block content %}
    <div class="left">
        <form>
            {% csrf_token %}
            {{form.as_p}}
        </form>
    </div>
    {% endblock %}

 

到模板页面时,仅仅只需要最简单的表达式。

【5】ckeditor的配置,前后端使用同一个。然后看看他们的长相:

后端:

前端: 

原文地址:https://www.cnblogs.com/lzhshn/p/13488147.html