axure 富文本编辑器_一篇文章搞定Python结合KindEditor文本编辑器构建富文本编辑器

KindEditor文本编辑器

下载地址：http://www.kindsoft.net/down.php

官网使用方法：http://kindeditor.net/docs/usage.html

启用方法

下载解压后，将其中的kindeditor文件夹完全拷贝到网站存储静态文件的文件夹中(python：static文件夹)

引用方法

引入kindeditor文件夹中名为kindeditor-all-min.js的文件以及lang文件夹下的zh-CN.js文件

  // 可以直接路径引入

自行添加一个form组件的 textarea

textarea输入框替换成kindeditor面板JS方法

{#导入kindeditor面板方法(实际是替换HTML中的textarea文本框)#}

呈现

精简常用初始化参数

width

编辑器的宽度，可以设置px或%，比textarea输入框样式表宽度优先度高。

• 数据类型: String
• 默认值: textarea输入框的宽度

示例

K.create('#id', {        width : '700px'});

height

编辑器的高度，只能设置px，比textarea输入框样式表高度优先度高。

• 数据类型: String
• 默认值: textarea输入框的高度

items

配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。

• 数据类型: Array
• 默认值:
• 使用方法：不使用的直接在列表中直接删除

items：[        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',        'anchor', 'link', 'unlink', '|', 'about']

resizeType(固定输入框大小方法)

2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。

• 数据类型: Int
• 默认值: 2

uploadJson：(重要)

指定上传文件的服务器端程序。

• 数据类型: String
• 默认值: basePath + ‘php/upload_json.php’

KindEditor.ready(function (k) {        window.editor=k.create("#article_box",{  // 内填textarea的id值            width:1110,  // 默认为像素            hight:570,            resizeType:0,            uploadJson:"/upload_img/",  // 需要下语句话传输csrf            extraFileUploadParams:{"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},        })    })

extraFileUploadParams(额外的上传时用到的参数)

上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。

• 数据类型: Array
• 默认值: {}

KindEditor.ready(function(K) {        K.create('#id', {                extraFileUploadParams : {                        item_id : 1000,                        category_id : 1                }        });});

完整示例

HTML与JS区

        {% load static %}  # 关于资源链接    添加文章

{% csrf_token %} # csrf防止跨域请求

输入标题

{#导入kindeditor面板方法(实际是替换HTML中的textarea文本框)#}

Urls需要添加的链接(添加与后端交互路径)

# 配置用户上传图片路径    url(r'^upload_img/', views.upload_img, name='upload_img'),  # 用户上传非文本所走路径

后端代码(views.py)

# 数据上传def upload_img(request):    img_obj = request.FILES.get("imgFile")  # 获取前端传输回的非文本资源 (默认的键名为:imgFile)    # 设计存储路径    media_path = settings.MEDIA_ROOT    path = os.path.join(media_path, "article_imgs", img_obj.name)    # 存储方法    with open(path, mode="wb") as f:        for line in img_obj:            f.write(line)    # 反回给前端数据    res = {        "url": "/media/article_imgs/"+img_obj.name,  # 资源存储相对路径        "error": 0  # 状态码(可不填)    }    return HttpResponse(json.dumps(res))  # 序列化反回

存储路径示例图

最终示意图

#python##每天学python##Python入门推荐#