KindEditor的使用
Posted ttyypjt
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了KindEditor的使用相关的知识，希望对你有一定的参考价值。
KindEditor 是一套开源的在线html编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 javascript 编写，可以无缝地与 Java、.NET、php、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
一、编辑器使用方法
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页面
- 在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id" name="content" style="width:700px;height:300px;"> <strong>HTML内容</strong> </textarea>
- 在该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;"> <strong>HTML内容</strong> </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>
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))
re_path(‘backend/add_artical/(?P<username>\w+)‘, views.add_artical), path(‘backend/upload/‘, views.upload),
以上是关于KindEditor的使用的主要内容，如果未能解决你的问题，请参考以下文章