网站首页 文章专栏 话django admin模块嵌入富文本编辑 kindeditor
话django admin模块嵌入富文本编辑 kindeditor
编辑时间:2017年4月19日 18:23 作者:赵彦昌 浏览量:5511

为了最大简化开发方法 和进度,在开发本网站 的时候,我选择了后台直接拿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里面做如下修改: 
















#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);

上面的那个 '#id_content' 其中的 content 是你要添加上去models 字段
别看了,快动手吧。你行
来说两句吧
最新评论
  • 未知
    未知
    欢迎大家,请我留言[话筒]

    为什么我这里不行
    为什么我这里不行回复
    为什么我这里不行
    2017-04-20 21:28