当前位置: 移动技术网 > IT编程>脚本编程>Python > Django添加KindEditor富文本编辑器的使用

Django添加KindEditor富文本编辑器的使用

2018年11月05日  | 移动技术网IT编程  | 我要评论

青奥会激光笔事件,3158con,缘何不能忘记你txt

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'),
)

2、下载kindeditor

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

就像这样子static/js/editor/kindeditor-4.1.7

3、在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)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对移动技术网的支持。如果你想了解更多相关内容请查看下面相关链接

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网