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. Git 上传本地仓库到码云

    一.将本地的项目上传到码云 1.码云上创建一个项目 testgit (名字随你) 2.本地创建一个文件夹D:/testgit,然后使用git bash 3.cd 到本地文件夹中D:/testgit 4 ...

  2. coreos install megacli

    基于官方的coreos ramdisk安装dell raid管理工具,其版本为debian8 jessie root@c64c7df05677:/# more /etc/apt/sources.lis ...

  3. SQL 基础笔记（三）：约束

    个人笔记不保证正确. 数据类型是限制我们可以在表里存储什么数据的一种方法.不过,对于许多应用来说, 这种限制实在是太粗糙了.比如,一个包含产品价格的字段应该只接受正数. 但是没有哪种标准数据类型只接受 ...

  4. this.getClass().getResource()示例详解

    public class ResourceTest extends TimerTask{ @Override    public void run() {        System.out.prin ...

  5. Python如何进行中文注释

    最近,由于实习工作的需要,开始接触Python,但是第一个大的脚本写下来之后,连中文注释都没办法加,很郁闷,遂在网上找解决办法,在Python 官网上看到这个页面:http://www.python. ...

  6. java笔试面试01

    今天给大家分享一下小布去广州华南资讯科技公司笔试和面试的过程. 过程:1.HR面试  2.笔试  3.技术面试 小布下午两点到达,进门从前台领了一张申请表,填完之后带上自己的简历到4楼就开始HR面试. ...

  7. 关于debian配置的问题汇总

    debian的apache多域名配置: https://www.digitalocean.com/community/tutorials/how-to-set-up-apache-virtual-ho ...

  8. CSS优化压缩

    顾名思义缩写有简写意思,那就总结一下CSS缩写知识点.为什么要让CSS属性缩写?1.简化代码.一些CSS属性简写可以减少CSS代码从而减少CSS文件的占用字节.加快网页下载速度和网页加载速度.2.优化 ...

  9. bzoj2002: [Hnoi2010]Bounce 弹飞绵羊 分块

    这个题体现了分块不只是最大值最小值众数次数,而是一种清真的思想. 我们把整个序列分块,在每个块里处理每个位置跳出这个块的次数和跳出的位置,那么每次修改n0.5,每次查询也是,那么O(m* n0.5)的 ...

  10. mybatis学习（七）——resultType解析

    resultType是sql映射文件中定义返回值类型,返回值有基本类型,对象类型,List类型,Map类型等.现总结一下再解释 总结: resultType: 1.基本类型  :resultType= ...