Django后台admin中kindeditor富文本编辑器简单使用

第一步:到官网上下载kindeditor

第二步:解压,删除多余文件asp,asp.net,jsp,php.在django中这些都没用。 

第三步:将删除后的文件引入到项目目录”static/js“ 并且在kindeditor目录下添加一个config.js文件  如下图:

在config.js中配置:

KindEditor.ready(function(K) {
        window.editor = K.create('textarea[name=text]', {
        // K.create('#id_text', {
            width: '600px',
            height: '200px',
        });
});

其中'textarea[name=text]'、'#id_text', 在admin后台通过F12,找到要添加富文本编辑器元素的name或id,可以用'textarea[name=text]'或'#id_text'方式

第四步:在admin.py中对应的modeladmin添加Media:

    class Media:
        js = (
            '/static/js/kindeditor/kindeditor-all.js',
            '/static/js/kindeditor/lang/zh_CN.js',
            '/static/js/kindeditor/config.js'
        )

第五步:在setting中进行配置,不然出不来

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

可以看到效果如下:

但现在上传图片功能还不能使用,因为并没有处理文件上传按钮。

猜你喜欢

转载自blog.csdn.net/xhyue_0209/article/details/88102933