Django-- KindEditor 富文本编辑器使用
KindEditor是一款还不错的开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。之所以推荐这一款编辑器,是因为它非常的轻量化,也不需要安装,从而耦合度非常低,无论是使用表单提交内容还是异步提交,都非常方便,这里简单介绍一下如何在Django2.0.4中使用这款富文本编辑器。
<script src="{% static 'js/jquery-1.12.1.min.js' %}"></script>
<script src="{% static 'js/axios.js' %}"></script>
<script src="{% static 'js/kindeditor/kindeditor-all-min.js' %}"></script>
body中使用
内容:<textarea id='content' value="">{{i.content}}</textarea>
<script>
initKindEditor();
function initKindEditor() {
var kind = KindEditor.create('#content', {
width: '100%', // 文本框宽度(可以百分比或像素)
height: '300px', // 文本框高度(只能像素)
minWidth: 200, // 最小宽度(数字)
minHeight: 400 // 最小高度(数字)
});
}
</script>
异步将富文本内容提交给后台,就需要动态获取富文本的内容
<script>
function add(){
var content = $(document.getElementsByTagName("iframe")[].contentWindow.document.body).html()
let params = new URLSearchParams();
params.append('id',$("#id").val())
params.append('title',$("#tit").val())
params.append('author',$("#author").val())
params.append('content',content)
axios({
url:'news_update',
data:params,
method:'post',
responseType:"text",
})
.then(function(obj){
console.log(obj.data)
if(obj.data == '更新成功'){
alert("更新成功")
window.location.href="news" }
else{
alert("更新失败")
}
})
} </script>
Django-- KindEditor 富文本编辑器使用的更多相关文章
- django的admin或者应用中使用KindEditor富文本编辑器
由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...
- KindEditor富文本编辑器使用
我的博客本来打算使用layui的富文本编辑器,但是出了一个问题,无法获取编辑器内容,我参考官方文档,获取内容也就那几个方法而已,但是引入进去后始终获取的值为空,百度和bing都试过了,但是始终还是获取 ...
- kindeditor富文本编辑器初步使用教程
下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要FQ:或者直接CSDNhttp://download.csdn.net/downlo ...
- (转)淘淘商城系列——KindEditor富文本编辑器的使用
http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...
- (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...
- coding++:快速构建 kindeditor 富文本编辑器(一)
此案例 demo 为 SpringBoot 开发 1.官网下载相关资源包:http://kindeditor.net/down.php 2.编写页面(引入相关JS) <!DOCTYPE html ...
- Django配置富文本编辑器kindeditor
一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...
- Django之富文本编辑器kindeditor 及上传
1.什么是富文本编辑器 百度百科(https://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 ...
- django项目中使用KindEditor富文本编辑器。
先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindedi ...
- django项目中使用KindEditor富文本编辑器
先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindedi ...
随机推荐
- eclipse工具中使用Data Source Explorer连接数据库(MySQL)
1.进入Eclipse工具,打开Data Source Explorer.Window==>Show View==>Data Source Explorer(注:如果找不到请选择Other ...
- James 如何作为服务在后台启动
james 启动后是在前台运行的,就像你跑一个微服务,前台运行显然不合理,关闭ssh后就会断开,所以我们得配置在后台,使用service配置即可 配置 james/bin 下的phoenix.sh,配 ...
- k8s dev
0. install golang 1.9.1 https://golang.org/doc/install 1. development.md https://github.com/kubernet ...
- 判断回文字符串、回文链表、回文数(python实现)
所谓回文字符串,就是正读和反读都一样的字符串,比如"level"或者"noon"等等就是回文串.即是对称结构 判断回文字符串 方法一: def is_palin ...
- 【iCore1S 双核心板_ARM】例程十八:SD_IAP_FPGA实验——更新升级FPGA
实验现象及操作说明: 1.烧写程序成功,绿色ARM·LED灯点亮,三色FPGA·LED灯循环点亮,烧写失败,如果挂载SD卡失败,红灯快闪,如果打开文件失败,蓝灯快闪,读取文件指针移动失败,白灯点亮,升 ...
- 大数据:Parquet文件存储格式
一.Parquet的组成 Parquet仅仅是一种存储格式,它是语言.平台无关的,并且不需要和任何一种数据处理框架绑定,目前能够和Parquet适配的组件包括下面这些,可以看出基本上通常使用的查询引擎 ...
- Java对象序列化全面总结
前言 Java允许我们在内存中创建可复用的Java对象,但一般情况下,这些对象的生命周期不会比JVM的生命周期更长.但在现实应用中,可能要求在JVM停止运行之后能够保存(持久化)指定的对象,并在将来重 ...
- ABR与ASBR区别
ABR 区域边界路由器 area border router 位于一个或多个OSPF区域边界上.将这些区域连接到主干网络的路由器.ABR被认为同时是OSPF主干和相连区域的成员.因此,它们同时维护着描 ...
- golang加油!
- BarTender中如何为称重设备设置秤显示?
有关BarTender 2016表单中的称显示,前面都给大家介绍过了,包括秤显示属性设置,链接数据源属性设置等等.本文,将以图文并茂的方式,教大家如何为称重设备设置秤显示控件. 我们打开BarTend ...