Implanter Easy Markdown Editor

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Salut !

Pour un projet, je souhaite utiliser Easy Markdown Editor. J’ai réussi à intégrer en version « par défaut », mais je n’arrive pas à configurer pour qu’il permette l’upload. Je ne comprends pas bien la documentation, et je suis une bille en JS :/

Voici actuellement mon code :

var editor = new EasyMDE({
element: document.getElementById('textarea')
});

Merci de votre aide.

Édité par qwerty

La tero estas nur unu lando | Géographe de service | Cliquez 👍 pour dire merci

+0 -0

Cette réponse a aidé l’auteur du sujet

Je n’ai pas essayé mais apparemment, ça se configure avec l’option uploadImage à true.
En utilisant imageUploadFunction ou imageUploadEndpoint en plus de uploadImage en fonction de comment tu comptes faire ça, c’est soit l’un, soit l’autre.

Donc, c’est pas super triviale.

Dans tous les cas, tu auras besoin d’un peu de code pour stocker l’image. Tu veux la stocker où cette image ? Tu as une idée de comment la stocker ?
Si c’est sur le serveur même, coté back, c’est quel langage ?

Basiquement, l’idée c’est :

var editor = new EasyMDE({
  element: document.getElementById('textarea'),
  uploadImage: true,
  imageUploadEndpoint: "/upload/image" // Où, upload/image est un va servir à stocker une image.
});

C’est le plus simple, mais cette solution dépends de beaucoup de choses. Ton application, elle est disponible sur internet ou pas ?

Édité par ache

ache.one                 🦹         👾                                🦊

+1 -0
Auteur du sujet

Côté back, c’est du PHP, je pense adapter un code d’un upload via formulaire (déjà présent dans l’application).

Oui, mon application est dispo sur Internet, le code source est ici. (Je ferais bientôt une présentation officielle sur le site ^^).

Édité par qwerty

La tero estas nur unu lando | Géographe de service | Cliquez 👍 pour dire merci

+0 -0

Cette réponse a aidé l’auteur du sujet

Alors tu peux déjà commencer par créer ta page /upload_image.php par exemple.

Cette page réagira aux requêtes POST en enregistrant les données sur le serveur. Le retour doit être du json. Pas d’inquiétude sur la génération du JSON, on est sur quelque chose de très simple, pas besoin d’une bibliothèque pour gérer ça.

imageUploadEndpoint: The endpoint where the images data will be sent, via an asynchronous POST request. The server is supposed to save this image, and return a json response.

  • if the request was successfully processed (HTTP 200-OK): {"data": {"filePath": "<filePath>"}} where filePath is the relative path of the image;
  • otherwise: {"error": "<errorCode>"}, where errorCode can be noFileGiven (HTTP 400), typeNotAllowed (HTTP 415), fileTooLarge (HTTP 413) or importError (see errorMessages below). If errorCode is not one of the errorMessages, it is alerted unchanged to the user. This allows for server side error messages. No default value.

Ça fait trop longtemps que je n’ai pas fait de PHP pour te décrire précisément comment tu dois procéder mais commencer par la documentation me semble le meilleur moyen.

Après, il va falloir penser sécurité. C’est-à-dire, que comme ça, tout le monde pourra déposer une image sur ton site, sans avoir besoin de s’inscrire à priori ? Bref, la gestion des ressources est une question que tu va devoir résoudre assez rapidement.

PS: « note: never trust client, always check * at server-side »

Édité par ache

ache.one                 🦹         👾                                🦊

+0 -0
Auteur du sujet
<?php
if(isset($_FILES['userfile'])) {
    $uploaddir = './';
    $uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
    $blacklist_mimetype = array('text/html', 'text/javascript', 'text/x-javascript', 'application/x-shellscript', 'application/x-php', 'text/x-php', 'text/x-python', 'text/x-perl', 'text/x-bash', 'text/x-sh', 'text/x-csh', 'text/scriptlet', 'application/x-msdownload', 'application/x-msmetafile');
    if(in_array($_FILES['userfile']['type'],$blacklist_mimetype)) {
        echo json_encode(array('error'=>'typeNotAllowed'));
    }
    if(!is_uploaded_file($_FILES['userfile']['tmp_name'])) {
        echo json_encode(array('error'=>'importError'));
    }
    if(move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
        echo json_encode(array('data'=>array('filePath'=>$uploadfile)));
    }
}

Bon je peaufinerais en vérifiant si le gars est bien connecté, etc… mais ça donne une bonne base de travail pour la suite. Reste à savoir comment interfacer avec EMDE, et c’est ça que j’ai pas bien compris.

La tero estas nur unu lando | Géographe de service | Cliquez 👍 pour dire merci

+0 -0
Auteur du sujet

Mon code final. pas merci la doc pas commenté. Merci bien :-)

error_reporting(0);
if(isset($_FILES['image'])) {
    $uploaddir = './';
    $uploadfile = $uploaddir . basename($_FILES['image']['name']);
    $blacklist_mimetype = array('text/html', 'text/javascript', 'text/x-javascript', 'application/x-shellscript', 'application/x-php', 'text/x-php', 'text/x-python', 'text/x-perl', 'text/x-bash', 'text/x-sh', 'text/x-csh', 'text/scriptlet', 'application/x-msdownload', 'application/x-msmetafile');
    if(in_array($_FILES['image']['type'],$blacklist_mimetype)) {
        echo json_encode(array('error'=>'typeNotAllowed'));
    }
    if(!is_uploaded_file($_FILES['image']['tmp_name'])) {
        echo json_encode(array('error'=>'importError'));
        echo "can't upload";
    }
    if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile)) {
        echo json_encode(array('data'=> array('filePath'=>$uploaddir.$uploadfile)));
    }
}
var editor = new EasyMDE({
  element: document.getElementById('textarea'),
  uploadImage: true,
  imageUploadEndpoint: "upload/"
});

La tero estas nur unu lando | Géographe de service | Cliquez 👍 pour dire merci

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte