前言
这几年一直在it行业里摸爬滚打,一路走来,不少总结了一些python行业里的高频面试,看到大部分初入行的新鲜血液,还在为各样的面试题答案或收录有各种困难问题
于是乎,我自己开发了一款面试宝典,希望能帮到大家,也希望有更多的Python新人真正加入从事到这个行业里,让python火不只是停留在广告上。
微信小程序搜索:Python面试宝典
或可关注原创个人博客:https://lienze.tech
也可关注微信公众号,不定时发送各类有趣猎奇的技术文章:Python编程学习
后台admin使用Ckeditor富文本编辑器
富文本编辑器有很多种,这里介绍如何使用ckeditor
- 安装ckeditor
pip install django-ckeditor
- settings配置
#settings.py
NSTALLED_APPS = [
...
'ckeditor', # 富文本编辑器
'ckeditor_uploader', # 富文本编辑器上传图片模块
...
]
- 添加ckeditor配置
#settings.py
CKEDITOR_CONFIGS = {
'default':{
'toolbar':'full', # 完整工具条
'height': 300, # 编辑高度
# 'woidth': 300, # 编辑宽度
},
}
CKEDITOR_UPLOAD_PATH = '' # 上传图片保存路径,使用了fastDFS,设置为''
- 添加ckeditor路由配置
#urls.py
urlpatterns = [
...
re_path(r'^ckeditor/', include('ckeditor_uploader.urls')),
]
- 为我们的商品SPU表种设置额外的三个字段
from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField
class Goods(BaseModel):
...
desc_detail = RichTextUploadingField(default='', verbose_name='详细介绍')
desc_pack = RichTextField(default='', verbose_name='包装信息')
desc_service = RichTextUploadingField(default='', verbose_name='售后服务')
...
- 解决ckeditor繁体中文
C:\Python37\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\lang
修改其中的语言文件配置,把zh-ch文件内容复制到zh文件中即可
前台vue使用CKEditor富文本编辑器
- 在vue中安装CKEditor
cnpm install ckeditor/ckeditor5-build-classic
- 组件引入
CKEditor
<script>
import CKEditor from "@ckeditor/ckeditor5-build-classic";
import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn"; //中文包
</script>
- 模版标签嵌入
<template>
<div id="toolbar-container"></div> <!-- 编辑器容器 -->
<div id="editor">
<!-- <p>This is the initial editor content.</p> -->
</div>
</template>
- vue实例数据保存编辑器实例
data() {
return {
editor: null, // 编辑器实例
}
},
- 钩子函数初始化
CKEditor
编辑器
mounted() {
this.initCKEditor();
},
methods: {
initCKEditor() {
CKEditor.create(document.querySelector("#editor"), {
ckfinder: {
uploadUrl: "http://127.0.0.1:8000/ck_upload/"
// 接口返回需要:包括uploaded(选项true/false),url两个字段
}
})
.then(editor => {
const toolbarContainer = document.querySelector("#toolbar-container");
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
this.editor = editor; //将编辑器保存起来,用来随时获取编辑器中的内容等,执行一些操作
})
.catch(error => {
console.error(error);
});
},
}
- 在django中响应图片上传的接口
import hashlib
def md5_(filename):
m = hashlib.md5()
m.update(filename.encode())
return m.hexdigest()
# Create your views here.
def ck_upload(request):
_f = request.FILES.get('upload')
_name = md5_(_f.name) # 生成md5名
_path = os.path.join(STATICFILES_DIRS[0],_name)
with open(_path,'wb') as fp:
fp.write(_f.read())
return JsonResponse({
'uploaded':'true',
# 表示上传成功
'url': 'http://127.0.0.1:8000/static/' + _name
# 拼接上传图片的绝对访问路径
})
- 整个页面的提交,需要在vue组件template中绑定按钮点击时间
<template>
<div>
<div id="toolbar-container"></div>
<div id="editor">
</div>
<button @click="post_editor">提交</button>
</div>
</template>
-
post_editor
的提交事件方法
ck_post() {
axios.post("http://127.0.0.1:8000/ck_post/", {
data: this.editor.getData() // 获取了编辑器的所有内容
}).then(res=>{
console.log(res.data)
})
}
- 后端接收整个富文本部分的内容
class CkPost(APIView):
def post(self,request):
ck_data = request.data.get('data')
...
return Response({'code':200})