1、下载

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

2、文件夹说明

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

3、基本使用

  1. <textarea name="content" id="content"></textarea>
  2.  
  3. <script src="/static/jquery-1.12.4.js"></script>
  4. <script src="/static/plugins/kind-editor/kindeditor-all.js"></script>
  5. <script>
  6.     $(function () {
  7.         initKindEditor();
  8.     });
  9.  
  10.     function initKindEditor() {
  11.         var kind = KindEditor.create('#content', {
  12.             width: '100%',       // 文本框宽度(可以百分比或像素)
  13.             height: '300px',     // 文本框高度(只能像素)
  14.             minWidth: 200,       // 最小宽度（数字）
  15.             minHeight: 400      // 最小高度（数字）
  16.         });
  17.     }
  18. </script>

4、详细参数

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

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

  1. CONIENT = ""
  2.  
  3. def test(request):
  4.     if request.method == "GET":
  5.         return render(request,"test.html")
  6.     else:
  7.         content = request.POST.get("content")
  8.         global CONIENT
  9.         CONIENT = content
  10.         print(content)
  11.         return HttpResponse("...")
  12.  
  13. def see(request):
  14.     return render(request,"see.html",{"con":CONIENT})
  15.  
  16. import os
  17. def upload_img(request):
  18.  
  19.     #在之后可以根据获取到的dir判断是视频还是文件，这里没有用到
  20.     type_obj = request.POST.get("dir")
  21.  
  22.     print(request.POST, request.FILES)
  23.     file_obj = request.FILES.get("imgFile")
  24.     file_path = os.path.join("static/images/",file_obj.name)
  25.     with open(file_path,"wb") as f:
  26.         for chunk in file_obj.chunks():
  27.             f.write(chunk)
  28.  
  29.     #返回前端,可以预览
  30.     dic = {
  31.         'error': 0,
  32.         'url': "/" +  file_path,
  33.         'message': '错误了...'
  34.     }
  35.  
  36.     import json
  37.     return HttpResponse(json.dumps(dic))

view.py

  1. urlpatterns = [
  2.  
  3.     #上传图片，写文章
  4.     url(r'^test/', views.test),
  5.     #查看写的文章
  6.     url(r'^see/', views.see),
  7.     #上传图  视频 文件
  8.     url(r'^upload_img.html', views.upload_img),

urls.py

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <form method="POST" action="/test/">
  9.         {% csrf_token %}
  10.         <div>
  11.             <div>文章内容</div>
  12.             <div>
  13.                 <textarea id="id1" name="content"></textarea>
  14.             </div>
  15.         </div>
  16.         <input type="submit" value="提交">
  17.     </form>
  18.     <script src="/static/css/kindeditor-4.1.10/kindeditor-all.js"></script>
  19.  
  20.     <script>
  21.         KindEditor.create("#id1",{
  22.             width:"700px",
  23.             height:"800px",
  24. {#            //items:['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',#}
  25.              //       'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
  26.               //      'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
  27.                 //    'superscript', 'clearhtml', 'quickformat'],
  28.             //noDisableItems:['source', '|', 'undo'],     //保留某些item
  29.             //designMode:false                            //其它注释
  30.  
  31.            //resizeType   改变窗口大小
  32.             uploadJson:"/upload_img.html",  //上传文件
  33.             extraFileUploadParams:{         //上传文件时携带token
  34.                 "csrfmiddlewaretoken":"{{ csrf_token }}"
  35.             }
  36.         })
  37.     </script>
  38.  
  39. </body>
  40. </html>

test.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     {{ con | safe }}
  9. </body>
  10. </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. vue.js设置、获取、删除cookie

    项目需要前端获取后台返回的cookie,并以此作判断.我是在main.js入口文件下使用的 具体代码: new Vue({ el: '#app', router, template: '<App ...

  2. Javascripte的原型链之基础讲解

    一.函数对象与普通对象 var o1 = {}; var o2 =new Object(); var o3 = new f1(); function f1(){}; var f2 = function ...

  3. Ubuntu 14.04下Hadoop2.4.1集群安装配置教程

    一.环境 系统: Ubuntu 14.04 64bit Hadoop版本: hadoop 2.4.1 (stable) JDK版本: OpenJDK 7 台作为Master,另3台作为Slave. 所 ...

  4. 打造Linux回收站

    linux是没有回收站概念的,一旦误删除文件了是很难很难找回来的,对普通用户而言误删除文件就等于永久性不可逆丢失数据了:不过可以改造一下rm命令来变相实现回收站功能,实际上就是mv命令转移文件到指定路 ...

  5. 使用SQLiteOpenHelper类对数据库简单操作

    实现数据库基本操作       数据库创建的问题解决了,接下来就该使用数据库实现应用程序功能的时候了.基本的操作包括创建.读取.更新.删除,即我们通常说的CRUD(Create, Read, Upda ...

  6. struct2_拦截器知识点.

    Struts2拦截器原理: Struts2拦截器的实现原理相对简单,当请求struts2的action时,Struts 2会查找配置文件,并根据其配置实例化相对的拦截器对象,然后串成一个列表,最后一个 ...

  7. Java基础学习笔记九 Java基础语法之this和super

    构造方法 我们对封装已经有了基本的了解,接下来我们来看一个新的问题,依然以Person为例,由于Person中的属性都被private了,外界无法直接访问属性,必须对外提供相应的set和get方法.当 ...

  8. MySQL之索引详解

    这篇博客将要阐述为什么使用b+树作为索引,而不是b树或者其他树 1.什么是b树 (图片来自网络) b树相关特性:⑴关键字分布在整棵树中 ⑵任何一个关键字只出现在一个节点上 ⑶搜索可能在非叶子节点上结束 ...

  9. 新事物学习---Chrome上使用PWA

    PWA是什么 PWA(Progressive Web Apps)是 Google 最近在提的一种 Web App 形态 (或者如 Wikipedia 所称的"软件开发方法").PW ...

  10. CountDownLatch 源码解析—— countDown()

    上一篇文章从源码层面说了一下CountDownLatch 中 await() 的原理.这篇文章说一下countDown() . public void countDown() { //CountDow ...