操作系统为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 RichTextFieldclass 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/

  

转载于:https://www.cnblogs.com/zifenger/p/3904536.html

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

  1. Django 3.2.5博客开发教程:使用富文本编辑器添加数据

    在Django admin后台添加数据的时候,文章内容文本框想发布一篇图文并茂的文章需就得手写Html代码,这十分吃力,也没法上传图片和文件.这显然不是我等高大上程序猿想要的. 为提升效率,我们可以使 ...

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

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

  3. vue获取编辑器纯文字_vue中使用富文本编辑器

    前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...

  4. 在Django项目中使用富文本编辑器

    2019独角兽企业重金招聘Python工程师标准>>> 1 开发要点 现在网上有很多的富文本编辑器,包括Markdown.tinymce.UEditor.KindEditor.cke ...

  5. [ssh新闻发布系统四]使用富文本编辑器发布新闻

    使用表单不能编辑新闻格式,这篇博客会介绍如何使用ueditor富文本编辑器来编辑新闻.使用ueditor编辑的新闻存储到数据库中的是html代码,并且带有css样式,在后台可以像编辑word一样编辑新 ...

  6. react中使用富文本编辑器,发布文章

    初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 富文本编辑器,在开发中是常用的,下面直接进入正题了: 1. ...

  7. vue中使用富文本编辑器wangEditor及踩坑

    因为上传图片的问题使用过了各种富文本,最后发现还是这个比较好用.分享记录一下. 安装 npm install wangeditor --save 新建一个wangeditor.vue(组件),代码内容 ...

  8. ThinkPHP框架中使用富文本编辑器后如何输出

    htmlspecialchars_decode()用这个能解析里面的符号 我们在利用ThinkPHP提交数据的时候,数据库里的数据是含各种html标签的,那么在输出时就可以直接输出嘛.但是,也许你的老 ...

  9. React中使用富文本编辑器Quill,支持粘贴图片

    最近项目中需要用到富文本编辑器,并且客户明确提出需要实现可以直接截图粘贴到文本框中. 由于我们的前端是用react写的,于是就去参考了知乎的实现,发现知乎的富文本框是可以直接贴图进去的,但由于看不到源 ...

最新文章

  1. CentOS 配置epel源
  2. MySQL数据库备份(INTO OUTFILE)
  3. 回溯法之避免无用判断 UVA129 Krypton Factor困难的串
  4. hdu 4049 Tourism Planning [ 状压dp ]
  5. 机器人J中WPR_优傲:协作机器人的未来在哪里?
  6. Ubuntu truffle框架安装
  7. (25)System Verilog设计秒闪灯电路
  8. H3C和cisco单臂路由和三层交换机实现VLAN之间的互通
  9. 拓端tecdat|R语言进行数值模拟:模拟泊松回归模型的数据
  10. win10安装steam有损计算机,Win10安装steam平台提示“steam fatal error”报错的解决方法...
  11. oracle执行计划分析
  12. 原理 拉普拉斯金字塔_十三 高斯金字塔和拉普拉斯金字塔
  13. 测试用例设计-颗粒度
  14. 7寸显示器 树莓派4b_基于树莓派4B显示屏分类
  15. 控制计算机桌面图标,(1)在桌面上显示“计算机”“控制面板”图标,然后隐藏“控制面板”图标。...
  16. 关于Vivado综合选项——Out of context per IP和Gobal
  17. 【图像融合】基于matlab主成分结合小波离散变换PCA-DWT图像融合【含Matlab源码 2199期】
  18. 中国历史朝代 英文翻译 A Brief Chinese Chronology
  19. 【宝塔面板建站】10分钟windows宝塔面板一键部署安装wordpress,无需服务器和域名本地运行(保姆级图文)
  20. 给oracle scott权限,Oracle Scott创建视图权限不足解决办法

热门文章

  1. 【Linux】一步一步学Linux——ld命令(256)
  2. 【Tools】C/C++开发SDK下载汇总
  3. wangEditor Java富文本的图片上传
  4. 如何出(改编)一道ACM算法题?
  5. nbu还原oracle,NBU恢复oracle
  6. iTunes 降级安装 12.6
  7. POJ 2229 Sumsets
  8. pytorch选出数据中的前k个最大(最小)值及其索引
  9. win7 easybcd 安装centos7.5 双系统
  10. c语言复化求积公式程序,第六章 函数与宏定义实验2