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

4、实例

一:将插件放入自己的项目中

二.在前端页面中导入

三.在script中写入下面代码

注意:#article_content一定要和文本域的id一样

 KindEditor.ready(function (K) {

            window.editor = K.create('#article_content', {

                width: '1100px',

                height: '400px',

                extraFileUploadParams: {

                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()

                },

                uploadJson: "/backManage/uploadFile/"//上传文件的时候用,记得csrf_token

            });

        });

四、详细参数

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

上传文件:

#上传文件

def uploadFile(request):

    print(request.POST)

    print(request.FILES,"--------------")

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

    filename=file_obj.name

    path=os.path.join(settings.MEDIA_ROOT,"article_uploads",filename)

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

        for i in file_obj:

            f.write(i)

    response = {

        "error": 0,

        "url": "/media/article_uploads/" + filename + "/"

    }

    return HttpResponse(json.dumps(response))

基本使用

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

上传文件示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>$Title$</title>

</head>

<body>

<h3>发布文章</h3>

<form action="/background/{{ site }}/create_article.html" method="POST">

    {% csrf_token %}

    文章标题<input type="text">

    <textarea name="content" id="i1" cols="30" rows="10"></textarea>

    <input type="submit" value="提交"  style="margin-left: 35%">

</form>

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

<script>

    // KindEditor 上传的瞬间，帮你生成iframe+form进行伪Ajax操作

    KindEditor.create('#i1',{

        width:'1000px',

        height:'500px',

        resizeType:2,   // 默认是否可以拖动改变高度和宽带，0,1,2，其中默认是2，可以拖动改变宽度和高度。

        uploadJson:'/upload_img.html', // 上传文件位置，注意不能写目录/static/files...类似这种，识别不了。要写url

        // 注意：上传文件时，是以POST请求提交的，但是要写上{% csrf_token %}，上面表单中写的上传文件时没法用到，要配置

        extraFileUploadParams:{'csrfmiddlewaretoken':"{{ csrf_token }}"}

    })

</script>

</body>

</html>

creat_article

html

CONTENT=''

def create_article(request,site):

    from app01.form import ArticleForm

    if request.method == 'GET':

        obj = ArticleForm()

        return render(request,'creat_article.html',{'site':site})

    else:

        obj = ArticleForm(request.POST)

        if obj.is_valid():

            content = obj.cleaned_data['content']

            global CONTENT      #这里记得要设置全局变量

            CONTENT = content

            return HttpResponse('上传成功')

# 查看文章内容，只是简单的

def see(request):

    return render(request,'see.html',{'CONTENT':CONTENT})

#文件的上传

def upload_img(request):

    print(request.FILES,request.POST)

    obj_file = request.FILES.get('imgFile') # 根据request.FILES得出的字典的key值是imgFile

    upload_type =request.GET.get('dir')

    print(upload_type)  # image

    # 需要补上代码，进行判断，当上传文件类型为 image 时放在一个目录，当上传文件类型为其他时放在一个目录，便于管理

    import os

    file_path=os.path.join('static/imgs',obj_file.name)

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

        for chunk in obj_file.chunks():

            f.write(chunk)

    #还需要补充的代码是将数据更新到数据库中

    # 上面只实现了上传，dic 默认的写法，并且要返回给前端，才能实现预览。

    dic={

        'error':0,

        'url': '/'+ file_path,

        'message':'出错了....'

    }

    import json

    return HttpResponse(json.dumps(dic))

app01/views

views

附加东西

配置media

1.setting中

# media 配置

MEDIA_ROOT = os.path.join(BASE_DIR, "app01", "media", "uploads")

MEDIA_URL = "/media/"

2.urls中

#media配置

from django.conf import settings

from django.views.static import serve

 url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),

3项目中创建media文件夹

具体参考这里面的blog项目

编辑器KindEditor的使用的更多相关文章

  1. 富文本编辑器kindeditor配置

    <!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...

  2. easyUI整合富文本编辑器KindEditor详细教程(附源码)

    原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...

  3. 后台文本编辑器KindEditor介绍

    后台文本编辑器KindEditor介绍 我们在自己的个人主页添加文章内容的时候,需要对文章内容进行修饰,此时就需要文本编辑器助阵了! 功能预览 KindEditor文本编辑器 KindEditor文本 ...

  4. python 全栈开发，Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)

    一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...

  5. 使用富文本编辑器Kindeditor

    今天在做需求的时候,遇到有一个字段,需要保存带有格式的内容,决定使用富文本框编辑器Kindeditor来实现,解决方法如下: 登录官网下载控件包: http://kindeditor.net/down ...

  6. 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传

    富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...

  7. 纯JS文本在线HTML编辑器KindEditor

    KindEditor(http://www.kindsoft.net)是一款比较专业,主流,好用的在线HTML编辑器. 它除了可以将文本进行编辑.将Word中的内容复制进来外,本身还可以拖动缩放(右下 ...

  8. HTML编辑器KindEditor

    KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...

  9. 在线HTML编辑器KindEditor

     简介 KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE.Firefox.Chrome.Safari.Opera等主流浏览器.KindEdi ...

  10. HTML编辑器 -- KindEditor

    KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...

随机推荐

  1. 「个人训练」Copying Books（UVa714）

    好久不更新主要是怠惰了....还要加强训练. 题意分析与思路 注意到这样一句话: our goal is to minimize the maximum number of pages assigne ...

  2. iframe底边多出4px或5px解决办法

    问题: 在处理iframe框架自适应时,并且已经去掉iframe的边框,但仍然出现底边多出4px或5px高度的情况.如图 <div id="content"> < ...

  3. 《python核心编程第二版》第7章习题

    7–1. 字典方法.哪个字典方法可以用来把两个字典合并到一起? 答:dict1.update(dict2) 7–2. 字典的键.我们知道字典的值可以是任意的Python 对象,那字典的键又如何呢?请试 ...

  4. Navicat oracle to postgresql ERR

    可能的解决思路是设好源数据和目标数据库后,先建立表结构,然后修改表结构字段数据类型 参考 https://www.cnblogs.com/stephen-liu74/archive/2012/04/3 ...

  5. 2.爬虫 urlib库讲解 异常处理、URL解析、分析Robots协议

    1.异常处理 URLError类来自urllib库的error模块,它继承自OSError类,是error异常模块的基类,由request模块产生的异常都可以通过这个类来处理. from urllib ...

  6. xampp开户，apache打开出现端口被占用提示

    刚装上去的时候,可以打开xampp,但是重启的时候出现以后以下问题 13:49:02  [Apache]     Error: Apache shutdown unexpectedly.13:49:0 ...

  7. 关于php网络爬虫phpspider

    前几天,被老板拉去说要我去抓取大众点评某家店的数据,当然被我义正言辞的拒绝了,理由是我不会...但我的反抗并没有什么卵用,所以还是乖乖去查资料,因为我是从事php工作的,首先找的就是php的网络爬虫源 ...

  8. Spring 集成Quartz

    在使用jdk的timer时发现无法在指定的日期进行执行任务.这便引入一个优秀的开源任务调度框架“quartz”.这里使用的是quartz-1.8.6版本.Quart的官网:http://www.qua ...

  9. 获取src下的文件

  10. JavaScript获取访问设备信息

    <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>JavaScript获取访问设备信息</tit ...