富文本编辑器editor和kindeditor

【一】editor

• 引入文件

    <link rel="stylesheet" href="{% static 'plugins/Editor/editor/css/editormd.css' %}">
    <script src="{% static 'plugins/Editor/editor/editormd.js' %}"></script>

• Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io)

        <div class="form-group">
            <label for="article_content">文章内容:</label>
            <div id="test-editor">
                     <textarea name="article_content" id="article_content" cols="30" rows="10"
                          class="form-control"></textarea>
            </div>
        </div>

    <script type="text/javascript">
        $(function () {
            var editor = editormd("test-editor", {
                width: "auto",
                height: "400px",
                path: "/static/plugins/Editor/editor/lib/"
            });
        });
    </script>]

【二】kindeditor

• 引入文件

    <script src="{% static 'plugins/Editor/kindeditor/kindeditor-all-min.js' %}"></script>
    <script src="{% static 'plugins/Editor/kindeditor/lang/zh-CN.js' %}"></script>

• http://kindeditor.net/doc.php

• 使用

<textarea name="article_content" id="article_content" cols="30" rows="10"
                          class="form-control"></textarea>

  KindEditor.ready(function(K) {
                '#article_content', {
                width: '700px',
                themeType : 'simple'
        });

【三】添加内容

class ArticleAdd(View):
    def get(self, request, *args, **kwargs):
        # article_obj_all = Article.objects.filter(blog=request.user.blog)
        category_obj_all = CategoryClass.objects.filter(blog=request.user.blog)
        tag_obj_all = CategoryTag.objects.filter(blog=request.user.blog)

        return render(request, 'add_article.html', locals())

    def post(self, request, *args, **kwargs):
        data = request.POST
        article_title = data.get('article_title')
        article_content = data.get('article_content')
        article_class = data.get('article_class')
        print(article_class)
        article_tag = data.getlist('article_tag')
        print(article_tag)
        article_obj=Article.objects.create(title=article_title, content=article_content, blog=request.user.blog,
                               category=article_class)
        for article_tag_id in article_tag:
            tag_obj=CategoryTag.objects.get(id=article_tag_id)
            ArticleToTag.objects.create(article=article_obj,tag=tag_obj)
        return redirect('/backend/backend/')

【四】XSS攻击问题

• https://www.cnblogs.com/dream-ze/p/17571623.html

【1】解决desc和script问题

class ArticleAdd(View):
    def get(self, request, *args, **kwargs):
        # article_obj_all = Article.objects.filter(blog=request.user.blog)
        category_obj_all = CategoryClass.objects.filter(blog=request.user.blog)
        tag_obj_all = CategoryTag.objects.filter(blog=request.user.blog)

        return render(request, 'add_article.html', locals())

    def post(self, request, *args, **kwargs):
        data = request.POST
        article_title = data.get('article_title')
        article_content = data.get('article_content')
        article_class = data.get('article_class')
        print(article_class)
        article_tag = data.getlist('article_tag')
        print(article_tag)
        # 创建 BS4对象
        soup = BeautifulSoup(article_content, 'lxml')
        desc = soup.text[:50]
        # 获取所有标签
        tags = soup.find_all()
        # 删除指定标签
        for tag in tags:
            if tag.name == "script":
                tag.decompose()
        article_content = str(soup)
        self.__save_data(
            request=request,
            article_title=article_title,
            desc=desc,
            article_content=article_content,
            article_class=article_class,
            article_tag=article_tag
        )
        return redirect('/backend/backend/')

    def __save_data(self, request, article_title, desc, article_content, article_class, article_tag):
        article_obj = Article.objects.create(title=article_title, desc=desc, content=article_content,
                                             blog=request.user.blog,
                                             category=article_class)
        for article_tag_id in article_tag:
            tag_obj = CategoryTag.objects.get(id=article_tag_id)
            ArticleToTag.objects.create(article=article_obj, tag=tag_obj)

【2】解决图片上传问题

• 后端

def article_upload_img(request):
    article_img_obj=request.FILES.get("imgFile")
    # 存放的位置
    img_dir_path=os.path.join(settings.BASE_DIR,'media/article_img')
    # 保证文件路径存在
    os.makedirs(img_dir_path,exist_ok=True)
    img_path=os.path.join(img_dir_path,article_img_obj.name)
    with open(img_path,'wb') as f:
        # Django自带的数据流写入
        for data in article_img_obj.chunks():
            f.write(data)
    '''
     //成功时
     {
             "error" : 0,
             "url" : "http://www.example.com/path/to/file.ext"
     }
     //失败时
     {
             "error" : 1,
             "message" : "错误信息"
     }
     '''
    return CommonReponse(error=0,url=f'/media/article_img/{article_img_obj.name}')

• 前端
• 通过自定义函数，解决文件上传一直旋转的问题

 KindEditor.ready(function (K) {
            window.editor = K.create('#article_content', {
                "width": "100%",
                "height": "400px",
                "resizeType": 1,
                "uploadJson": "{% url 'article_upload_img' %}",
                "extraFileUploadParams": {
                    "csrfmiddlewaretoken": "{{ csrf_token }}"
                }
            });
        });