web页面文本框修饰器 --- KindEditor

一、前言

　　我们在利用Form表单创建一个文本框的时候，它就仅仅是一个文本框！但是我们浏览别人页面的时候，在文本框上有很多的插件共我们点，点，点（重要的事情说三遍！！！）。很羡慕有没有？其实都是用一个叫做KindEditor的插件完成的！这次我们就说说这个可以让我们为所欲为点点点的插件！

　　KindEditor是一款用Javascript编写的开源在线HTML编辑器，主要目的是让用户在网站上获得可见即可得的编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。你可以在其官网了解更多信息，包括演示、文档、下载等。

二、KindEditor说明（注意它是个插件！！！）

1、进入官网

2、下载 ---------> 官网下载

3、文件夹说明

├── asp                          asp示例
├── asp.net                    asp.net示例
├── attached                  空文件夹，放置关联文件attached
├── examples                 HTML示例
├── jsp                          java示例
├── kindeditor-all-min.js 全部JS（压缩）
├── kindeditor-all.js        全部JS（未压缩）
├── kindeditor-min.js      仅KindEditor JS（压缩）
├── kindeditor.js            仅KindEditor JS（未压缩）
├── lang                        支持语言
├── license.txt               License
├── php                        PHP示例
├── plugins                    KindEditor内部使用的插件
└── themes                   KindEditor主题

　　由于KindEditor是一个插件，它兼容所有的语言，所以在这个插件中有很多别的语言的兼容包，所以说你要用那个就留下什么就可以了！这样还可以减少占用！

4、基本使用

<textarea name="content" ></textarea>

<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/plugins/kind-editor/kindeditor-all.js"></script>
<script>
$(function () {
    initKindEditor();
});

function initKindEditor() {
    var kind = KindEditor.create('#content', {
    width: '100%', // 文本框宽度(可以百分比或像素)
    height: '300px', // 文本框高度(只能像素)
    minWidth: 200, // 最小宽度（数字）
    minHeight: 400 // 最小高度（数字）
});
}
</script>

5、详细参数

http://kindeditor.net/docs/option.html

6、上传文件示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div>
    <h1>文章内容</h1>
    {{ request.POST.content|safe }}
</div>


<form method="POST">
    <h1>请输入内容：</h1>
    {% csrf_token %}
    <div style="width: 500px; margin: 0 auto;">
        <textarea name="content" id="content"></textarea>
    </div>
    <input type="submit" value="提交"/>
</form>

<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/plugins/kind-editor/kindeditor-all.js"></script>
<script>
    $(function () {
        initKindEditor();
    });

    function initKindEditor() {
        var a = 'kind';
        var kind = KindEditor.create('#content', {
            width: '100%',       // 文本框宽度(可以百分比或像素)
            height: '300px',     // 文本框高度(只能像素)
            minWidth: 200,       // 最小宽度（数字）
            minHeight: 400,      // 最小高度（数字）
            uploadJson: '/kind/upload_img/',
            extraFileUploadParams: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            fileManagerJson: '/kind/file_manager/',
            allowPreviewEmoticons: true,
            allowImageUpload: true
        });
    }
</script>
</body>
</html>

HTML