富文本编辑框的使用,包含用户的上传图片和回显
<script src="/static/js/kindeditor-all-min.js"></script>
<script src="/static/js/zh-CN.js"></script>
2.html中写一个textarea文本框
<textarea class="form-control" id="editor_id"></textarea>
3.初始化kindeditor
<script type="text/javascript">
var editor;
KindEditor.ready(function(K) {
//详细配置可以参考官方文档
editor = K.create('#editor_id', { //这里的id 为textarea的ID
width : '100%',
height:"300px",
allowImageUpload : true,
uploadJson:"http://127.0.0.1:8005/news_file_upload.html/",
extraFileUploadParams:{
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']")
} ,
//上传类型,分别为image、flash、media、file
{#dir : "image",#}
items : [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about']
});
});
</script>
4.django后台代码
settings.py里配置
MEDIA_ROOT = os.path.join(BASE_DIR, "news_file") # 我这里默认上传到news_file目录下
urls.py里配置
from django.views.static import serve
from django.conf import settings
url(r'^news_file/(?P<path>.*)$', serve, {"document_root": settings.MEDIA_ROOT}),
###### 4.1获取文件路径
def createfiles(path):
file_dirs = os.path.join(settings.BASE_DIR,'news_file','imgs',path)
path = os.path.join('news_file/imgs/',path)
if not os.path.exists(path):
os.makedirs(file_dirs)
return path
4.2 文件上传
def news_upload(request):
if request.method == 'POST':
item = {}
file = request.FILES.get('imgFile')
print(file.name)
ext_name = file.name.rfind('.')
print(ext_name)
localtime = time.strftime('%Y/%m/%d', time.localtime())
path = createfiles(localtime) + '/'
print(path)
file_name = str(uuid.uuid1()) + file.name
file_path = os.path.join(path, file_name)
print(file_path)
with open(file_path, 'wb') as f:
for temp in file.chunks():
f.write(temp)
item['message'] = '上传成功'
item['url'] = '/' + file_path
item['error'] = 0
print(item['url'])
return JsonResponse(item)