文档章节

Django轻松使用富文本编辑器-KindEditor

KavenSu
 KavenSu
发布于 2014/06/04 23:07
字数 316
阅读 1722
收藏 5

Django轻松使用富文本编辑器-KindEditor



        由于需要在django admin中使用到富文本编辑器,由于我比较喜欢KindEditor,于是写了个自定义widget



        1、首先从KindEditor主页下载,并解压至你的static文件存放目录(略...)

        

        2、编写自定义widget:

  1. from django import forms


  2. from django.conf import settings 


  3. class KindEditor(forms.Textarea):


  4.         class Media:


  5.                 js = (settings.MEDIA_URL + 'js/widgets/kindeditor.js',)


  6.                 css = (settings.MEDIA_URL + 'js/widgets/kindeditor.css',)


  7.         def __init__(self, attrs = {}):


  8.                 attrs['rel'] = 'kind'


  9.                 super(KindEditor, self).__init__(attrs)

复制代码

3、在form中使用上面的widget:

  1. from customwidget.editor import KindEditor

  2. from django import forms

  3. from app.models import MyModel

  4. from django.contrib import admin


  5. class MyModelAdminForm(forms.ModelForm):

  6.         pass

  7.         

  8.         class Meta:

  9.               model = MyModel

  10.               widgets = {

  11.                 'fieldname':KindEditor()


  12.               }


  13. class MyModelAdmin(admin.ModelAdmin):



  14.          form = MyModelAdminForm


  15. admin.site.register(MyModel, MyModelAdmin) 



复制代码

4、需要在模板中使用JS来初始化KindEditor(请确保你的模板中已加载jQuery, django admin中已自带,不过namespace换到了django之下):

  1. {%extends "admin/change_form.html"%}

  2. {%block extrahead%}

  3.     {{block.super}}

  4.      <script type="text/javascript">

  5.            django.jQuery(document).ready(function(){

  6.                 django.jQuery("textarea[rel='kind']").each(function(n){

  7.                           KE.show({

  8.                                id : django.jQuery(this).attr("id"),

  9.                           });

  10.                 });

  11.            });

  12.       </script>

  13. {%endblock%}

复制代码

4、需要注意的地方:

                a) 所下载的kindeditor文件包存放的位置及settings里的MEDIA_URL地址(其实就是保证最终生成的JS和CSS访问路径是正确的)

                b) 若非django admin的模板,请自行加载jQuery


本文转载自:http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=1836380

KavenSu
粉丝 6
博文 66
码字总数 16605
作品 0
深圳
私信 提问
加载中

评论(1)

Riseming
Riseming
#此处输入软件名##此处输入


软件名#
在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
5.5K
13
kindeditor添加字节计算方法,解决中文字节数问题

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

狄龙-
2012/10/08
793
0
KindEditor 跨域上传文件不能接受返回的json?

最近做个项目需要用到富文本编辑器,在网站找了好多,最终选择了kindeditor. 但是在用kindeditor做跨域上传文件的时候遇到了问题。在网站搜索了一些答案,但还是没有解决。也看了@红薯 大哥的...

枫亭子
2016/01/12
1K
4
Kindeditor 修改内容时如何不让 < 被自动转义

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

OSC老司机
2011/08/15
11.7K
8
KindEditor的初始化问题

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

西昆仑
2013/06/03
2.7K
6

没有更多内容

加载失败,请刷新页面

加载更多

JIT编程与方法内联

JIT的比较冷门,首先你要读一下这两篇 帖子: 《面向JIT编程-方法内联》 https://blog.csdn.net/u012834750/article/details/79488572 《浅谈对JIT编译器的理解》 https://www.cnblogs.com/...

爱吃窝窝头
27分钟前
4
0
基于TCP的RPC实现

RPC即远程服务调用 出现原因:随着项目越来越大,访问量越来越大,为了突破性能瓶颈,需要将项目拆分成多个部分,这样比起传统的项目都是本地内存调用,分布式的项目之间需要在网络间进行通信...

少年已不再年少
36分钟前
6
0
OSChina 周二乱弹 —— 他只能用这个办法劝你注意身体了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @-冰冰棒- :#今日歌曲推荐# Kodaline《High Hopes》 《High Hopes》- Kodaline 手机党少年们想听歌,请使劲儿戳(这里) @xiaoshiyue :仙女...

小小编辑
57分钟前
1K
21
Spring Boot Actuator 整合 Prometheus

简介 Spring Boot 自带监控功能 Actuator,可以帮助实现对程序内部运行情况监控,比如监控状况、Bean加载情况、环境变量、日志信息、线程信息等。这一节结合 Prometheus 、Grafana 来更加直观...

程序员果果
今天
11
0
Linux文件查找命令详解

对于文件查找,我们最好用的还是属于find命令了,在说find命令之前,先把另外几个查找命令介绍一下。 目录 0x01 查询命令介绍 0x02 find命令介绍 0x01 查询命令介绍 在介绍之前,首先先了解一...

无心的梦呓
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部