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

http://kindeditor.net/doc.php

一、编辑器使用方法

1. 下载编辑器

下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。

下载页面: http://www.kindsoft.net/down.php

2. 部署编辑器

解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/

Note

您可以根据需求删除以下目录后上传到服务器。

asp - ASP程序

asp.net - ASP.NET程序

php - PHP程序

jsp - JSP程序

examples - 演示文件

3. 修改HTML页面

  1. 在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id" name="content" style="width:700px;height:300px;">

&lt;strong&gt;HTML内容&lt;/strong&gt;

</textarea>
  1. 在该HTML页面添加以下脚本。
<script charset="utf-8" src="/editor/kindeditor.js"></script>

<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>

<script>

        KindEditor.ready(function(K) {

                window.editor = K.create('#editor_id');

        });

</script>

二、在博客中使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

        }

        .header{

            height: 50px;

            background-color: #2e6da4;

            line-height: 50px;

            color: white;

        }

        .header span{

            margin-left: 50px;

            font-size: 25px;

        }

        .add_body{

            width: 80%;

            margin: 0 auto;

        }

        #artical_title{

            width: 300px;

        }

    </style>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">

</head>

<body>

    <div class="header">

        <span>博客后台</span>

    </div>

    <div class="add_body">

        <h1>文章添加</h1>

        <label for="artical_title">添加文章:</label>

        <div>

            <form method="post" action="">

                {% csrf_token %}

                <input id="artical_title" name="artical_title" class="form-control" type="text">

                <p><label for="artical_content">文章内容</label></p>

                <textarea id="artical_content" name="artical_content" style="width:700px;height:300px;">

                &lt;strong&gt;HTML内容&lt;/strong&gt;

                </textarea>

                <p><input type="submit" class="btn btn-info" value="提交"></p>

            </form>

        </div>

    </div>

    <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>

    <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>

    <script src="/static/bootstrap-3.3.7-dist/js/jquery-1.12.4.js"></script>

    <script>

            KindEditor.ready(function(K) {

                    window.editor = K.create('#artical_content', { //这里定义需要对哪个textarea进行装饰

                        resizeType:0,

                        uploadJson:"/blog/backend/upload/", //定义文件的上传路由

                        extraFileUploadParams:{

                            csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()

                        },

                        filePostName:"upload_img", //定义上传后的文件"name"属性名称，便于后台request获取

                    });

            });

    </script>

</body>

</html>

add_artical.html

def add_artical(request, username):

    if request.method == "POST":

        user = request.user

        artical_title = request.POST.get("artical_title")

        artical_content = request.POST.get("artical_content")

        # desc = artical_content[0:150]

        # 解释html标签

        from bs4 import BeautifulSoup

        # html.parser为解析器，是python标准库

        bs = BeautifulSoup(artical_content, "html.parser")

        desc = bs.text[0:150] + "..."

        # 过滤非法标签

        for tag in bs.find_all():

            if tag.name in ["script", "link"]:

                # 将该非法标签从对象中移除

                tag.decompose()

        # 打印结果为"123 <class 'bs4.BeautifulSoup'>"

        print(bs,type(bs))

        try:

            artical_obj = models.Artical.objects.create(user=user, desc=desc, title=artical_title)

            models.ArticalDetail.objects.create(content=str(bs), artical=artical_obj)

        except:

            return HttpResponse("更新文章失败 ")

        return HttpResponse("添加成功")

    return render(request, "add_artical.html")

from Hero import settings

import os, json

def upload(request):

    obj = request.FILES.get("upload_img")

    # print("name", obj.name)

    path = os.path.join(settings.MEDIA_ROOT, "add_artical_img", obj.name)

    with open(path, "wb") as f:

        for line in obj:

            f.write(line)

    res = {

        "error": 0,

        "url": "/media/add_artical_img/" + obj.name

    }

    return HttpResponse(json.dumps(res))

views.py

re_path('backend/add_artical/(?P<username>\w+)', views.add_artical),

    path('backend/upload/', views.upload),

urls.py

 

KindEditor的使用的更多相关文章

  1. 让kindeditor显示高亮代码

    kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: ...

  2. Kindeditor在ThinkPHP框架下的使用

    1.简单调用Kindeditor的图片上传功能: a.Html部署图片预览,记录图片上传成功之后的路径,以及上传图片点击按钮 <tr> <td>活动图片:</td> ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（36）-文章发布系统③-kindeditor使用

    系列目录 我相信目前国内富文本编辑器中KindEditor 属于前列,详细的中文帮助文档,简单的加载方式,可以定制的轻量级.都是系统的首选 很多文章教程有kindeditor的使用,但本文比较特别可能 ...

  4. KindEditor 给KindEditor赋值

    在项目的过程中,使用了KindEditor编辑器,然后在赋值的时候,我的编辑器ID是content,然后我想通过$("#content").html()来赋值,发现赋值失败,后来百 ...

  5. Ajax 提交KindEditor的数据

    这次我是在EasyUI中使用了KindEditor的编辑器,按照官方给的代码,总是无法获取编辑器里面的值(内容),如下:         KindEditor.ready(function (K) { ...

  6. 如何在一个页面添加多个不同的kindeditor编辑器

    kindeditor官方下载地址:http://kindeditor.net/down.php    (入门必看)kindeditor官方文档:http://kindeditor.net/doc.ph ...

  7. kindeditor 去掉网络图片上传功能

    kindeditor是一款开源的富文本编辑器,其内容设置均为可配置,使用比较灵活. 去掉网络图片的页面:allowImageRemote: false, 修改上传的图片的name:filePostNa ...

  8. 关于JqueryEasyUI集合Kindeditor

    写在前面 上一篇<初试JqueryEasyUI(附Demo)>: 在上一篇说过,下面要试下easyui集合编辑器,关于编辑器网上有很多,ckeditor.ueditor.kindedito ...

  9. jquery弹出下拉列表插件（实现kindeditor的@功能）

    这几天有个工作需求,就是在富文本输入区域(kindeditor)可以有@功能,能够容易提示用户名的(像在qq群组@人一样).在网上找了一个叫bootstrap-suggest的插件,却不能满足我的需求 ...

  10. kindeditor在光标处插入编辑器外的数据

    页面 <div class="form-group clearfix"> <label class="control-label col-sm-3 co ...

随机推荐

  1. HUAWEI手机解锁

    1.关机:2.同时按上音量键和电源键,直至出现Android system recovery,按下音量键选择wipe date/factory reset->Yes-delete all use ...

  2. ASP.NET中高级程序员 面试题

    1. 简要说一下.Net的编译过程. 2.ASP.NET与ASP的区别 3.谈一下ASP.NET页面生命周期 4.ASP.NET程序的运行机制.可以从一个页面的请求到返回的角度谈 5.Javascri ...

  3. gzip是一种数据格式,deflate是一种压缩算法

    gzip是一种数据格式,默认且目前仅使用deflate算法压缩data部分:deflate是一种压缩算法,是huffman编码的一种加强. deflate与gzip解压的代码几乎相同,可以合成一块代码 ...

  4. Maven(六) eclipse 使用Maven deploy命令部署构建到Nexus

    转载于:http://blog.csdn.net/jun55xiu/article/details/43051627 1  应用场景:SYS-UTIL(系统工具)项目部署.构建成JAR包(SYS-UT ...

  5. mac 下 python链接mysql

    安装过程 :http://blog.topspeedsnail.com/archives/6018 注意 报错的话要先装一个东西 http://cdn.mysql.com/Downloads/Conn ...

  6. Ubuntu-Tensorflow 程序结束掉GPU显存没有释放的问题

    笔者在ubuntu上跑Tensorflow的程序的时候,中途使用了Win+C键结束了程序的进行,但是GPU的显存却显示没有释放,一直处于被占用状态. 使用命令 nvidia-smi 显示如下 两个GP ...

  7. Python全栈工程师（Python3 所有基础内容 0-0）

    ParisGabriel              每天坚持手写  一天一篇  决定坚持几年 为了梦想为了信仰    开局一张图     Python一个月的基础语法 基本就到这咯    接下来是数据 ...

  8. 41-邮差送信(dfs)

    邮差送信 (15分)C时间限制:1 毫秒 |  C内存限制:3000 Kb题目内容: 有一个邮递员要在n个城市之间来回送信.但有的城市之间有大路相连而有的没有路.现在要由一个城市到另一个城市送信,中途 ...

  9. 455. Assign Cookies

    static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...

  10. Windows 访问 Oracle

    开发环境 vs2010 安装ODTwithODAC1120320_32bit.zip Win2003 64 位 1.不使用EF需要安装ODAC112021Xcopy_x64.zip开发环境中的Orac ...