Django實現的博客系統中使用富文本編輯器ckeditor

  操做系統爲OS X 10.9.2,Django爲1.6.5.javascript

  1.下載和安裝

  1.1 安裝 ckeditorhtml

  下載地址 https://github.com/shaunsephton/django-ckeditor ,下載後進入目錄安裝java

django-ckeditor-master bamboo$ sudo python setup.py install

   1.2 安裝 Pillowpython

django-ckeditor-master bamboo$ easy_install Pillow
sudo ARCHFLAGS=-Wno-error=unused-command-line-argument-hard-error-in-future easy_install Pillow

  2.在Django中進行配置

  setting.py 文件git

  添加 ckeditor 到 INSTALLED_APPS 中github

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'aaa', # 添加應用aaa
    'bob', # 添加應用bbb
    'ckeditor', # 添加應用富文本編輯器 ckeditor
)

  static 和 media 的路徑設置django

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static') 

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

  CHEDITOR_UPLOAD_PATH 指定經過ckeditor所上傳的文件的存放目錄。session

  2.1 在admin中看到編輯頁面編輯器

  urls.py 文件中,設置ckeditor的urlurl

url(r'^ckeditor/', include('ckeditor.urls')), # 引入ckeditor

  models.py 文件中

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

class Article(models.Model):
    '''日誌'''
    title = models.CharField(verbose_name='標題', max_length=150, blank=False, null=False)
    content = RichTextField('正文') # 使用ckeditor中的RichTextField

  配置完成後,便可在admin的頁面中看到富文本編輯器的界面

  2.2 在前臺頁面中看到ckeditor界面

  將安裝目錄中的ckeditor 複製到static

static bamboo$ cp -ri /Library/Python/2.7/site-packages/django_ckeditor_updated-4.2.8-py2.7.egg/ckeditor/static/* /Users/workspace/myblog/static/

  在 write.html頁面中添加JS

<script type="text/javascript" src="/static/ckeditor/ckeditor/ckeditor.js"></script>

  在顯示頁面view.html中添加 safe 標籤

{{ article.content|safe }}

 

  參考資料:

  基於django的博客系統如何完美地使用富文本編輯器ckeditor?    http://www.nanerbang.com/article/2/

  關於在django下使用ckeditor的步驟和技巧 http://blog.163.com/zhulp0372@yeah/blog/static/115894479201172422439697/

相關文章
相關標籤/搜索