fonction de téléchargement d'images kindeditor

KindEditor est un éditeur HTML en ligne open source écrit en Javascript. Son principal utilisateur est de permettre aux utilisateurs d'obtenir des effets d'édition visibles et disponibles sur le site Web. Les développeurs peuvent utiliser KindEditor pour saisir des zones de saisie de texte multilignes traditionnelles. (textarea) est remplacé par une zone de saisie de texte riche visuelle

en utilisant

1. Accédez au site officiel pour télécharger la dernière version de KindEditor, décompressez et copiez tous les fichiers dans le fichier statique du dossier du projet. Notez que les répertoires suivants peuvent être supprimés selon les besoins :

• asp - Programme ASP

• asp.net - Programme ASP.NET

• php - Programme PHP

• jsp - Programme JSP

• exemples - fichier de démonstration

Ajoutez la balise <textarea> à l'endroit où l'éditeur de texte enrichi doit être affiché dans le modèle HTML :

<label for="article_body">文章内容</label><textarea id="article_body" name="article_body"></textarea>

Ajoutez un script pour introduire le fichier KindEditor JS, crée un éditeur de texte enrichi pour la balise spécifiée. Ici, nous parlons principalement des paramètres nécessaires lors du téléchargement d'images à l'aide de KindEditor :

<script src="{% static 'kindeditor-4.1.10/kindeditor-all-min.js' %}"></script><script>
    var options = {
        resizeType: 0,
        uploadJson: "/upload/", //指定图片上传的url路径，server端写一个视图来处理上传的图片
        extraFileUploadParams: {            "csrfmiddlewaretoken": "{{ csrf_token }}"
        }
    };
    KindEditor.create("#article_body", options); //为指定元素创建富文本编辑器</script>

Description :

1. Pour télécharger des images, vous devez spécifier l'URL de téléchargement via le paramètre uploadJson Le paramètre chemin

2. extraFileUploadParams est utilisé pour soumettre la vérification csrf

Processus de téléchargement et d'aperçu de l'image :

1. Choisissez de télécharger l'image dans l'éditeur de texte enrichi

2. KindEditor Téléchargez l'image sur l'URL spécifiée du serveur via AJAX

3. La fonction d'affichage correspondant à l'url enregistre l'image et renvoie une réponse json contenant le chemin du serveur d'images

4. KindEditor Après avoir obtenu le chemin de l'image de la réponse, passez la <img>balisesrcAttribut, afficher l'image d'aperçu

Implémentation du code dans Django :

from django.conf.urls import urlfrom app import views

urlpatterns = [
    url(r'^upload/$', views.upload_file, name='upload_file'),

    url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),  # 配置media路由]

def upload_file(request):
    # 拿到文件，保存在指定路径
    print(request.FILES) # {'imgFile': [<InMemoryUploadedFile: QQ图片20170523192846.jpg (image/jpeg)>]}
    imgFile = request.FILES.get('imgFile')  # 拿到文件对象，imgFile.name, 拿到文件名

    with open('app01/media/upload/img/'+imgFile.name,'wb')as f:   # with open 无法创建文件夹，需要自己创建
        for chunk in imgFile.chunks():
            f.write(chunk)    # 返回json响应
    response = {        
    'error': 0,        'url': '/media/upload/img/'+imgFile.name        # 客户端拿到路径，才能预览图片; media在setting中配置了别名，这里只写media，客户端就可以找到路径，前面不需要加/app
    }    return HttpResponse(json.dumps(response))

Description :

1. request.FILESObtenir l'objet image

2. imgFile.nameObtenir le nom du fichier

3. doit renvoyer contenanterror et url réponse json

4. Définir la fonction d'affichage pour enregistrer l'image

5. Configurer le média (se référer au blog) et définir le routage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!