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. 深入Python的类和对象

    多态:不同的子类对象,可以调用相同的父类方法,通过改写父类的方法,产生不同的执行结果 instance和type的区别: instance能够顺延到父类,比对对象与父类是否类型一致.而type只能比对 ...

  2. [P2387魔法森林

    题面 题意: 给出一个图,边权有两维,a与b. 求1到n的一条路径使得路径经过的边的最大的a与b的和最小,输出最小之和. \(Solution:\) 如果做过这题,那么就显得很简单了很好想了. 又是想 ...

  3. Leetcode 672.灯泡开关II

    灯泡开关II 现有一个房间,墙上挂有 n 只已经打开的灯泡和 4 个按钮.在进行了 m 次未知操作后,你需要返回这 n 只灯泡可能有多少种不同的状态. 假设这 n 只灯泡被编号为 [1, 2, 3 . ...

  4. 目标检测之Faster-RCNN的pytorch代码详解(模型训练篇)

    本文所用代码gayhub的地址:https://github.com/chenyuntc/simple-faster-rcnn-pytorch  (非本人所写,博文只是解释代码) 好长时间没有发博客了 ...

  5. DP入门（3）——多阶段决策问题

    多阶段决策问题,简单地说,每做一次决策就可以得到解的一部分,当所有决策做完之后,完整的解就“浮出水面”了.在回溯法中,每次决策对应于给一个结点产生新的子树,而解的生成过程对应一棵解答树,结点的层数就是 ...

  6. int，long，long long类型的范围

    [内置类型] int      -2147483648-2147483647  //现在编译器的int型是32位的,以前为16位的范围是-32768~32767 unsigned  int   0-4 ...

  7. Z.XML-Cocos2d-x开发笔记

    大家都在热火朝天的使用Cocos2d-x引擎做游戏开发,那么大家不妨把过程中解决的关键问题记录在这里,做一个分享! 1.在Android平台下打开网页 1.1修改项目工程源文件 在你的项目工程源文件中 ...

  8. Linux在线用户通信

    1,/etc/motd文件 该文件即 message of today(布告栏信息),每次用户登录时,/etc/motd文件的内容会显示在用户的终端.系统管理员可以在文件中编辑系统活动消息 即像公告栏 ...

  9. Java堆和栈

    栈中存基本类型变量数据和对象的引用 堆中存new的对象

  10. [STL] STL各容器实现原理

    STL共有六大组件1.容器 2.算法 3.迭代器 4.仿函数 6.适配器 STL容器的实现原理 STL来管理数据十分方便,省去了我们自己构建数据结构的时间.其实,STL的实现也是基于我们常见的数据结构 ...