1、下载

  • 官网下载：http://kindeditor.net/down.php
  • 本地下载：http://files.cnblogs.com/files/wupeiqi/kindeditor_a5.zip

2、文件夹说明

├── 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主题

3、基本使用

<textarea name="content" id="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>

4、详细参数

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

5、上传文件本质：上传图片时,点击上传 会默认帮你生成ifrem和form标签,然后在form标签里生成一个image标签，以Ajax方式发送到后台(伪Ajax)

CONIENT = ""

def test(request):

    if request.method == "GET":

        return render(request,"test.html")

    else:

        content = request.POST.get("content")

        global CONIENT

        CONIENT = content

        print(content)

        return HttpResponse("...")

def see(request):

    return render(request,"see.html",{"con":CONIENT})

import os

def upload_img(request):

    #在之后可以根据获取到的dir判断是视频还是文件，这里没有用到

    type_obj = request.POST.get("dir")

    print(request.POST, request.FILES)

    file_obj = request.FILES.get("imgFile")

    file_path = os.path.join("static/images/",file_obj.name)

    with open(file_path,"wb") as f:

        for chunk in file_obj.chunks():

            f.write(chunk)

    #返回前端,可以预览

    dic = {

        'error': 0,

        'url': "/" +  file_path,

        'message': '错误了...'

    }

    import json

    return HttpResponse(json.dumps(dic))

view.py

urlpatterns = [

    #上传图片，写文章

    url(r'^test/', views.test),

    #查看写的文章

    url(r'^see/', views.see),

    #上传图  视频 文件

    url(r'^upload_img.html', views.upload_img),

urls.py

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form method="POST" action="/test/">

        {% csrf_token %}

        <div>

            <div>文章内容</div>

            <div>

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

            </div>

        </div>

        <input type="submit" value="提交">

    </form>

    <script src="/static/css/kindeditor-4.1.10/kindeditor-all.js"></script>

    <script>

        KindEditor.create("#id1",{

            width:"700px",

            height:"800px",

{#            //items:['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',#}

             //       'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',

              //      'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

                //    'superscript', 'clearhtml', 'quickformat'],

            //noDisableItems:['source', '|', 'undo'],     //保留某些item

            //designMode:false                            //其它注释

           //resizeType   改变窗口大小

            uploadJson:"/upload_img.html",  //上传文件

            extraFileUploadParams:{         //上传文件时携带token

                "csrfmiddlewaretoken":"{{ csrf_token }}"

            }

        })

    </script>

</body>

</html>

test.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    {{ con | safe }}

</body>

</html>

see.html

文本编辑器(KindEditord)的更多相关文章

  1. 富文本编辑器Simditor的简易使用

    最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...

  2. 个人网站对xss跨站脚本攻击（重点是富文本编辑器情况）和sql注入攻击的防范

    昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...

  3. 关于SMARTFORMS文本编辑器出错

    最近在做ISH的一个打印功能,SMARTFORM的需求本身很简单,但做起来则一波三折. 使用环境是这样的:Windows 7 64bit + SAP GUI 740 Patch 5 + MS Offi ...

  4. 基于trie树的具有联想功能的文本编辑器

    之前的软件设计与开发实践课程中,自己构思的大作业题目.做的具有核心功能,但是还欠缺边边角角的小功能和持久化数据结构,先放出来,有机会一点点改.github:https://github.com/chu ...

  5. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  6. [bzoj1269][AHOI2006文本编辑器editor] (splay模版题 or pb_ds [rope]大法)

    Description 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个简单而高效的文本编辑器.你能帮助他吗?为了明确任务目标,可可对“文本编辑器”做了一个抽象的定义:   文本:由0个或 ...

  7. Bzoj1269 [AHOI2006]文本编辑器editor

    Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3678  Solved: 1380 Description 这些日子,可可不和卡卡一起玩了,原来可可正 ...

  8. PHP Ueditor 富文本编辑器

    2016年12月11日 08:46:59 星期日 百度的简版富文本编辑器umeditor很久没更新了 全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主 ...

  9. js中的文本编辑器控件KindEditor---那些打酱油的日子

    使用文本编辑器控件KindEditor渲染文本域页面显示 this.sync()同步KindEditor的值到textarea文本框 editor.isEmpty()判断文本域是否是空 editer. ...

随机推荐

  1. 1-7 hibernate关联关系映射

    1.关联关系分为单向关联(一对一,一对多,多对一,多对多),多向关联(一对一,一对多,多对多). 2.单向一对一主键关联实例 需要为one-to-one元素指定constrained属性值为true. ...

  2. [总结] 第二类Stirling数

    上一道例题 我们来介绍第二类Stirling数 定义 第二类Stirling数实际上是集合的一个拆分,表示将n个不同的元素拆分成m个集合的方案数,记为 或者 .和第一类Stirling数不同的是,集合 ...

  3. 使用Mifare卡加密数据 笔记

    Mifare 是最常用的射频卡,具体介绍网上太多,我就不说了.,很多城市的最早的地铁公交卡都是用这种卡,后来被破解后都换成智能卡了. 但是由于技术成熟,使用方便,成本低,现在很多小区门禁卡,停车卡,食 ...

  4. Java多线程：死锁

    周末看到一个用jstack查看死锁的例子.昨天晚上总结了一下jstack(查看线程).jmap(查看内存)和jstat(性能分析)命令.供大家参考  1．Jstack 1.1 jstack能得到运行j ...

  5. 多目标跟踪(MOT)论文随笔-SIMPLE ONLINE AND REALTIME TRACKING WITH A DEEP ASSOCIATION METRIC (Deep SORT)

    网上已有很多关于MOT的文章,此系列仅为个人阅读随笔,便于初学者的共同成长.若希望详细了解,建议阅读原文. 本文是tracking by detection 方法进行多目标跟踪的文章,在SORT的基础 ...

  6. 使用jmeter+ant进行接口自动化测试(数据驱动)之二：利用apache-ant执行测试用例并生成HTML格式测试报告

    在 使用jmeter+ant进行接口自动化测试(数据驱动)之一 介绍了如何使用csv文件来批量管理接口 本次接着介绍如何利用apache-ant执行测试用例并生成HTML格式测试报告 ①下载安装 ap ...

  7. 2017-2018-1 20155205 实现mypwd

    2017-2018-1 20155205 实现mypwd 课堂总结 根据上课对ls -l功能的实现,我总结了实现一个linux命令需要的步骤: 使用man -k xx | grep xx查看帮助文档, ...

  8. APP案例分析--扇贝单词

    APP案例分析 一.调研 1.第一次上手   第一次使用时,一进APP,有一个每日一句,然后就是登录界面.有点不舒服,我都还不知道你这个APP好不好用,不让我体验一下就要注册.简单的测试了我的英语水平 ...

  9. C语言——第二次作业(2)

    作业要求一 PTA作业的提交列表 作业要求二 题目1.删除字符串中数字字符(函数题) 1.设计思路 - (1)算法 第一步:调用定义的函数. 第二步:定义i=0.j=0,i为原字符数组角标,j为删除后 ...

  10. splinter web测试框架

    1.安装谷歌浏览器驱动(windows把驱动解压放在Python.exe同级目录即可) http://chromedriver.storage.googleapis.com/index.html 注意 ...