【Django组件】KindEditor富文本编辑器上传文件,html样式文本,VUE异步提交数据(易懂版)
1:下载与配置
适合版本: python3
下载:http://kindeditor.net/down.php
文档:http://kindeditor.net/doc.php
将文件包放入static文件夹内并且配置:
settings.py配置: STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
os.path.join(BASE_DIR, "media"),
] # Django用户上传的都叫media文件
MEDIA_URL = "/media/"
# media配置,用户上传的文件都默认放在这个文件夹下
MEDIA_ROOT = os.path.join(BASE_DIR, "media") REST_FRAMEWORK = {
"DEFAULT_AUTHENTICATION_CLASSES": [],
"DEFAULT_PERMISSION_CLASSES": [],
}
2:前端代码:
html部分: <div id="app"> <div>
<p>内容(TinyMCE编辑器,支持拖放/粘贴上传图片) </p>
<textarea name="article_content" id="article_content" cols="" rows=""
style="width: 100%" v-model="article_contents">
</textarea>
</div>
<input type="submit" class="btn btn-info" @click="submits"> </div> JS部分:
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script src="/static/js/popper.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
// 配置属性
<script>
KindEditor.ready(function (K) {
window.editor = K.create('#article_content', {
width: "100%",
height: "500px", allowFileManager: true,
afterCreate: function () {
this.sync();
},
afterBlur: function () {
this.sync();
}, uploadJson: "/KindEditor/up/", // 请求路由 filePostName: "upload_img" // 后端获取的参数名字 });
}); </script>
// 配置属性
<script type="text/javascript" src="/static/js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
article_contents: "",
},
methods: {
submits() {
console.log("KindEditor", KindEditor.instances[0].html()) // 获取到图片的/样式以及内容
}, }
})
</script>
3:上传文件,图片之类的,配置后端路由
1:上传文件路由配置:
# 上传图片,文件
url('KindEditor/up/', upImage.upload), 2:upImage.py: # 上传图片
from django.http import HttpResponse
from car import settings
import os, json
from django.shortcuts import render, HttpResponse, redirect def upload(request):
# 上传服务器图片
image_fils = request.FILES.get("upload_img")
path = os.path.join(settings.MEDIA_ROOT, "userimg", image_fils.name) # 路径 # 创建文件夹目录
file_path = os.path.join(settings.MEDIA_ROOT, "userimg")
if not os.path.exists(file_path):
os.makedirs(file_path) # 写到服务器
with open(path, "wb") as f:
for line in image_fils.chunks():
f.write(line)
f.close() # 返回图片给前端
res = {
"error": 0,
"url": "/static/userimg/" + image_fils.name
} return HttpResponse(json.dumps(res))
【Django组件】KindEditor富文本编辑器上传文件,html样式文本,VUE异步提交数据(易懂版)的更多相关文章
- element-ui上传组件,通过自定义请求上传文件
记录使用element-ui上传组件,通过自定义请求上传文件需要注意的地方. <el-upload ref="uploadMutiple" :auto-upload=&quo ...
- svs 在创建的时候 上传文件夹 bin obj 这些不要提交
svs 在创建的时候 上传文件夹 bin obj 这些不要提交 右键-去除版本控制并增加到忽略列表
- django下的ckeditor 5.0 文本编辑器上传功能。
完整的后台界面怎么可以没有文本编辑器,但是django的admin界面很疑惑,没有自带文本编辑器,好在网上有不少成型的库可以用 我用的是ckeditor编辑器,安装和配置我引用别人的博客 这篇博客配置 ...
- Linux下开发python django程序(设置admin后台管理上传文件和前台上传文件保存数据库)
1.项目创建相关工作参考前面 2.在models.py文件中定义数据库结构 import django.db import modelsclass RegisterUser(models.Model) ...
- 7月3日 Django 头像预览、用户上传文件操作、logging、debug_tool_bar
1. 注册功能 1. 头像预览 //头像预览 $('#id_avatar').change(function () { console.log(this.files[0]) //找到选中的头像文件 v ...
- [k]自定义上传文件按钮样式
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap改变上传文件按钮样式,并显示已上传文件名
参考博文: html中,文件上传时使用的<input type="file">的样式自定义 html中<input type="file"&g ...
- 怎样用纯HTML和CSS更改默认的上传文件按钮样式
如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦.看看下面的不同浏览器的截图.很明显的,他们长得很不一样. 我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览 ...
- 巧妙利用label标签实现input file上传文件自定义样式
提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可 但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同 我们往 ...
随机推荐
- 从"UDF不应有状态" 切入来剖析Flink SQL代码生成
从"UDF不应有状态" 切入来剖析Flink SQL代码生成 目录 从"UDF不应有状态" 切入来剖析Flink SQL代码生成 0x00 摘要 0x01 概述 ...
- java 多线--静态代理模式
我们使用 java 多线程时,都需要通过线程代理对象来启动线程,常见的写法: new Thread(target).start(); 这在设计模式中叫静态代理模式,静态代理模式组成; 1.公共接口 2 ...
- 实现Nginx Upload 模块 功能上传文件。
分析(也许我表达的让人难以理解,但是我想说一句,直接实践是最好的.....): 一.Ningx 上传( 1.安装Nginx 的模块文件(upload):https://www.nginx.com/re ...
- Java代码生成器加入postgresql数据库、HikariCP连接池、swagger2支持!
目录 前言 PostgreSql VS MySql HikariCP VS Druid Swagger2 自定义参数配置一览 结语 前言 最近几天又抽时间给代码生成器增加了几个新功能(预计今晚发布 ...
- python-trade
https://tool.lu/pyc/在线反编译pyc import base64 correct = 'XlNkVmtUI1MgXWBZXCFeKY+AaXNt' flag = base64.b6 ...
- QT 执行windows cmd 命令并读取结果
1,写好命令, 2,用QProcess执行,等待完成(有超时), 3,读取结果 注意形如“Program Files”的有 空格 的路径,要加上双引号. QProcess process; QStri ...
- 从一个数对列中找出素数对用于RAS加密的C++程序
#include <iostream> #include <cmath> using namespace std; const int n = 10000; int isPri ...
- MinIO 的分布式部署
目录 1 前言 2 分布式存储可靠性常用方法 2.1 冗余 2.2 校验 3 MinIO存储机制 3.1 概念理解 3.2 纠删码EC(Erasure Code) 3.3 存储形式 4 部署实践 4. ...
- itchat学习
itchat是一个开源的微信个人号接口,可以很方便的使用python调用微信. 教程如下:https://itchat.readthedocs.io/zh/latest/ 简单试玩了一下,觉得还挺有趣 ...
- 使用Xamarin开发即时通信系统 -- 基础篇(大量图文讲解 step by step,附源码下载)...
如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是最好的选择,编写一次,即可发布到Android和iOS平台,真是利器中的利器啊!而且,Xamarin已经被微 ...