Django-- KindEditor 富文本编辑器使用
2024-10-14 09:59:44
KindEditor是一款还不错的开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。之所以推荐这一款编辑器,是因为它非常的轻量化,也不需要安装,从而耦合度非常低,无论是使用表单提交内容还是异步提交,都非常方便,这里简单介绍一下如何在Django2.0.4中使用这款富文本编辑器。
首先 在官网下载文件 http://kindeditor.net/down.php
解压后,删除掉一些没有用的文件,只留下lang(语言包) themes(风格包) plugins(插件) 和 kindeditor-all-min.js
将kindeditor文件夹放到项目目录的static/js文件中去
最后在页面中就可以使用了
首先导入
<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>
最新文章
- directly receive json data from javascript in mvc
- Ecshop的购物流程代码分析详细说明
- 如果你喜欢Python 那么你不得不知的几个开源项目
- EasyMock
- zookeeper_04:curator
- Network Panel说明
- APP导致界面卡死,iPhone卡死
- JS的组成部分、引入页面的方法以及命名规范
- Unity20172.0 Android平台打包
- 【转载】什么是Windows USB设备路径,它是如何格式化的?
- 多线程之Executors基本使用
- 剑指offer 8.递归和循环 跳台阶
- Python批量执行oracle中的insert语句
- 【原创】C++之自定义高效的swap(1)
- Beta阶段第五次冲刺
- [整理]Error: [ngRepeat:dupes]的解决方法
- [转]你真的了解 console 吗
- poj3680
- NOIP模拟
- 使用Filter解决登录中乱码问题
热门文章
- weak_ptr<;T>;智能指针
- 巧用Openlayers4的Style
- SNF软件开发机器人-子系统-功能-数据录入方式
- (7) MySQL数据库备份详解
- 如何让eclipse恢复默认布局
- eclipse is missing required source folder src/test/java
- 【数据库】——SQLite使用drop column删除表字段
- hdoj:2058
- DR、BDR、SBR、ASBR等名词的解释和原理
- List接口的实现类(Vector)(与ArrayList相似,区别是Vector是重量级的组件,使用使消耗的资源比较多。)