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. ubuntu12.04停留在grub界面问题

    修改ubuntu 12.04 停留在grub界面的步骤: 1. 在/etc/default/grub配置文件中, 添加一项GRUB_RECORDFAIL_TIMEOUT: GRUB_TIMEOUT=2 ...

  2. 分布式一致性算法之Paxos原理剖析

    概述 Zookeeper集群中,只有一个节点是leader节点,其它节点都是follower节点(实际上还有observer节点,不参与选举投票,在这里我们先忽略,下同).所有更新操作,必须经过lea ...

  3. ThinkPHP5作业管理系统中处理学生未交作业与已交作业信息

    在作业管理系统中,学生登陆到个人中心后可以通过左侧的菜单查看自己已经提交的作业和未提交作业.那么在系统中如何实现这些数据的查询的呢?首先我们需要弄清楚学生(Student).班级(class).作业提 ...

  4. 学习bash——变量

    一.什么是变量 变量:一个字眼,用来替代另一个比较复杂或者是容易变动的数据. 变量的优势:可变性.方便性 二.变量内容的设置 关键词:变量,变量名称,变量的内容(我默认将变量与变量名称等价) 方法:变 ...

  5. [转]学习win10的bash使用ssh连接远程服务器

    1. 前言 微软已经在Win10一周年更新预览版中加入了Ubuntu Bash命令支持,相当于一个小型的linux系统,本来连接远程服务器的话,要使用putty啥的,现在可以用这个直接连接,我来讲讲步 ...

  6. winform label去背景

    以pictureBox上面显示一个不需要背景的label为例: 1.保证label的父控件是该pictureBox: 2.label的color属性为transParent:

  7. 【Python】Python内置函数dir详解

    1.命令介绍 最近学习并使用了一个python的内置函数dir,首先help一下: 复制代码代码如下: >>> help(dir)Help on built-in function ...

  8. Source Tree基础教程2

    1.分支 项目——分支——推送 新分支要重新拉取项目后才可以看见 项目——拉取 2合并分支代码 将其他分支代码合并到当前分支——提交

  9. 个人作业4——alpha阶段个人总结(201521123103 吴雅娟)

    一.个人总结 在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 请用自我评价表:http://www.cnblogs.com/xinz/p/3852177.html 有 ...

  10. win7 redis

    <?php /* windows下php安装redis扩展 php_redis下载地址:https://pecl.php.net/package/redis 点击redis安装版本后面的 DLL ...