Kindeditor编辑器使用

最新推荐文章于 2024-08-26 14:57:12 发布

kangle0224

最新推荐文章于 2024-08-26 14:57:12 发布

阅读量2.4k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/kangle0224/article/details/84777506

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

一、下载kindeditor

一、下载kindeditor

1.1 从http://kindeditor.net/down.php下载最新的软件,使用方法：http://kindeditor.net/docs/usage.html

1.2 放到项目中，删除不需要的文件夹

在这里插入图片描述

1.3 导入kindeditor-all.js和zh-CN.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <textarea name="content" id="content"></textarea>

    <script src="/static/plugins/kindeditor/kindeditor-all.js"></script>
    <script src="/static/plugins/kindeditor/lang/zh-CN.js"></script>
    <script>
        var editor;
        KindEditor.ready(function(K) {
            editor = K.create('#content', {
                width: '700px',
                height: '100px',
                allowPreviewEmoticons: true,
                allowImageUpload: true,
                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>
</body>
</html>

note：

1.3.1 resizeType

2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。

数据类型: Int
默认值: 2

1.3.2 allowPreviewEmoticons

true时鼠标放在表情上可以预览表情。

数据类型: Boolean
默认值: true

1.3.3 allowImageUpload

true时显示图片上传按钮。

数据类型: Boolean
默认值: true

1.3.4 items

配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。

数据类型: Array
默认值:

1.4 创建url和views函数

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index', views.index),
    path('ajax1', views.ajax1),
    path('ajax2', views.ajax2),
    path('editor', views.editor),  # 使用这条路由规则
]

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

1.5 启动工程

在这里插入图片描述

kangle0224

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录