KindEditor的简单使用，以及上传图片预览图片，用户删除图片后的数据处理（重点）

Posted 2020-10-31 山上有风景

KindEditor的简单了解

http://www.cnblogs.com/wupeiqi/articles/6307554.html

简单使用：

<div class="comm">
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div style="margin: 0 auto;" class="comment-area">
                        <div class="model {% if req.session.user_info %} hide {% endif %}">
                            您需要登录后才可以回帖 <a href="/login.html">登录</a> | <a href="/register.html">立即注册</a>
                        </div>
                        <textarea name="content" id="content"></textarea>
                    </div>
                    <div class="comment-sub">
                        <span>已输入23/255</span>
                        <button type="button" class="btn btn-primary btn-sm" {% if not req.session.user_info %} disabled="disabled" {% endif %}>提交回复</button>
                    </div>
                </form>
            </div>

HTML前端

    <script>
        $(function () {
            initKindEditor();
        });

        function initKindEditor() {
            var kind = KindEditor.create(\'#content\', {
                width: \'100%\',       // 文本框宽度(可以百分比或像素)
                height: \'300px\',     // 文本框高度(只能像素)
                resizeType:0,　　　　//不允许修改大小
                uploadJson: \'/uploadfile.html\', //文件上传路径
                extraFileUploadParams: {        //文件上传的额外参数
                    \'csrfmiddlewaretoken\': \'{{ csrf_token }}\'　　//令牌使用，在POST数据上传时需要的
                },
                //filePostName:\'img\',  修改上传的文件名字，默认是imgFile
                //fileManagerJson: \'/kind/file_manager/\', //指定浏览远程图片的服务器端程序。
                allowPreviewEmoticons: true,    //预览表情
                allowImageUpload: true, //允许图片上传
                items: [
                    \'fontname\', \'fontsize\', \'|\', \'forecolor\', \'hilitecolor\', \'bold\', \'italic\', \'underline\',
                    \'removeformat\', \'|\', \'justifyleft\', \'justifycenter\', \'justifyright\', \'insertorderedlist\',
                    \'insertunorderedlist\', \'|\', \'emoticons\', \'image\', \'link\']  //编辑样式选择
            });
        }
    </script>

更多参数了解： http://kindeditor.net/docs/option.html

KindEditor的图片上传（临时目录）：

                uploadJson: \'/uploadfile.html\', //文件上传路径
                extraFileUploadParams: {        //文件上传的额外参数
                    \'csrfmiddlewaretoken\': \'{{ csrf_token }}\' //令牌使用，在POST数据上传时需要的
                },
                //filePostName:\'img\',  修改上传的文件名字

这3个和图片上传有关（了解）

后台处理：

settings配置：

MEDIA_URL = \'/static/uploads/\'
MEDIA_ROOT=os.path.join(BASE_DIR, \'static/uploads\')  #注意使用路径连接时后面的必须是相对路径

IMAGE_FIELDS = (
    \'jpeg\',
    \'png\',
    \'gif\',
    \'jpg\',
    \'bmp\',
)

>>> os.path.join("c:/mypy/","/da/dwa")  
\'c:/da/dwa\'
>>> os.path.join("c:/mypy/","da/dwa")
\'c:/mypy/da/dwa\'

注意后面不能写成绝对路径，不然路径连接时会出错（可以想下linux等系统，不分盘符,\'/\'就是根路径），所以我们注意这里

补充os.path.join，路径拼接

url设置：

    url(r\'^uploadfile.html$\',home.uploadFile,{"document_root": settings.MEDIA_ROOT,\'web_root\':settings.MEDIA_URL,\'image_list\':settings.IMAGE_FIELDS}),

文件上传处理业务：

def handle_uploaded_file(fp,filePath,webPath,filename):  //fp文件指针，filepath是我们存放文件的基础目录， webpath是我们网站访问该图片的目录，filename是文件名
    if not os.path.exists(filePath):
        os.makedirs(filePath)
    with open(filePath+filename,\'wb+\') as destination:
        for chunk in fp.chunks():
            destination.write(chunk)　　　　　　//写入文件
    return webPath+filename　　//返回web访问的文件路径

def uploadFile(req,*args,**kwargs):
    if req.method != "POST":
        return redirect(\'/\')
    status = {
        \'error\': 0,
        \'url\': \'\',
        \'message\': \'\'
    }
    if req.FILES[\'imgFile\']:
        file_name = str(req.FILES.get("imgFile"))
        from blog import settings
        if file_name.split(\'.\')[-1] in kwargs[\'image_list\']:
            #先上传到临时文件夹中，然后在与用户提交的评论进行正则匹配，若是匹配到的数据，则移动到正常文件夹中，剩余的图片（用户在编辑时自己删除了的）我们清空该文件夹，并替换用户的图片路径即可
            #static_path = "comment/"+str(datetime.date.today())+\'/\'
            static_path = "temp/"+str(req.session[\'user_info\'][\'id\'])+\'/\' #以用户id为文件名的临时文件夹
            web_path = kwargs[\'web_root\'] + static_path
            file_path = kwargs[\'document_root\']+\'/\'+ static_path
            ret = handle_uploaded_file(req.FILES[\'imgFile\'],file_path,web_path,file_name)
            status[\'url\'] = ret
        else:
            status[\'error\']=1
            status[\'message\']="文件格式不正确"
    else:
        status[\'error\'] = 2
        status[\'message\'] = "文件上传失败"
    return HttpResponse(json.dumps(status))

KindEditor的图片处理思路：

为用户先创立一个临时文件夹，在用户上传评论时，与img标签进行正则匹配，若是匹配到的数据，我们则移入到正确的路径，然后将临时文件夹删除即可。

其他思路可以参考：

http://kindeditor.net/view.php?bbsid=5&postid=6049

基本上2种解决方案：

1. 先把图片提交到临时目录，提交到服务器后，用正则提取图片路径，和上传过的图片比较，如果用到就把图片移动到实际目录。

2. 采用图片空间管理，让用户自己删除多余的图片，一个用户的总容量限制就可以了，现在很多大网站都是这个做法。

或者：前端使用ajax进行删除，但是如果用户可以进行撤销操作，那么原来的图片使用ajax似乎不太正确：

http://kindeditor.net/view.php?bbsid=7&postid=6834&pagenum=1

大概思路：

可以知道数据是使用iframe进行传输的：iframe无刷新上传文件：http://www.cnblogs.com/ssyfj/p/8533287.html（了解）

我们可以操作该对象，对img点击事件进行监听

$(".ke-edit-iframe")    //获取iframe对象

obj = $(".ke-edit-iframe") .contents()    //获取iframe中的document对象

$(obj).find("img")  //获取img元素对象，使用click等就可以进行监听，使用户点击使进行删除选项，同意则使用ajax进行删除

 

KindEditor的图片上传实现：

前端js

        $(function () {
            var Ke = new KindEdit_Class();
            Ke.initKindEditor();

            $(".btn_sub_comm").click(function(){
                Ke.submitData();
            })
        });

$(function(){...});

    function KindEdit_Class(){
            this.kind = null;

            this.initKindEditor = function () {
                this.kind = KindEditor.create(\'#content\', {
                    width: \'100%\',       // 文本框宽度(可以百分比或像素)
                    height: \'300px\',     // 文本框高度(只能像素)
                    resizeType:0,
                    uploadJson: \'/uploadfile.html\', //文件上传路径
                    extraFileUploadParams: {        //文件上传的额外参数
                        \'csrfmiddlewaretoken\': \'{{ csrf_token }}\'
                    },
                    //filePostName:\'img\',  修改上传的文件名字
                    //fileManagerJson: \'/kind/file_manager/\', //指定浏览远程图片的服务器端程序。
                    allowPreviewEmoticons: true,    //预览表情
                    allowImageUpload: true, //允许图片上传
                    items: [
                        \'fontname\', \'fontsize\', \'|\', \'forecolor\', \'hilitecolor\', \'bold\', \'italic\', \'underline\',
                        \'removeformat\', \'|\', \'justifyleft\', \'justifycenter\', \'justifyright\', \'insertorderedlist\',
                        \'insertunorderedlist\', \'|\', \'emoticons\', \'image\', \'link\']
                });
            }

            this.submitData = function(){
                this.kind.sync();//将KindEditor的数据同步到textarea标签。

                if($("#content").text().trim() == ""){
                    alert("请填写内容")
                    return;
                }

                var that=this
                $.ajax({
                    url:"/submitComment.html",
                    data:$("#fm").serialize(),
                    dataType:"json",
                    type:"POST",
                    success:function(data){
                        if(!data.error){
                            {#alert(data.message)#}
                            {#that.kind.html("")#}
                            {#$("#content").text("")#}

                            location.href=""
                        }
                    }
                })
            }
        }

function KindEdit_Class(){...}

后台图片处理：

    url(r\'^uploadfile.html$\',home.uploadFile,{"document_root": settings.MEDIA_ROOT,\'web_root\':settings.MEDIA_URL,\'image_list\':settings.IMAGE_FIELDS}),
    url(r\'^submitComment.html$\',home.comment,{"base_dir": settings.BASE_DIR,\'web_root\':settings.MEDIA_URL,"document_root": settings.MEDIA_ROOT}),

url

import datetime,json,os
from utils import CustomXss
from repository.Model import CommentModel as CmModels
from web.form.comment import CommentForm

部分模块导入

1.图片上传到临时文件夹：

def handle_uploaded_file(fp,filePath,webPath,filename):
    if not os.path.exists(filePath):
        os.makedirs(filePath)
    with open(filePath+filename,\'wb+\') as destination:
        for chunk in fp.chunks():
            destination.write(chunk)
    return webPath+filename

def handle_uploaded_file(fp,filePath,webPath,filename) 图片保存

def uploadFile(req,*args,**kwargs):
    if req.method != "POST":
        return redirect(\'/\')
    status = {
        \'error\': 0,
        \'url\': \'\',
        \'message\': \'\'
    }
    if req.FILES[\'imgFile\']:
        file_name = str(req.FILES.get("imgFile"))
        from blog import settings
        if file_name.split(\'.\')[-1] in kwargs[\'image_list\']:
            #先上传到临时文件夹中
            #static_path = "comment/"+str(datetime.date.today())+\'/\'
            static_path = "temp/"+str(req.session[\'user_info\'][\'id\'])+\'/\' #以用户id为文件名的临时文件夹
            web_path = kwargs[\'web_root\'] + static_path
            file_path = kwargs[\'document_root\']+\'/\'+ static_path
            ret = handle_uploaded_file(req.FILES[\'imgFile\'],file_path,web_path,file_name)
            status[\'url\'] = ret
        else:
            status[\'error\']=1
            status[\'message\']="文件格式不正确"
    else:
        status[\'error\'] = 2
        status[\'message\'] = "文件上传失败"
    return HttpResponse(json.dumps(status))

def uploadFile(req,*args,**kwargs) 获取图片信息，进行处理后返回json数据

2.用户提交数据后处理数据：

def comment(req,*args,**kwargs):
    if req.method=="GET":
        return redirect(\'/\')
    form = CommentForm({\'comment\':req.POST[\'content\'],})
    status = {
        \'error\':0,
        \'message\':"回复成功",
    }
    if not form.is_valid():
        status[\'error\']=1
        status[\'message\']="评论字数过长"
        return HttpResponse(json.dumps(status))

    Xss = CustomXss.XSSFilter(**{\'content\':req.POST[\'content\']})

    #要移动到的目录
    moveToDir = kwargs[\'document_root\'] + \'/\' +"comment/" + str(datetime.date.today()) + \'/\'
    #网站根目录
    baseDir = kwargs[\'base_dir\']
    #网站相对目录
    webPath = kwargs[\'web_root\'] + moveToDir

    #临时文件夹目录
    static_path = "temp/" + str(req.session[\'user_info\'][\'id\']) + \'/\'
    tempDir = kwargs[\'document_root\'] + \'/\' + static_path

    #修改img标签src属性，并且移动图片路径  临时文件夹---->固定目录
    Xss.clean_img(**{\'baseDir\':baseDir,"moveToDir":moveToDir,\'webDir\':webPath,\'tempDir\':tempDir}) #获取到了img src列表

    #XSS过滤
    content = Xss.process()  # 获取到了用户的评论数据

    #模型添加评论数据：
    models = CmModels.CommentModel()
    models.add(**{\'art_id_id\':int(req.POST[\'art_id\']),\'user_id_id\':int(req.session[\'user_info\'][\'id\']),\'comment\':content,\'parent_id\':int(req.POST.get("parent_id",0))})

    return HttpResponse(json.dumps(status))

from repository import models

class CommentModel(object):
    comment = None
    model = None

    Insert_Fields = [\'art_id_id\',\'user_id_id\',\'ctime\',\'parent_id\',\'comment\']
    # Update_Fields = [\'theme\',\'title\',\'summary\',]   评论不允许修改

    def __new__(cls, *args, **kwargs):
        if not cls.comment:
            cls.comment = super(CommentModel,cls).__new__(cls)
        return cls.comment

    def __init__(self):
        if CommentModel.model is None:
            CommentModel.model = models.Comment.objects


    def add(self,**where):
        data = {}
        for item in where.keys():
            if item in self.Insert_Fields:
                data[item]=where[item]
        ret = CommentModel.model.create(
            **data
        )
        return ret

    def search(self,**where):
        data = CommentModel.model.filter(**where).all()
        return data

CommentModel

　　 
补充：http://python.jobbole.com/86506/

    # __new__： 对象的创建，是一个静态方法，第一个参数是cls。(想想也是，不可能是self，对象还没创建，哪来的self)
    # __init__ ： 对象的初始化， 是一个实例方法，第一个参数是self。
    # __call__ ： 对象可call，注意不是类，是对象。
    # 先有创建，才有初始化。即先__new__，而后__init__。  http://www.jb51.net/article/85719.htm
   

下面进行图片处理，将临时文件夹中的图片移动到固定目录，其余多余图片进行删除

from bs4 import BeautifulSoup
import shutil,os

#单例模式实现
class XSSFilter(object):
    __instance = None   #__开头是私有成员，为了不让用户在外面直接访问，将变量进行了重新命名将__spam修改为_classname__spam，导致用户在外面是无法使用__spam的，但是用户一定要使用，那么可以使用替换后的名字_className__spam

    def __new__(cls, *args, **kwargs):  #http://python.jobbole.com/86506/
        if not cls.__instance:
            obj = object.__new__(cls)    #父类执行,创建对象
            cls.__instance = obj
        return以上是关于KindEditor的简单使用，以及上传图片预览图片，用户删除图片后的数据处理（重点）的主要内容，如果未能解决你的问题，请参考以下文章
 
 kindeditor上传问题
 富文本框插件KindEditor 上传图片不走后台直接js上传文件到oss要怎么处理？
 Kindeditor JS 取值问题以及上传图片后回调等
 KindEditor的使用和上传图片的后台处理
 Kindeditor编辑器问题：图片上传后返回路径不对？（ASP版）
 编辑器kindeditor-4.1.10 自动上传图