文档章节

Django Admin:添加富文本编辑器kindeditor

梦梦阁
 梦梦阁
发布于 2017/08/09 11:35
字数 584
阅读 42
收藏 0

1. kindeditor简介:

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

2.在Django Admin当中加入KindEditor

加入之后的效果如下,这比干巴巴的textarea好多了。

KindEditor效果图.png

2.1. 设置static文件路径

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

# 指定在模板中添加static文件的猴子
STATIC_URL = '/static/'

# 指定静态文件夹所在的路径
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

2.2. 下载KindEditor

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

2.3. 在文本输入域的html中添加运行KindEditor 相对应的JavarScript

在官网的使用说明上可以看到

为html的文本输入框添加KindEditor.png


现在的问题是怎么在admin后台管理当中的html页面加入JavaScript代码,答案就是在admin.py中的的管理类中添加class Media,引入js文件。创建kindeditor的,在kindeditor-4.1.7目录下创建出config.js文件。textarea的id登陆admin后,查看元素即可获取。

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

        // 指定大小
        width:'800px',
        height:'200px',
    });
});
#admin.py
from django.contrib import admin
from kindeditor.models import Article

# Register your models here.

@admin.register(Article)
class ArticleAdmin(admin.ModelAdmin):

    list_display = ('title',)

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

 

本文转载自:http://www.jianshu.com/p/d03297bf2d54

梦梦阁
粉丝 27
博文 302
码字总数 172850
作品 0
嘉定
高级程序员
私信 提问
Django轻松使用富文本编辑器-KindEditor

Django轻松使用富文本编辑器-KindEditor 由于需要在django admin中使用到富文本编辑器,由于我比较喜欢KindEditor,于是写了个自定义widget 1、首先从KindEditor主页下载,并解压至你的stati...

KavenSu
2014/06/04
0
1
kindeditor添加字节计算方法,解决中文字节数问题

前情提要:项目中使用kindeditor做富文本编辑器,但是中文在数据库中占用3个字节,英文是1个字节,而p标签换行标签也各自占用对应的代码长度字节. kindeditor版本 @version 4.1.2 (2012-07-21) ...

狄龙-
2012/10/08
0
0
KindEditor的初始化问题

在项目开发中,需要使用富文本编辑器,就是现在在编辑时用到的工具。 但是需求是这样的, 用户一开始看到的就是一个普通的textarea,当用户点击这个textarea时, 显示为kindeditor编辑器格式...

西昆仑
2013/06/03
2.5K
6
Kindeditor 修改内容时如何不让 < 被自动转义

本人新手,用PHP&MySQL写了个文章发布系统,富文本编辑器使用的是Kindeditor。 症状说明: 我想通过编辑器发些代码,添加文章时可以正常发代码,包括 < 也被正常转义为 < ,保存到数据库中也...

OSC老司机
2011/08/15
11.1K
8
在PHP使用kindeditor

[版本说明:kindeditor-4.0.6(下载https://code.google.com/p/kindeditor/downloads/list),php-5.2.14+Zend Framework] 1.简介 KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在...

酒肉穿肠过
2013/03/18
0
12

没有更多内容

加载失败,请刷新页面

加载更多

android6.0源码分析之Camera API2.0下的Preview(预览)流程分析

本文将基于android6.0的源码,对Camera API2.0下Camera的preview的流程进行分析。在文章android6.0源码分析之Camera API2.0下的初始化流程分析中,已经对Camera2内置应用的Open即初始化流程进...

天王盖地虎626
6分钟前
0
0
java 序列化和反序列化

1. 概述 序列恢复为Java对象的过程。 对象的序列化主要有两 首先我们介绍下序列化和反序列化的概念: 序列化:把Java对象转换为字节序列的过程。 反序列化:把字节序列恢复为Java对象的过程。...

edison_kwok
17分钟前
0
0
分布式数据一致性

狼王黄师傅
59分钟前
1
0
经验

相信每位开发者在自己开发的过程中,都会反思一些问题,比如怎样提高编程能力、如何保持心态不砍产品经理、996 之后怎样恢复精力……最近开发者 Tomasz Łakomy 将他 7 年的开发生涯中学习到...

WinkJie
今天
4
0
从源码的角度来看SpringMVC

SpringMVC核心流程图 简单总结 首先请求进入DispatcherServlet 由DispatcherServlet 从HandlerMappings中提取对应的Handler 此时只是获取到了对应的Handle,然后得去寻找对应的适配器,即:H...

骚年锦时
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部