KindEditor插件（富文本编辑器）的使用

一、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>

第七步：刷新网页，看效果

KindEditor插件（富文本编辑器）的使用

一、KindEditor介绍

二、KindEditor相关的配置步骤

猜你喜欢