操作系统为OS X 10.9.2,Django为1.6.5.

  1.下载和安装

  1.1 安装 ckeditor

  下载地址 https://github.com/shaunsephton/django-ckeditor ,下载后进入目录安装

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

  1.2 安装 Pillow

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 文件

  添加 ckeditor 到 INSTALLED_APPS 中

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 的路径设置

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所上传的文件的存放目录。

  2.1 在admin中看到编辑页面

  urls.py 文件中,设置ckeditor的url

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/

  

Django实现的博客系统中使用富文本编辑器ckeditor的更多相关文章

  1. Django后台管理admin或者adminx中使用富文本编辑器

    在admin或者adminx后台中使用富文本编辑器 一.建立模型:(安装django-tinymce==2.6.0) from django.db import models from tinymce ...

  2. Django中使用富文本编辑器Uedit

    Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...

  3. flask项目中使用富文本编辑器

    flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...

  4. 在MVC3中使用富文本编辑器:KindEditor的配置及上传图片

    现在比较常用的富文本编辑挺多的,如ueditor.fckeditor.kingeditor等,本文主要介绍一下KindEditor的配置与使用. 先去官网http://www.kindsoft.net ...

  5. ASP.NET MVC 5 中 使用富文本编辑器 Ueditor

    一.Ueditor插件下载自:http://ueditor.baidu.com/website/ 二.将解压文件目录ueditor复制到项目根目录后, 修改以下几个文件配置: 1.访问路径配置:ued ...

  6. Django:(博客系统)使用使用mysql数据->后台管理tag/post/category的配置

    Django后台一般是不需要人为的去开发的,因为django已经通过配置实现哪些模块是后台需要管理,如何排序,列表展示哪些列,列显示名称,是否为空(默认值),过滤条件,分页页数,列表中哪些项可编辑等等 ...

  7. Django快速搭建博客系统

    Django快速搭建博客系统 一.开发环境 Windows 7(64bit) python 3.6   https://www.python.org/ Django 2.0  https://www. ...

  8. Django使用富文本编辑器

    1.下载kindeditor 网址:http://kindeditor.net/demo.php2.解压到项目中 地址:\static\js\kindeditor-4.1.103.删除没用的文件 例如 ...

  9. django-应用中和amdin使用富文本编辑器kindeditor

    文章描述.新闻详情和产品介绍等,都需要大量的文字描述信息或图片.视频.文字的编辑等,这个时候我们就需要介绍第三方富文本编辑器. 今天介绍的是django中绑定和应用kindeditor编辑器: 效果如 ...

随机推荐

  1. a标签点击后更改颜色

    function choose(id){ document.getElementById("typeid").value = id; //var infoa=document.ge ...

  2. Codeforces Round #510 #C Array Product

    http://codeforces.com/contest/1042/problem/C 给你一个有n个元素序列,有两个操作:1,选取a[i]和a[j],删除a[i],将$a[i]*a[j]$赋值给a ...

  3. LeetCode 岛屿的最大面积

    给定一个包含了一些 0 和 1的非空二维数组 grid , 一个 岛屿 是由四个方向 (水平或垂直) 的 1 (代表土地) 构成的组合.你可以假设二维矩阵的四个边缘都被水包围着. 找到给定的二维数组中 ...

  4. perl学习之:shift/unshift

    perl中shift 和unshift 操作 2008-02-02 11:18:04|  分类: Perl语言|举报|字号 订阅     ############################### ...

  5. 【linux】【mysql】CentOS7安装mysql5.6.26

    http://www.cnblogs.com/dreamhome/p/4716425.html     linux系统CentOS7到http://mirrors.sohu.com/mysql/下载想 ...

  6. PAT Basic 1071

    1071 小赌怡情 常言道“小赌怡情”.这是一个很简单的小游戏:首先由计算机给出第一个整数:然后玩家下注赌第二个整数将会比第一个数大还是小:玩家下注 t 个筹码后,计算机给出第二个数.若玩家猜对了,则 ...

  7. BZOJ 4557: [JLoi2016]侦察守卫

    题目大意:每个点有一个放置守卫的代价,同时每个点放置守卫能覆盖到的距离都为d,问覆盖所有给定点的代价是多少. 题解: 树形DP f[x][y]表示x子树中所有点都已经覆盖完,并且x还能向上覆盖y层的最 ...

  8. Java-获取堆的大小

    package com.tj; public class getHeapInfo { public static void main(String[] args) { //获取当前堆的大小 byte ...

  9. json分享

    JSON是什么? JavaScript Object Notation (JSON) is a text format for the serialization of structured data ...

  10. angular 组件之间传值

    /** * Created by Administrator on 2017/8/28. */ var app =angular.module('app',[]); app.directive('fo ...