$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'), {
                //编辑器配置
                 '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'), {
                 '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>