Django es un marco de desarrollo web excelente para la pila de python, y también es el marco de desarrollo con la proporción más alta del marco de desarrollo web de la pila de python. En cuanto a si es lo suficientemente bueno, es evidente. La función de orm de fondo también es muy poderosa, con unas pocas líneas de configuración simple. Puede tener rápidamente un fondo de administración poderoso. El único inconveniente es que no hay un editor de texto enriquecido integrado. Por supuesto, hay muchos paquetes de terceros que brindan la función de integrar editores de texto enriquecido, pero el mantenimiento no parece ser muy activo y la actualización no es muy buena. Positivo, etc., ¡opté por integrar mi propio editor de texto enriquecido en mi proyecto django-happy-shop!
Ya que mencioné el proyecto django-happy-shop , tengo el descaro de pedirles a todos una estrella. El código fuente abierto está alojado en Gitee, y puede encontrarlo buscando el nombre. Bienvenido a experimentar el inicio y probarlo. fuera.
HappyShop es un paquete de terceros desarrollado por Django, desarrollado con django + DRF + vue, con genes de separación front-end y back-end, con lógica completa de productos básicos de múltiples especificaciones, pago Alipay integrado y cobro rápido con configuración simple. se puede integrar rápidamente en cualquier proyecto de django para obtener rápidamente una funcionalidad de centro comercial simple.
Más cerca de casa, ¿por qué elegir wangeditor?
En primer lugar, es porque es un editor de texto enriquecido muy bueno desarrollado por personas chinas. Es compatible con la integración nativa de JS y Vue y otra excelente integración de marco frontal. La documentación también es muy completa. Lo más importante es que el La documentación en chino es fácil de leer, la configuración es simple y clara, y es fácil de usar. ¡Y el código abierto es gratuito!
comenzar la integración
Descripción de los datos del modelo
Hay un contenido de campo de detalles del producto en el modelo del producto, y el campo seleccionado es TextFiled, como se muestra a continuación:
contenido = modelos.TextField("Detalles del producto")
En China, implementamos la función de administración en segundo plano admin.pya través de la herencia , como se muestra a continuación, puede ver el código fuente para obtener más detalles.ModelAdmin
@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')
复制代码¡A través de este código, hemos registrado el modelo con el fondo de gestión 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值；
El código de visualización correspondiente a la URL de carga es el siguiente. Puede ver el código de la lógica específica, que puede ser más claro que la descripción del texto. Esto restringe la necesidad de iniciar sesión para cargar. Si hay más restricciones, solo podemos limitar la autoridad del supercontrol [esto es mejorar la autoridad], pero no hice esto, ni limité el tipo de archivo de carga, porque el editor de texto enriquecido ha establecido el tamaño y el tipo de la imagen por defecto en el sección anterior. Por supuesto, el valor pasado desde el front-end nunca debe confiarse como el back-end. Su verificación, esto también se procesará en versiones posteriores, ¡todo extraído en el archivo de configuración del proyecto!
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)
复制代码Finalmente, agregue la url de vista al archivo de url de la aplicación, de la siguiente manera:
path('upload_img/', views.HappyShopUploadImage.as_view(), name="upload_img")
复制代码En este punto, nuestro editor de texto enriquecido se ha integrado con éxito. Si tiene alguna pregunta, puede dejar un mensaje para consultar o mirar el código fuente directamente. ¡No te olvides de protagonizar!