django教你如何轻松使用富文本编辑器CKEditor
原创
417
最近由于需要在django admin中使用到富文本编辑器，由于我比较喜欢CKEditor富文本编辑器，于是就有了这篇文章，下面这篇文章主要给大家介绍了在django中轻松使用富文本编辑器CKEditor的方法，需要的朋友可以参考下。前言django是一个容易快速上手的web框架，用它来创建内容驱动型的网站（比如独立博客）十分方便。遗憾的是，django并没有提供官方的富文本编辑器，而后者恰好是内容型网站后台管理中不可或缺的控件。ckeditor是一款基于javascript，使用非常广泛的开源网页编辑器。它可以和多种编程语言相结合，python当然也不例外。本文就来介绍一下如何在基于django博客系统如何完美地用上ckeditor。使用方法1、安装pip install django-ckeditor2、将‘ckeditor'settings.py中的INSTALLED_APPS3、由于djang-ckeditor在ckeditor-init.js文件中使用了JQuery，所以要在settings.py中设置CKEDITOR_JQUERY_URL来指定JQuery库的路径，例如:CKEDITOR_JQUERY_URL ='https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'4、设定STATIC_ROOT，执行python manage.py collectstatic,将CKEditor需要的媒体资源拷入STATIC_ROOT指定的路径中。STATIC_ROOT = os.path.join(BASE_DIR,'static/')5、from django.db import models
from ckeditor.fields import RichTextField
class Blog(models.Model):
title = models.CharField(max_length=50,verbose_name=&标题&)
content = RichTextField(blank=True,null=True,verbose_name=&内容&)
def __unicode__(self):
return self.name效果:文件上传1、在settings.py中的INSTALLED_APPS中添加ckeditor_uploader2、CKEditor使用Django的存储API，默认使用Django的文件存储,会用到MEDIA_ROOT和MEDIA_URL，需要在settings.py中定义，此外还可以指定CKEDITOR_UPLOAD_PATH，它位于MEDIA_ROOT下:MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media/')
CKEDITOR_UPLOAD_PATH = 'uploads/'3、在项目的urls.py中添加CKEditor的URL映射url(r'^ckeditor/', include('ckeditor_uploader.urls')),如果不加，可能会出现以下错误:4、（可选项） 在settings.py中加入CKEDITOR_IMAGE_BACKEND ,使能thumbnails，例如:CKEDITOR_IMAGE_BACKEND = 'PIL'from ckeditor_uploader.fields import RichTextUploadingField
class Post(models.Model):
content = RichTextUploadingField()总结以上就是django教你如何轻松使用富文本编辑器CKEditor的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
本课以最新版ThinkPHP5.0.10为基础进行开发，全程实录一个完整企业点，从后台到前台，从控制器到路由的全套完整教程，不论是你是新人，还是有一定开发经验的程序员，都可以从中学到实用的知识~~
ThinkPHP是一个快速、开源的轻量级国产PHP开发框架，是业内最流行的PHP框架之一。本课程以博客系统为例，讲述如何使用TP实战开发，从中学习Thinkphp的实践应用。模版下载地址：http:/...
本课程是php实战开发课程，以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程
本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能，以及具体的实现方法，让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。
javascript是运行在浏览器上的脚本语言，连续多年，被评为全球最受欢迎的编程语言。是前端开发必备三大法器中，最具杀伤力。如果前端开发是降龙十八掌，好么javascript就是第18掌：亢龙有悔。...
本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了，赶紧看看吧，说不定这里就有你的菜
轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力
JavaScript能够称得上是史上使用最广泛的编程语言，也是前端开发必须掌握的三技能之一：描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单，所有开发者都能快速上手...
《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始，增加验证码，cookie验证等，丰富网站的登录注册功能
《php.cn独孤九贱（2）－css视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了CSS知识...
《PHP学生管理系统视频教程》主要给大家讲解了HTML，PHP，MySQL之间的相互协作，实现动态的网页显示和获取数据.
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的...
《弹指间学会HTML视频教程》从最基本的概念开始讲起，步步深入，带领大家学习HTML,了解各种常用标签的意义以及基本用法，学习HTML知识为以后的学习打下基础
《最新微信小程序开发视频教程》本节课程是由微趋道录制，讲述了如何申请一个微信小程序，以及开发中需要使用哪些工具，和需要注意哪些等。
PHP开发工程师
文章总浏览数【跟谁学社区】-学习论坛_学习小组_兴趣小组
话题小组123帮你解决孩子教育和妈妈成长问题NEW「职说Talk」，专属职场人学习的平台。NEW领先的高考状元培养社群。NEW外教爸爸双语宝宝让0-12岁儿童爱上英语三岁看小，七岁看老，家庭教育至关重要！这里有你想要的咨询，快来加入吧！嗨！We are 伐木累！一起打造嗨皮高中生活~~来找到与你相知的那一群人！情调的生活，钱多多的职场，都是我们的！张开梦想的翅膀，我们飞向新世界！粉丝互动、建议反馈，嗨起来~中国爱乐乐团第一小提琴手高中小海量资料，坚持看一年，英语会改变30年成就3000万人魅力表达、身心富足瑜伽，让你遇到最美丽的自己！解析高考招生政策，介绍大学和专业最简单方法。分数+ 能力，语言+ 逻辑。三分长相 七分打扮 会打扮的女人最好命！既然选择远方，便只顾风雨兼程关于日语、关于日本，一起聊聊吧每天都离法国更近一点在喧嚣的世界中打造一片心灵的净土！爱美术，爱生活每日变换自己的装束，分享你的美！蹦沙卡拉卡～帅哥美女看这里～大千世界，总有你不知道的事～热门帖子17279163222142612021102210341340001011110411000021010121...hi，欢迎来到跟谁学社区登录
关注我们官方微信关于跟谁学服务支持帮助中心在这里风儿横行~~
Django项目中集成富文本编辑器的通用方法,适合KindEditor,xhEditor,NicEditor,wymeditor等
首先,请参考我以前写的一篇博客:如何把nicEditor集成到django中使用
这篇文章中的做法就是一种较为通用的做法.
现在按照这种做法来把 KindEditor 集成到django项目中使用:
1. 代码的组织
在项目根目录下,使用manage.py startapp rte 新建一个文件夹,叫做rte,意思是RichTextEditor的缩写.然后在rte目录下新建kindeditor文件夹,如果你想用NicEditor就新建一个niceditor,可能还有xheditor等等.每个下面放一个__init__.py表明他们是可以被导入的模块.
目录结构就是这样:
__init__.py
__init__.pyc
├─kindeditor
widgets.py
widgets.pyc
__init__.py
__init__.pyc
└─niceditor
widgets.py
widgets.pyc
__init__.py
__init__.pyc
还有就是模板的放置,我的做法是放在templates下
|-- editor
kindeditor.html
niceditor.html
xheditor.html
等等诸如此类
2.自定义widget
就是建立一个KindEditor类，继承于Textarea（forms.Textarea),代码如下：
文件名称:rte/kindeditor/widgets.py
from django import forms
from django.conf import settings
from django.utils.safestring import mark_safe
from django.template.loader import render_to_string
from django.template import RequestContext
from django.utils.translation import ugettext_lazy as _
class KindEditor(forms.Textarea):
class Media:
settings.MEDIA_URL + 'editor/kindeditor-4.0.1/themes/default/default.css',
settings.MEDIA_URL + 'editor/kindeditor-4.0.1/plugins/code/prettify.js',),
"%seditor/kindeditor-4.0.1/kindeditor.js" % settings.MEDIA_URL,
settings.MEDIA_URL + 'editor/kindeditor-4.0.1/plugins/code/prettify.js',
def __init__(self, attrs = {}):
#attrs['style'] = "width:800height:400visibility:"
super(KindEditor, self).__init__(attrs)
def render(self, name, value, attrs=None):
rendered = super(KindEditor, self).render(name, value, attrs)
context = {
'name': name,
'MEDIA_URL':settings.MEDIA_URL,
return rendered
+ mark_safe(render_to_string('editor/kindeditor.html', context))
以上的KindEditor版本,我用的是当前最新的4.0.1的版本.
3.'editor/kindeditor.html'这个模板的内容:
主要内容还是像最上面介绍的那篇文章中一样,只是一点js代码,用来把textarea转成一个在线html编辑器.使用的就是KindEditor的功能,主要内容如下:
&script type="text/javascript"&
KindEditor.ready(function(K) {
var options = {
cssPath : ('{{MEDIA_URL}}editor/kindeditor-4.0.1/themes/default/default.css',
'{{MEDIA_URL}}editor/kindeditor-4.0.1//plugins/code/prettify.css')
width : '680px',
height : '400px',
filterMode : true
var editor = K.create('textarea[name="content"]', options);
注意,一定要使用KindEditor这个变量来初始化富文本编辑器,Kindeditor官方网站上有的文档没有及时更新,如果使用什么KE.show的,或者大写K的,都不要用,chrome下调试就会提示KE未定义,K未定义等等.以上options中的内容请参考KindEditor的官方文档,这些东西也可以在widgets.py中预先定义好,但是我觉得不如在模板文件中定义方便.
4.在某个app的forms.py中定义一个form,不管前台后台都能用:
文件名示例:ddtcms\blog\forms.py
from django import forms
from django.utils.translation import ugettext_lazy as _
from ddtcms.blog.models import Blog
from rte.kindeditor.widgets import KindEditor
class MyBlogAdminForm(forms.ModelForm):
= forms.CharField(label=_(u"Content"), widget=KindEditor(attrs={'rows':15, 'cols':100}),required=True)
class Meta:
model = Blog
这个一定要使用forms.ModelForm,这样才能在admin中和view中使用,如果只是是在view中使用,这可以不用forms.ModelForm.
其他app的forms.py中要使用KindEditor的地方都是按照上面第4条说的弄.东西到这里基本上结束了,是不是很方便?
像xheditor,wymeditor等等都可以像这样弄,大家可以自己试试.方法就按本文介绍的来.
附:码农Ken写了一篇"Django轻松使用富文本编辑器-KindEditor":
这篇文章的问题主要是:
1.kindeditor升级了,他的还没动,所以直接复制使用会发现KE未定义.
2.问题就出在js和模板继承上.
那个文章要修改的地方有:js部分,因为KE好像在4.0.1版本中未定义,需要这样用了:
&script type="text/javascript"&
KindEditor.ready(function(K) {
var options = {
cssPath : ('{{MEDIA_URL}}editor/kindeditor-4.0.1/themes/default/default.css',
'{{MEDIA_URL}}editor/kindeditor-4.0.1/plugins/code/prettify.css')
width : '680px',
height : '400px',
filterMode : true
var editor = K.create('textarea[name="content"]', options);
因为要使用code语法高亮,kindeditor使用的是prettyprint这个模块,所以这里加了prettify.css-------------还有那个模板,继承自admin/change_form.html
会导致一种错误,Caught KeyError while rendering: 'opts' in admin interface.这个问题在StackOverflow也有人问起:
但是解答不一定能让人满意,把那个模板放到{%block content%}中或许不报错,但是界面就乱了.
本来我是打算按照码农的文章中的方法来把KindEditor应用到我的django项目中的,不过调试了几个小时之后,没有成功.
我最后是按照上面写的老方法重新改写了widgets,还是像我以前封装niceditor那样,widget自己render.
正所谓,老方法造新篇,老经验解新难题!!!
各位看官,请多提意见!
没有更多推荐了，任何质变都来自于量变的积累!
Django在admin后台集成TinyMCE富文本编辑器
Django原生的TextField并不友好，集成TinyMCE富文本编辑器Django版本：1.11.5TinyMCE版本：4.6.7第一步：从官网下载TinyMCE注意下载的是下面那个开发包，Dev Package。此包包含TinyMCE社区，开发工具和完整的源代码。第二步：把压缩包内tinymce目录内的所有文件和文件夹复制到Django项目中static目录内：第三步：编辑 admin.py 文件：from .models import Category, Tag, Blog, Comment
class AdminFormTinyMCE(admin.ModelAdmin):
class Media:
"//cdn.bootcss.com/jquery/2.2.4/jquery.min.js",
"/static/js/tinymce/jquery.tinymce.min.js",
"/static/js/tinymce/tinymce.min.js",
"/static/js/tinymce/textareas.js",
admin.site.register([Blog,Comment,Category,Tag], AdminFormTinyMCE)注：Category, Tag, Blog, Comment是在model.py定义的模型，如果想要在admin后台显示并编辑，就导入。第三步：在 static/js/tinymce 文件夹中新建 textareas.js 文件：加入如下代码：注：这里只是简单的样式，具体的需要的插件或其他功能都从这里配置tinymce.init({
selector: "textarea",
theme : "modern",
});重新运行Django，已经可以在后台看到TinyMCE富文本编辑器了：
没有更多推荐了，django添加富文本编辑器
django后台添加富文本编辑器
没有富文本编辑器，那个写出来的东西真是太丑陋了。而且只能是文字，不能添加图片，不能加入一些表情。
那么我们开始吧：使用KindEditor,一个小巧的编辑器。
1.首先到Kindeditor官网（） 下载 最新版本。
2.解压将其考入服务器文件中。我这里将其拷入JS文件夹中。
3.部署编辑器，在django的Admin类中添加引用。我这里就时这样啦，因为要用的是关于建立文章。
4.我们需要在kindeditor-4.1.10中建立一个配置文件config.js,添加内容
KindEditor.ready(function(K) {
K.create(‘#editor_id’);
在使用编辑器的位置把id替换上去。我的是：
-**KindEditor.ready(function(K) {
K.create(‘textarea[name=content]’,{
width:800,
height:200,
然后就大公告成啦！
没有更多推荐了，