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. Docker入门 - 002 Docker 的简单操作

    系统要求:CentOS 7.2 64 位操作系统. Docker 的简单操作 下载镜像 下载一个官方的 CentOS 镜像到本地 docker pull centos 下载好的镜像就会出现在镜像列表里 ...

  2. Mybatis 级联查询时只查出了一条数据

    造成这个问题的原因是: 主表和明细表的id字段名相同造成的. 问题的关键在于resultMap中如果不定义类似主键之类的能够区分每一条结果集的字段的话,会引起后面一条数据覆盖前面一条数据的现象.

  3. CentOS5.5上安装Python2.7及ez_setup和pip包

    CentOS5.5上安装Python2.7及ez_setup和pip包 下载 首先从Python官方下载源代码包下载 编译安装 这里将python安装到/opt/python27文件夹下 tar xv ...

  4. 关于asyncio知识(二)

    一.asyncio之—-入门初探 通过上一篇关于asyncio的整体介绍,看过之后基本对asyncio就有一个基本认识,如果是感兴趣的小伙伴相信也会尝试写一些小代码尝试用了,那么这篇文章会通过一个简单 ...

  5. Java基础(四)线程快速了解

    开始整理线程之前,之前有个命令忘记整理了,先整理一下jar命令的使用 Jar包 其实可以理解是java的压缩包方便使用,只要在classpath设置jar路径即可数据库驱动,ssh框架等都是以jar包 ...

  6. Android Studio添加原生库并自动构建

    [时间:2017-09] [状态:Open] [关键词:Android,Android Studio,gradle,native,c,c++,cmake,原生开发,ndk-build] 0 引言 最近 ...

  7. 进一步聊聊weight initialization

    深度学习模型训练的过程本质是对weight(即参数W)进行更新,这需要每个参数有相应的初始值. 有人可能会说:"参数初始化有什么难点?直接将所有weight初始化为0或者初始化为随机数!&q ...

  8. tun/tap设备_虚拟网卡

    tun/tap 驱动程序实现了虚拟网卡的功能,tun表示虚拟的是点对点设备,tap表示虚拟的是以太网设备,这两种设备针对网络包实施不同的封装.利用tun/tap 驱动,可以将tcp/ip协议栈处理好的 ...

  9. 第四百一十三节,python面向对象,组合、类创建的本质、依赖注入

    组合 组合举例组合就是多个类,或者若干类联合起来完成一个任务下面举例两个类联合起来完成一个任务为了降低代码的耦合度,我们一般不会在一个类里实例化另外一个类,都是将一个类在外面实例化后传参到另外一个来这 ...

  10. 【Clojure 基本知识】小技巧s

    ;;模拟console原位更新输出 ;;空格擦除法,输出空格,是为了擦除短字符串尾部没有占用的位置,因为退格只是回退,并不删除(dotimes [_ 10](let [n (rand) sn (.su ...