Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为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相关推荐
- Django 3.2.5博客开发教程:使用富文本编辑器添加数据
在Django admin后台添加数据的时候,文章内容文本框想发布一篇图文并茂的文章需就得手写Html代码,这十分吃力,也没法上传图片和文件.这显然不是我等高大上程序猿想要的. 为提升效率,我们可以使 ...
- Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
- vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
- 在Django项目中使用富文本编辑器
2019独角兽企业重金招聘Python工程师标准>>> 1 开发要点 现在网上有很多的富文本编辑器,包括Markdown.tinymce.UEditor.KindEditor.cke ...
- [ssh新闻发布系统四]使用富文本编辑器发布新闻
使用表单不能编辑新闻格式,这篇博客会介绍如何使用ueditor富文本编辑器来编辑新闻.使用ueditor编辑的新闻存储到数据库中的是html代码,并且带有css样式,在后台可以像编辑word一样编辑新 ...
- react中使用富文本编辑器,发布文章
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 富文本编辑器,在开发中是常用的,下面直接进入正题了: 1. ...
- vue中使用富文本编辑器wangEditor及踩坑
因为上传图片的问题使用过了各种富文本,最后发现还是这个比较好用.分享记录一下. 安装 npm install wangeditor --save 新建一个wangeditor.vue(组件),代码内容 ...
- ThinkPHP框架中使用富文本编辑器后如何输出
htmlspecialchars_decode()用这个能解析里面的符号 我们在利用ThinkPHP提交数据的时候,数据库里的数据是含各种html标签的,那么在输出时就可以直接输出嘛.但是,也许你的老 ...
- React中使用富文本编辑器Quill,支持粘贴图片
最近项目中需要用到富文本编辑器,并且客户明确提出需要实现可以直接截图粘贴到文本框中. 由于我们的前端是用react写的,于是就去参考了知乎的实现,发现知乎的富文本框是可以直接贴图进去的,但由于看不到源 ...
最新文章
- CentOS 配置epel源
- MySQL数据库备份(INTO OUTFILE)
- 回溯法之避免无用判断 UVA129 Krypton Factor困难的串
- hdu 4049 Tourism Planning [ 状压dp ]
- 机器人J中WPR_优傲:协作机器人的未来在哪里?
- Ubuntu truffle框架安装
- (25)System Verilog设计秒闪灯电路
- H3C和cisco单臂路由和三层交换机实现VLAN之间的互通
- 拓端tecdat|R语言进行数值模拟:模拟泊松回归模型的数据
- win10安装steam有损计算机,Win10安装steam平台提示“steam fatal error”报错的解决方法...
- oracle执行计划分析
- 原理 拉普拉斯金字塔_十三 高斯金字塔和拉普拉斯金字塔
- 测试用例设计-颗粒度
- 7寸显示器 树莓派4b_基于树莓派4B显示屏分类
- 控制计算机桌面图标,(1)在桌面上显示“计算机”“控制面板”图标,然后隐藏“控制面板”图标。...
- 关于Vivado综合选项——Out of context per IP和Gobal
- 【图像融合】基于matlab主成分结合小波离散变换PCA-DWT图像融合【含Matlab源码 2199期】
- 中国历史朝代 英文翻译 	 A Brief Chinese Chronology
- 【宝塔面板建站】10分钟windows宝塔面板一键部署安装wordpress,无需服务器和域名本地运行(保姆级图文)
- 给oracle scott权限,Oracle Scott创建视图权限不足解决办法