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>

Django-- KindEditor 富文本编辑器使用的更多相关文章

  1. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...

  2. KindEditor富文本编辑器使用

    我的博客本来打算使用layui的富文本编辑器,但是出了一个问题,无法获取编辑器内容,我参考官方文档,获取内容也就那几个方法而已,但是引入进去后始终获取的值为空,百度和bing都试过了,但是始终还是获取 ...

  3. kindeditor富文本编辑器初步使用教程

    下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要FQ:或者直接CSDNhttp://download.csdn.net/downlo ...

  4. (转)淘淘商城系列——KindEditor富文本编辑器的使用

    http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...

  5. (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)

    http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...

  6. coding++:快速构建 kindeditor 富文本编辑器(一)

    此案例 demo 为 SpringBoot 开发 1.官网下载相关资源包:http://kindeditor.net/down.php 2.编写页面(引入相关JS) <!DOCTYPE html ...

  7. Django配置富文本编辑器kindeditor

    一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...

  8. 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 ...

  9. django项目中使用KindEditor富文本编辑器。

    先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindedi ...

  10. django项目中使用KindEditor富文本编辑器

    先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindedi ...

随机推荐

  1. top 命令

    首先介绍top中一些字段的含义: VIRT:virtual memory usage 虚拟内存1.进程"需要的"虚拟内存大小,包括进程使用的库.代码.数据等 2.假如进程申请100 ...

  2. Flutter Android 真机调试指南

    操作预览: 准备一条数据线,并连接电脑和手机: 使用 flutter devices 查看设备能否找到: 在 Android studio 中选择你的真机,然后点击 [debug]: 真机自动安装Ap ...

  3. Google I/O 官方应用中的动效设计

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jILRvRTrc/article/details/82881743 作者:Nick Butcher, ...

  4. 【OpenFOAM案例】03 Docker安装OpenFOAM

    "工欲善其事必先利其器",软件装不上,讲再多的使用技巧也是白搭.近期不少留言说OpenFOAM不容易安装,今天来谈谈如何在Linux下利用Docker安装OpenFOAM. Lin ...

  5. Java编程的逻辑 (94) - 组合式异步编程

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...

  6. Maven知识总结(转)

    原文地址:http://blog.csdn.net/caihaijiang/article/details/6664910 1.Maven内置变量说明: ${basedir} 项目根目录 ${proj ...

  7. FasterRCNN 提升分类精度(转)

    近年来,随着深度学习的崛起,计算机视觉得到飞速发展.目标检测作为计算机视觉的基础算法,也搭上了深度学习的快车.基于Proposal的检测框架,从R-CNN到Faster R-CNN,算法性能越来越高, ...

  8. ajax-page局部刷新分页实例

    1.引用文件:connect.php <?php $host="localhost"; $db_user="root"; $db_pass="r ...

  9. React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块

    尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...

  10. axios设置application/x-www-form-urlencoded

    this.$axios({ method: 'post', url: 'http://www.17huo.com/tusou/deeplorSearch.html', headers: { 'Cont ...