django中ckeditor富文本編輯器使用

時間 2019-11-12

原文原文鏈接

1.安裝模塊html

　　（pillow是python的一個圖像處理庫）python

　　pip install django-ckeditor數據庫

　　pip install pillowdjango

2.編輯seetings.py配置文件　瀏覽器

INSTALLED_APPS = [
   'ckeditor',#富文本編輯器
    'ckeditor_uploader'#富文本編輯器上傳圖片模塊
]

#媒體文件配置
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
CKEDITOR_UPLOAD_PATH = "images"  # 上傳圖片保存路徑，若是沒有圖片存儲或者使用自定義存儲位置，那麼則直接寫  ' ' ,若是是使用django自己的存儲方式，那麼你就指名一個目錄用來存儲便可。


# 富文本編輯器ckeditor配置
CKEDITOR_CONFIGS = {
    #（1）默認配置
    # 'default': {
    #     'toolbar': 'full',  # 工具條功能
    #     'height': 300,  # 編輯器高度
    #     'width': 800,  # 編輯器寬
    # },

    #（3）自定義配置帶代碼塊顯示
    'default': {
        'toolbar': (
            ['div', 'Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
            ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
            ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
            ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
            ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
            ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
            ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
            ['Link', 'Unlink', 'Anchor'],
            ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
            ['Styles', 'Format', 'Font', 'FontSize'],
            ['TextColor', 'BGColor'],
            ['Maximize', 'ShowBlocks', '-', 'About', 'pbckcode'],
            ['Blockquote', 'CodeSnippet'],
        ),
        'width': 'auto',
        # 添加按鈕在這裏
        'toolbar_Custom': [
            ['NumberedList', 'BulletedList'],
            ['Blockquote', 'CodeSnippet'],
        ],
        # 插件
        'extraPlugins': ','.join(['codesnippet', 'widget', 'lineutils', ]),
    },
}

seetings.py

3.編輯urls.py路由app

from django.conf.urls import url, include
from django.contrib import admin
from django.conf.urls.static import static
from django.conf import settings
from editer import views

urlpatterns = [
                  url(r'^admin/', admin.site.urls),
                  url(r'^ckeditor/', include('ckeditor_uploader.urls')),
                  url(r'^index/', views.index),#測試獲取後臺編輯的內容用的

              ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)  ## 沒有這一句沒法顯示上傳的圖片

urls.py

4.app應用的models.py中的應用　　編輯器

from django.db import models
from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField


class SPUModel(models.Model):
    '''這是spu表格'''
    name = models.CharField(max_length=32, verbose_name='商品名')
    sales = models.CharField(max_length=20, verbose_name='銷售量')
    desc_pack = RichTextUploadingField(default='', verbose_name='商品詳情')

    def __str__(self):
        return self.name

    class Meta:
        verbose_name = '商品表'
        db_table = verbose_name
        verbose_name_plural = verbose_name

models.py

5.數據庫遷移指令ide

　　makemigrations函數

　　migrate工具

6.建立admin超級用戶

　　createsuperuser

7.app應用的admin.py文件中註冊表　　

from django.contrib import admin
from editer import models

# Register your models here.
admin.site.register(models.SPUModel)

admin.py

8.啓動項目，進入admin後臺管理編輯便可

9.在templates文件夾中編寫測試url返回頁面index.html　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CKEditorTest</title>
</head>
<body>
<div>
    {% for obj in all %}
        <hr>
        <h2>第{{ forloop.counter }}篇：</h2>
        <h2>標題：{{ obj.name }}</h2>
        <h3>銷量：{{ obj.sales }}</h3>
        {{ obj.desc_pack | safe }}

    {% endfor %}

</div>
</body>
</html>

index.html

10.app應用的views.py文件中編寫測試url對應的視圖函數　　

from django.shortcuts import render
from editer import models


# Create your views here.
def index(request):
    all_obj = list(models.SPUModel.objects.all().all().values('name','sales','desc_pack'))

    return render(request, 'index.html', {'all': all_obj})