$Django 在线文本编辑器skindeditor

简介

KindEditor是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

主要特点

快速：体积小，加载速度快
开源：开放源代码，高水平，高品质
底层：内置自定义 DOM 类库，精确操作 DOM
扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能
风格：修改编辑器风格非常容易，只需修改一个 CSS 文件
兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera

　　网址 http://kindeditor.net/doc.php

1.导入使用

<textarea name="content" id="sssssssssssssssssssssssssssssssssssssssssssssssssss" cols="30" rows="10">
<script charset="utf-8" src="/static/kindeditor-4.1.11-zh-CN/kindeditor/kindeditor-all.js"></script>
<script>
        KindEditor.ready(function (K) {
            window.editor = K.create((\'#sssssssssssssssssssssssssssssssssssssssssssssssssss\'), {
                //编辑器配置
                width: \'100%\',
                height: \'500px\',
                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:0,
                //上传图片,uploadJson 指的是上传的路径,也就是咱们的路由
                uploadJson : \'/file_img/\',
                //上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器
                extraFileUploadParams :{
                    \'csrfmiddlewaretoken\':\'{{ csrf_token }}\'},
                //指定上传文件的名字
                filePostName:\'myfile\',
            });

        });
 </script>

2.上传文件/数据使用

1.图片

#上传图片举例
#路由
url(r"file_img/",file_img)
#存图片
def file_img(request):
    #取文件对象 文件后缀名
    img = request.FILES.get (\'myfile\')
    houzui=img.name.split(\'.\')[-1]

    import os
    from day1130 import settings
    import hashlib
    import time
    #hashlib文件存储去重
    h = hashlib.md5 ()
    h.update (bytes (img.name, encoding=\'utf-8\'))
    h.update (bytes (time.strftime(\'%Y-%m-%d\'), encoding=\'utf-8\'))
    name = h.hexdigest ()+\'.\'+houzui
    path = os.path.join (settings.BASE_DIR, \'media\', \'img\')
    #判断路径是否存在
    if not os.path.exists (path):
        os.mkdir (path)
    path=os.path.join(path,name)
    print(path)
    #保存
    with open(path,\'wb\')as f:
        for i in img:
            f.write(i)
    #文档规定 返回一个这样形式的字典
    dic = {
        "error": 0,
        #图片的一个访问路径 src=\'\'
        "url": "/media/img/%s" % name
    }
    return JsonResponse (dic)

2.数据

#发布文章举例 重点 BeautifulSoup4模块安装，使用

def add_wenzhang(request):
    if request.method == \'GET\':
        blog = request.user.blog
        return render (request, \'add_wenzhang.html\', locals ())
    elif request.method == \'POST\':
        \'\'\'
        用一个模块:BeautifulSoup4---bs4---做爬虫,解析html页面
        -安装
        -使用  导入 from bs4 import BeautifulSoup
        :param request:
        :return:
        \'\'\'
        title = request.POST.get (\'title\')
        content = request.POST.get (\'content\')
        from bs4 import BeautifulSoup
        # 解析html文本 防xss脚本注入攻击主要是<script></sccript>标签
        soup = BeautifulSoup (content, \'html.parser\')
        # 简介:这里取 纯文本1到100字符充数
        desc = soup.text[1:100]
        # soup.find_all ()所有标签对象
        for tag in soup.find_all ():
            if tag.name == \'script\':
                # 重点 xss攻击 删除<script></sccript>标签
                tag.decompose ()
        # 没处理的html文本
        print (content)
        # 对象 str()转html文本 存数据库
        print (type (soup))
        models.Wenzhang.objects.create (title=title, desc=desc, blog=request.user.blog, content=str (soup))
        return redirect (\'/guanli/\')

3.文章修改

视图

def update_wen1(request):
    if request.method==\'GET\':
        wen_id=request.GET.get(\'id\')
        content=models.Wen_zhang.objects.filter(id=wen_id).first().content
        return JsonResponse({\'content\':content})

模板

   <form action="/update_wen1/?id={{ wen.id }}" class="form-group" method="post">
        {% csrf_token %}
        <p>添加文章</p>
        <label for="name">标题</label><input type="text" id="name" name="title" class="form-control"
                                           value="{{ wen.title }}">
        <p><textarea id="editor_id" name="content">{{ wen.content }}</textarea></p>
        <input type="submit" class="btn" value="提交">
    </form> <script charset="utf-8" src="/statics/kindeditor/kindeditor-all.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create((\'#editor_id\'), {
                width: \'100%\',
                height: \'500px\',
                resizeType: 0,
                uploadJson: \'/file_img/\',
                {#上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。#}
                extraFileUploadParams: {
                    \'csrfmiddlewaretoken\': \'{{ csrf_token }}\'
                },
                {#指定上传文件的名字#}
                filePostName: \'myfile\',
            });
        });
        window.onload(function () {
            // 取得HTML内容
            alert(1)
            $.ajax({
                url: \'/update_wen1/?id={{ wen.id }}\',
                type: \'get\',
                success(data) {
                    html = editor.html(data.content);
                }
            })
        })

    </script>