zoukankan      html  css  js  c++  java
  • 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的配置,前后端使用同一个。然后看看他们的长相:

    后端:

    前端: 

  • 相关阅读:
    基于element-ui图片封装组件
    计算时间间隔具体每一天
    C语言学习笔记 —— 函数作为参数
    AtCoder Beginner Contest 049 题解
    AtCoder Beginner Contest 048 题解
    AtCoder Beginner Contest 047 题解
    AtCoder Beginner Contest 046 题解
    AtCoder Beginner Contest 045 题解
    AtCoder Beginner Contest 044 题解
    AtCoder Beginner Contest 043 题解
  • 原文地址:https://www.cnblogs.com/lzhshn/p/13488147.html
Copyright © 2011-2022 走看看