网站首页 文章专栏 话django admin模块嵌入富文本编辑 kindeditor
为了最大简化开发方法 和进度,在开发本网站 的时候,我选择了后台直接拿django admin 来用,但文章编辑需要富文本编辑啊,这个‘富文本编辑器’还是上年,在疯子(谐音)公司听说的。
最初想选择用百度的富文本编辑器,不知道怎么的就是打不开百度富文本编辑器的官网,只好作罢。然,度娘是个好东西。经她介绍下,我让发现kindeditor .话不多说,接下来。和大家一起让django admin 也支付富文本编辑,(网上不乏这类教程。但这里提醒一点,你跟着他们的教程,是可以做好,但,但,但,CSRF ,上传文件的CSRF,你们做成了吗?虽,网上教程有提及,但,但,但,他们写不对,不对,写的不对[回声请见谅]!!!)
首先第一点,下载kindeditor: 这里
放在哪?这个用我说吗?(当然 是django app 下面的static 目录下面,最重要的还是看你在settings.py 里面的STATIC_URL)
STATIC_URL = '/static/'
接下来第二点:
比如 这是你的model 类
#models.py class Article(models.Model): category = models.ForeignKey(ArticleCategory,related_name='articale',verbose_name='文章类别') title = models.CharField('文章名称', max_length=100) tags = models.CharField('文章标签', max_length=120, null=True, blank=True) abstract = models.CharField('摘要', max_length=300,blank=True, null=True) content = models.TextField('文章内容', default=None) img = ImageWithThumbsField('文章可观性图片', upload_to=generate_filename, default='static/article/Thumbnails/no-img.jpg', sizes=((138,53),)) pageviews = models.IntegerField('文章浏览量', default=0) likes = models.PositiveIntegerField('点赞数', default=0) relycount = models.PositiveIntegerField('回复量', default=0) #临时字段不需要数据库操作 isstick = models.IntegerField('是否顶置',default=0) #0为普通, 1为置顶 stickposition = models.IntegerField('置顶位置',default=0) #以十的余数,最多十个置顶 timemodify = models.DateTimeField(auto_now=True) # 修改时间 timestamp = models.DateTimeField(auto_now_add=True) # 创建时间 def __unicode__(self): return self.title def __str__(self): return self.title class Meta: verbose_name_plural = verbose_name = '文章'
#admin.py from .models import Article #之前 admin.site.register(Article)
现在你需要在些类的同app下admin.py里面做如下修改:
上面的那个 '#id_content' 其中的 content 是你要添加上去models 字段#admin.py from .models import Article #之前 #admin.site.register(Article) 要注释掉!!! @admin.register(Article) class ArticleAdmin(admin.ModelAdmin): list_display = ('title','pageviews') class Media: # 在管理后台的HTML文件中加入js文件, 每一个路径都会追加STATIC_URL/ js = ( '/static/js/kindeditor/kindeditor-all-min.js', '/static/js/kindeditor/zh_CN.js', '/static/js/kindeditor/config.js', )# /static/js/kindeditor/config.js var csrfitems = document.getElementsByName("csrfmiddlewaretoken"); var csrftoken = ""; var KK; KindEditor.ready(function(K){ KK = K; }); function searchtoken() { if (csrfitems.length > 0) { csrftoken = csrfitems[0].value; clearInterval(_interval); console.log("csrftoken:" + csrftoken); window.editor = KK.create('#id_content',{ uploadJson: '/kin/uploadImg/', extraFileUploadParams: { csrfmiddlewaretoken:csrftoken }, // 指定大小 width:'800px', height:'400px', }); } } //最重要就是下面这个函数,不然,获取不到csrftoken ,目测网上的教程都没提到这一点 _interval = setInterval(searchtoken, 500);
别看了,快动手吧。你行
2017-04-20 21:28回复