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. Yii中使用RBAC完全指南

    开始准备 Yii提供了强大的配置机制和很多现成的类库.在Yii中使用RBAC是很简单的,完全不需要再写RBAC代码.所以准备工作就是,打开编辑器,跟我来.设置参数.建立数据库 在配置数组中,增加以下内 ...

  2. Java匿名内部类的学习

    新建一个抽象类或者接口,抽象类中只要有一个抽象方法就是抽象类,接口的定义是:里面的方法全部都是抽象方法,接口和抽象类不能直接实例化,需要子类来实现 /* 匿名内部类: 1.匿名内部类其实就是内部类的简 ...

  3. 迷你MVVM框架 avalonjs 0.91发布

    本版本修了一些BUG与不合理的地方,感谢感谢ztz, 民工精髓, 姚立, qiangtou等人指正. 处理AMD加载 旧式IE下移除script节点内存泄漏的问题 fix firefox 全系列vis ...

  4. 为什么需要maven,maven能解决什么问题 ,maven是什么

  5. ConcurrentDictionary内部机制粗解

    ConcurrentDictionary是线程安全类,是什么在保证? 内部类 private class Tables { internal readonly Node[] m_buckets; // ...

  6. oracle返回最大值一条记录

    虽然网上例子很多,但是试过多种办法都无效,原代码出处: https://blog.csdn.net/qyshibb/article/details/73332075 这个例子简单有效 select p ...

  7. Mac 安装Django

    首先 我电脑上的python  是 安装Django  是需要通过 pip  来安装的  最新办的python3.4 应该内置了pip  因此这里 需要下载安装pip pip是常用的Python包管理 ...

  8. 如何去掉UItableview headerview黏性

    有时候使用UITableView所实现的列表,会使用到header view,但是又不希望它粘在最顶上而是跟随滚动而消失或者出现,下面的代码片段就是实现此功能 sectionHeaderHeight ...

  9. 8-cin cout PK scanf printf(速度快慢问题对比)

    我们在c++ 中使用cin cout很方便但速度很慢,导致有些题目用cin就超时而用scanf则就ac了,那到底改用谁? cin慢是有原因的,其实默认的时候,cin与stdin总是保持同步的,也就是说 ...

  10. Levenshtein计算相似度距离

    使用Levenshtein计算相似度距离,装下模块,调用下函数就好. 拿idf还得自己去算权重,而且不一定准确度高,一般做idf还得做词性归一化,把动词形容词什么全部转成名词,很麻烦. Levensh ...