Django é um excelente framework de desenvolvimento web para a pilha python, e também é o framework de desenvolvimento com a maior proporção do framework de desenvolvimento web python stack. Quanto a ser bom o suficiente, é auto-evidente. A função background orm também é muito poderosa, com algumas linhas de configuração simples. Você pode rapidamente ter um background de gerenciamento poderoso. A única desvantagem é que não há um editor de rich text integrado. Claro, existem muitos pacotes de terceiros que fornecem a função de integrar editores de rich text, mas a manutenção não parece ser muito ativa, e o upgrade não é muito bom. Positivo, então optei por integrar meu próprio editor de rich text no meu projeto django-happy-shop!
Desde que mencionei o projeto django-happy-shop , tenho a coragem de pedir uma estrela a todos. O código-fonte aberto está hospedado no Gitee, e você pode encontrá-lo pesquisando pelo nome. Bem-vindo ao experimentar o início e experimentá-lo Fora.
HappyShop é um pacote de terceiros desenvolvido pela Django, desenvolvido com django + DRF + vue, com genes de separação de front-end e back-end, com lógica de commodity multi-especificação completa, pagamento Alipay integrado e coleta rápida com configuração simples. pode ser rapidamente integrado em qualquer projeto django para obter rapidamente uma funcionalidade simples de shopping.
Mais perto de casa, por que escolher o wangededitor?
Em primeiro lugar, é porque é um editor de rich text muito bom desenvolvido por chineses. Ele suporta integração JS nativa e Vue e outras excelentes integrações de framework front-end. A documentação também é muito completa. O mais importante é que o A documentação chinesa é fácil de ler, a configuração é simples e clara e é fácil de usar. , e o código aberto é gratuito!
iniciar integração
Descrição dos dados do modelo
Há um conteúdo de campo de detalhes do produto no modelo do produto e o campo selecionado é TextFiled, conforme mostrado abaixo:
content = models.TextField("Detalhes do produto")
Na China, implementamos a função de gerenciamento de plano de fundo admin.py
por meio de herança , conforme mostrado abaixo, você pode ver o código-fonte para obter detalhesModelAdmin
@admin.register(HappyShopSPU)
class HappyShopSPUAdmin(HappyShopAdmin):
'''Admin View for HappyShopSPU'''
list_display = ('get_title', 'get_main_picture',
'get_category', 'brand', 'is_new', 'sort', 'add_date')
复制代码
Através deste código, registramos o modelo com o histórico de gerenciamento de administrador!
我们集成wangeditor富文本编辑器采用原生JS引入的方法来进行引入,那么首先就需要把相关的JS文件引入到模板文件中,django的ModelAdmin为了提供了一个Media的源类来把js文件及css文件注册到模板中,如下所示:
@admin.register(HappyShopSPU)
class HappyShopSPUAdmin(HappyShopAdmin):
'''Admin View for HappyShopSPU'''
list_display = ('get_title', 'get_main_picture',
'get_category', 'brand', 'is_new', 'sort', 'add_date')
....
class Media:
js = (
'admin/js/vendor/jquery/jquery.min.js',
'https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js',
'happy_shop/js/weditor.js'
)
复制代码
第一个JS文件看名称就知道我们先引入了django默认自带的jquery文件;第二个外链cdn的js连接是wangeditor提供的编辑器js文件;第三个weditor.js的文件是我们自己写的配置文件,前端主要的集成配置功能都集中在weditor.js文件中!内容如下:
$(document).ready(function () {
// 创建富文本编辑器元素节点
var wehtml = "<div id='wangcontent'></div>"
// 获取的div
var field_div = document.querySelectorAll(".field-content>div")
field_div[0].insertAdjacentHTML('afterbegin', '<b>商品详情:</b>');
field_div[0].insertAdjacentHTML('beforeend', wehtml);
$(".field-content>div>label").attr('style', 'display:none')
const E = window.wangEditor
const editor = new E("#wangcontent")
// 或者 const editor = new E( document.getElementById('div1') )
const $text1 = $('#id_content')
console.log($text1.val())
editor.config.onchange = function (html) {
// 第二步,监控变化,同步更新到 textarea
$text1.val(html)
}
editor.config.height = 500
// 配置 server 接口地址
editor.config.uploadImgServer = '/happy/upload_img/'
editor.config.uploadFileName = 'spuImg'
editor.create()
editor.txt.html($text1.val())
// 第一步,初始化 textarea 的值
$text1.val(editor.txt.html())
$text1.attr("style","display:none")
})
复制代码
这段代码我就不做过多的解读,只详细说一下思路,首先我们都知道django
的表单默认会有一个id的属性,属性值是以id_字段的形式组合,因此上我们就只需要把富文本编辑器的内容赋值给id_content
的输入框即可正常提交,总的逻辑就是这样,剩下的就是奔着这个目的去实现!
首先我们找到富文本编辑的块,位于一个.field-content
的模块当中,找到这个区块,再在这个区块中用js的方式插入一个富文本的元素<div id='wangcontent'></div>
,然后参照wangeditor的文档集成富文本编辑器,并且监听编辑器的onchange事件,把富文本编辑器的内容同步赋值到表单id_content
,这里有一个需要注意的是如果原本添加的内容,在编辑的时候应该也要回显到富文本编辑器,所以说这里一定要处理,注意这句editor.txt.html($text1.val())
就是解决这个问题,之后把原本的输入框加入属性style
设置display
为none
隐藏即可!
其他代码,直接参考wangeditor的文档,写的很清楚!
实现图片上传功能
js文件中与上传图片相关的配置就以下两句:
// 配置 server 接口地址
editor.config.uploadImgServer = '/happy/upload_img/'
editor.config.uploadFileName = 'spuImg'
复制代码
第一句是图片的上传地址url;第二句是自定义表单的name值;
O código de visualização correspondente ao URL de upload é o seguinte. Você pode ver o código da lógica específica, que pode ser mais claro do que a descrição do texto. Isso restringe a necessidade de fazer login para fazer upload. Se houver outras restrições, só podemos limitei a autoridade do super-controle [isso está melhorando a autoridade], mas não fiz isso, nem limitei o tipo de arquivo de upload, porque o editor de rich text definiu o tamanho e o tipo da imagem por padrão no É claro que o valor passado do front end nunca deve ser confiável como back end. Sua verificação, isso também será processado em versões posteriores, tudo extraído para o arquivo de configuração do projeto!
class HappyShopUploadImage(LoginRequiredMixin, View):
"""富文本编辑器上传图片
首先会检查项目根目录有没有media/upload/的文件夹
如果没有就创建,图片最终保存在media/upload/目录下
返回图片路径为 "/media/upload/file.png"
wangEditor_v4文档:https://www.wangeditor.com/
"""
@method_decorator(csrf_exempt)
def dispatch(self, *args, **kwargs):
return super().dispatch(*args, **kwargs)
def post(self, request, *args, **kwargs):
import os
import uuid
file_data = request.FILES
keys = list(file_data.keys())
file_path = settings.BASE_DIR / 'media/upload/'
if os.path.exists(file_path) is False:
os.mkdir(file_path)
# 返回数据中需要的data
data = []
for key in keys:
img_dict = {}
file = file_data.get(f'{key}')
# 重命名文件名称
names = list(os.path.splitext(file.name))
names[0] = ''.join(str(uuid.uuid4()).split('-'))
file.name = ''.join(names)
new_path = os.path.join(file_path, file.name)
# 开始上传
with open(new_path, 'wb+') as f:
for chunk in file.chunks():
f.write(chunk)
# 构造返回数据
img_dict['url'] = f'/media/upload/{file.name}'
data.append(img_dict)
context = {"errno": 0,"data":data}
return JsonResponse(context)
复制代码
Por fim, adicione a url de visualização ao arquivo de url do aplicativo, da seguinte forma:
path('upload_img/', views.HappyShopUploadImage.as_view(), name="upload_img")
复制代码
Neste ponto, nosso editor de rich text foi integrado com sucesso. Se você tiver alguma dúvida, pode deixar uma mensagem para consulta ou consultar o código-fonte diretamente! Não esqueça de estrelar!