CKEditor 是一個開源所見即所得的文字編輯器,
可讓使用者查看編輯 HTML 檔案,
今天就來教大家如何使用:
Django 所見即所得-富文本編輯器 CKEditor
首先必須先安裝套件:pip install django-ckeditor
並將其加入 settings.py,
INSTALLED_APPS = [
.....省略....., 'ckeditor' ]
到 models.py 加入要使用 CKEditor 的欄位:
from django.contrib.auth.models import User from django.db import models from ckeditor.fields import RichTextField class BlogPost(models.Model): title = models.CharField(max_length=50, default='') content = RichTextField(blank=True, max_length=300) author = models.ForeignKey(Profile, on_delete=models.CASCADE) classification = models.ManyToManyField(Classification)
將這些欄位加入 admin.py 中
from django.contrib import admin from accounts.models import BlogPost, Profile class BlogPostAdmin(admin.ModelAdmin): list_display = ('title', 'content', 'author') admin.site.register(BlogPost, BlogPostAdmin)
接著同步資料庫:
pyhton manage.py makemigrations
pyhton manage.py migrate
一個最基本的功能就都有了,
進入 Django admin 中就能看到富文本編輯器:
當然,
一篇好的文章勢必要圖文並茂,
所以可以讓使用者自行上傳圖片:
首先要安裝 pillow
pip install pillow
安裝完畢之後,
加入 ckedit_uploader,
INSTALLED_APPS = [ 'ckeditor', 'ckeditor_uploader', ]
在 settings.py 加入設定:
MEDIA_URL = '/media/'# 放在django 專案根目录,同时也需要新建media資料夾MEDIA_ROOT = os.path.join(BASE_DIR, 'media') CKEDITOR_UPLOAD_PATH = 'upload/'CKEDITOR_IMAGE_BACKEND = 'pillow'
而原本的 RichTextField 則要改為 RichTextUploadingField
from django.contrib.auth.models import User from django.db import models #from ckeditor.fields import RichTextFieldfrom ckeditor_uploader.fields import RichTextUploadingFieldclass BlogPost(models.Model): title = models.CharField(max_length=50, default='') content = RichTextUploadingField(max_length=300) author = models.ForeignKey(Profile, on_delete=models.CASCADE) classification = models.ManyToManyField(Classification)
urls.py 則要新增:
from django.contrib import admin from django.urls import path , re_path, include urlpatterns = [ path('admin/', admin.site.urls), re_path(r'^ckeditor/', include('ckeditor_uploader.urls')),]
可看到上傳圖片多出了上傳選項:
在部署之後,
要記得開啟專案資料夾 media 與 media/upload 權限,
避免無法上傳。
除此以外,
可從 settings.py 自訂要顯示的功能:
CKEDITOR_CONFIGS = { 'default': { 'skin': 'moono-lisa', 'toolbar_Basic': [ ['Source', '-', 'Bold', 'Italic'] ], 'toolbar_Full': [ [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ], [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ], [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ], [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ], '/', [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ], [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ], [ 'Link','Unlink','Anchor' ], [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ], '/', [ 'Styles','Format','Font','FontSize' ] , [ 'TextColor','BGColor' ] , [ 'Maximize', 'ShowBlocks','-','About' ] , ['CodeSnippet'], #插入程式code按鈕 ], 'toolbar': 'Full', 'extraPlugins': 'codesnippet', #插入程式code } }
是否要顯示各項功能按鈕,
就能夠過此設定來做刪減,
這就是今天的主題:
沒有留言:
張貼留言