Django添加富文本编辑器kindeditor

kindeditor简介:
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

在Django Admin当中加入KindEditor
加入之后的效果如下,这比干巴巴的textarea好多了。

1、设置static文件路径
KindEditor是用JavaScript编写的,这属于static files,因此需要为Django设置static路径。 首先在工程目录下新建static文件夹,这里要注意的是千万不要在my_app/下创建static文件夹作为static文件存放的目录, 这会导致Django无法搜索到自己的static 文件。创建后好,在settings中配置static文件目录。添加以下代码

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)
  1. 下载KindEditor
    下载KindEditor, 解压后将那些没用的asp, asp.NET, php, jsp, examples文件该删掉后拷贝到static目录下,由于KindEditor是js文件有事编辑器,所以就设置了js/editor目录,并将KindEditor代码拷贝到该目录下。就像这样子static/js/editor/kindeditor-4.1.7。

  2. 在admin后台管理当中的html页面加入JavaScript代码
    在kindeditor-4.1.7目录下新建config.js文件,内容如下:

KindEditor.ready(function(K) {
    window.editor = K.create('#id_content',{

        // 指定大小
        width:'800px',
        height:'200px',
    });
});

4、在admin.py中的的管理类中添加class Media,引入js文件
这里是一个完整的admin.py示例
备注:class 一定要在admin.site.register前面,不然程序会报错,显示没有define

from django.contrib import admin
from .models import category,tags,article

# Register your models here.

class articleAdmin(admin.ModelAdmin):
    list_display = ('id','title','create_time','change_time','type') #添加字段显示
    search_fields = ('title') #添加快速查询栏

    class Media:
        # 在管理后台的HTML文件中加入js文件, 每一个路径都会追加STATIC_URL/
        js = (
            '/static/js/editor/kindeditor-4.1.7/kindeditor-all.js',
            '/static/js/editor/kindeditor-4.1.7/lang/zh_CN.js',
            '/static/js/editor/kindeditor-4.1.7/config.js',
        )


admin.site.register(category)
admin.site.register(tags)
admin.site.register(article,articleAdmin)
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值