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. Ubuntu下使用Git_4

    在这个第四个文章中,我将练习GIT的高级阶段了,由于高级阶段的内容转的比较多,我自己的代码除了我自己可以看懂意外,大家可能看不懂,所以我将会按照 http://git.wiki.navisec.it/ ...

  2. 1030 Travel Plan （30 分）（最短路径 and dfs）

    #include<bits/stdc++.h> using namespace std; ; const int inf=0x3f3f3f3f; int mp[N][N]; bool vi ...

  3. c#执行插入sql 时，报错：异常信息:超时时间已到。在操作完成之前超时时间已过或服务器未响应

    问题:c#执行插入sql 时,报错:异常信息:超时时间已到.在操作完成之前超时时间已过或服务器未响应 解决: SqlCommand cmd = new SqlCommand(); cmd.Comman ...

  4. [org.hibernate.engine.jdbc.spi.SqlExceptionHelper]SQL Error: 1064, SQLState: 42000问题的解决办法

    [org.hibernate.engine.jdbc.spi.SqlExceptionHelper]SQL Error: 1064, SQLState: 42000问题的解决办法. 出现这种情况的原因 ...

  5. oracle dg 备库不同步主库数据

    今天遇到一个数据库同步问题,主库被关闭,重启主库后,备库不能正常同步主库数据.只有当手动切换归档日志的时候,备库才能和主库一致. 这个问题的解决方法: 重启备库,重新应用归档日志. 操作步骤如下: / ...

  6. PhalApi 1.4.2 经典封存版 - 码云

    https://www.phalapi.net/ PhalApi 1.x 是经典封存版本,已停止更新,历练考验,可放心使用. 主要采用PEAR命名规范,遵循PSR-0,不支持命名空间和composer ...

  7. ASP.NET页面之间传值Server.Transfer(4)

    这个才可以说是面象对象开发所使用的方法,其使用Server.Transfer方法把流程从当前页面引导到另一个页面中,新的页面使用前一个页面的应答流,所以这个方法是完全面象对象的,简洁有效. Serve ...

  8. hdu6097 Mindis(几何）

    题解: 这里是用解析解的做法, 我们发现如果以P和Q做椭圆,那么当椭圆与圆相切的时候,答案最优 那么方程就是这样的 联立之后,解delta等于0,可以得到 答案就是2a了 注意不一定任何情况都有解,当 ...

  9. 菜单 & 工具栏 & 状态栏

    MFC中ON_UPDATE_COMMAND_UI和ON_COMMAND消息区别 CCmdUI 加载状态栏 加载工具栏

  10. [Leetcode] Merge k sorted lists 合并k个已排序的链表

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. 思 ...