一、KindEditor介绍
KindEditor插件提供了富文本编辑器在页面上的使用,我们在进行Django开发时可以通过相关配置使用KindEditor插件,以下KindEditor在Django中的使用:
二、KindEditor相关的配置步骤
第一步:先下载KindEditor,链接在此:KindEditor插件下载
第二步:在django项目目录下创建一个全局静态文件夹,名为allstatic,然后在settings中的STATIC配置对应静态文件夹路径
注意:必须是以元组或列表的形式,所以后面需要加逗号
第三步:将kindeditor文件解压,然后放在django的静态目录allstatic下
第四步:在kindeditor目录下创建一个config.js,代码如下:
//配置调用kindeditor,当使用textarea元素且name为content时就会自动调用kindeditor
KindEditor.ready(function(K){
window.editor=K.create('textarea[name="content"]',
{
});
});
第五步:在你想要使用kindeditor的html文件中引用kindeditor的js,注意需要先调用static,然后去调用kindeditor下的js文件
<!DOCTYPE html>
<html>
<head>
{% load static %}
<meta charset="UTF-8">
<title>注册页</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{#导入相关kindeditor的js#}
<script type="text/javascript" charset="utf8" src={% static 'kindeditor/kindeditor-all.js' %}></script>
<script type="text/javascript" charset="utf8" src={% static 'kindeditor/lang/zh-CN.js' %}></script>
<script type="text/javascript" charset="utf8" src={% static 'kindeditor/config.js' %}></script>
</head>
第六步:在html的body中编写textarea元素,并且将name设置为content
<div class="row clearfix">
<div class="col-md-12 column">
<form role="form" method="post">
{#导入表单#}
{% csrf_token %}
{#罗列表单,.as_p是自动换行#}
{{ res_form.as_p }}
<textarea style="width:300px;height: 150px;" name="content">富文本编辑器测试</textarea>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
第七步:刷新网页,看效果