Django怎样实现KindEditor的基本使用和文件操作

最新推荐文章于 2021-06-24 17:29:12 发布

花想容~Bxy

最新推荐文章于 2021-06-24 17:29:12 发布

阅读量228

点赞数

分类专栏： Django

本文链接：https://blog.csdn.net/qq_42992704/article/details/104416407

版权

Django 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在博客系统中发表文章和回复评论用到的就是kindeditor框。

在实现之前我们要下载kindeditor

可以在github地址上下载：https://github.com/kindsoft/kindeditor

我们简单的实现下看下效果。

urls.py

from django.contrib import admin
from django.urls import path,re_path
from app import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('kind/',views.kind),
]

views.py

def kind(request):
    return render(request,'kind.html')

kind.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 500px;margin:0 auto;">
        <textarea id="content"></textarea>
    </div>

    <script src="/static/jquery-1.12.4.js"></script>
    <script src="/static/kindeditor-master/kindeditor-all.js"></script>
    <script>
        $(function (){
            KindEditor.create('#content',{})
        })
    </script>
</body>
</html>

效果：

这样我们便可以看到这个效果的实现。

我们可以查看文档：http://kindeditor.net/docs/option.html

在这里面我们可以了解到完整的初始化参数。

<script src="/static/jquery-1.12.4.js"></script>
    <script src="/static/kindeditor-master/kindeditor-all.js"></script>
    <script>
        KindEditor.create('#content',{
                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'
]
            })

    </script>

items:就是为了配置工具台，不让工具全部使用，想要留下来显示的就写入到items中。数据类型: Array

还有下面一些数值看这些文档：http://kindeditor.net/docs/option.html#id99

在查询文档时，就可以快速完成想要搭建的工具。