Probleme Upload server (local) avec Froala editeur

Profil introuvable Le 19 novembre 2016 à 19:24 (Édité le 25 janvier 2019 à 17:52)

Salut à tous ! 😀

J'ai un petit soucis j'ai programmé mon éditeur de text WYSIWYG tout se passe bien, sauf pour intégrer des photos sur mon serveur (je suis en local pour le moment).

Mal-grès plusieurs test je n'arrive vraiment pas a comprendre le principe, le SDK php etc :/

Voici les liens du site officiel pour ceux qui s'y connaissent et pourrons donc me filer un coup de main facilement ^^ 😀 (https://www.froala.com/wysiwyg-editor/docs/sdks/php/image-server-upload)

De base l’éditeur upload l'image sur le serveur du site, bien sur j'aimerai éviter cela pour pouvoir récupérer mes images ultérieurement.

Voici ma page test.php avec les différent script et css pour l’éditeur.

<!DOCTYPE html>
<html>
  
  <?php
  // Include the editor SDK.
  require '../wysiwyg-editor-php-sdk-master/lib/FroalaEditor.php';
  ?>
<head>
  <meta charset="utf-8">
</head>
  <!-- Include Font Awesome. -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <!-- Include Editor style. -->
  <link href="../css/froala_editor.min.css" rel="stylesheet" type="text/css" />
  <link href="../css/froala_style.min.css" rel="stylesheet" type="text/css" />
  <!-- Include Code Mirror style -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
  <!-- Include Editor Plugins style. -->
  <link rel="stylesheet" href="../css/plugins/code_view.css">
  <link rel="stylesheet" href="../css/plugins/colors.css">
  <link rel="stylesheet" href="../css/plugins/emoticons.css">
  <link rel="stylesheet" href="../css/plugins/file.css">
  <link rel="stylesheet" href="../css/plugins/fullscreen.css">
  <link rel="stylesheet" href="../css/plugins/image.css">
  <link rel="stylesheet" href="../css/plugins/image_manager.css">
  <link rel="stylesheet" href="../css/plugins/line_breaker.css">
  <link rel="stylesheet" href="../css/plugins/quick_insert.css">
  <link rel="stylesheet" href="../css/plugins/table.css">
  <link rel="stylesheet" href="../css/plugins/video.css">
<body>
  <!-- Create a tag that we will use as the editable area.
       You can use a div tag as well. -->
  <form>
    <textarea id="froala-editor"></textarea>
    <br/>
    <div id="preview" class="fr-view">
      <p>Start typing and you can preview the content of the WYSIWYG HTML editor as you type below the editing box.</p>
    </div>
  </form>
  <!-- Include jQuery. -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <!-- Include JS files. -->
  <script type="text/javascript" src="../js/froala_editor.min.js"></script>
  <!-- Include Code Mirror. -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
  <!-- Include Plugins. -->
  <script type="text/javascript" src="../js/plugins/align.min.js"></script>
  <script type="text/javascript" src="../js/plugins/code_beautifier.min.js"></script>
  <script type="text/javascript" src="../js/plugins/code_view.min.js"></script>
  <script type="text/javascript" src="../js/plugins/colors.min.js"></script>
  <script type="text/javascript" src="../js/plugins/emoticons.min.js"></script>
  <script type="text/javascript" src="../js/plugins/entities.min.js"></script>
  <script type="text/javascript" src="../js/plugins/file.min.js"></script>
  <script type="text/javascript" src="../js/plugins/font_family.min.js"></script>
  <script type="text/javascript" src="../js/plugins/font_size.min.js"></script>
  <script type="text/javascript" src="../js/plugins/fullscreen.min.js"></script>
  <script type="text/javascript" src="../js/plugins/image.min.js"></script>
  <script type="text/javascript" src="../js/plugins/image_manager.min.js"></script>
  <script type="text/javascript" src="../js/plugins/inline_style.min.js"></script>
  <script type="text/javascript" src="../js/plugins/line_breaker.min.js"></script>
  <script type="text/javascript" src="../js/plugins/link.min.js"></script>
  <script type="text/javascript" src="../js/plugins/lists.min.js"></script>
  <script type="text/javascript" src="../js/plugins/paragraph_format.min.js"></script>
  <script type="text/javascript" src="../js/plugins/paragraph_style.min.js"></script>
  <script type="text/javascript" src="../js/plugins/quick_insert.min.js"></script>
  <script type="text/javascript" src="../js/plugins/quote.min.js"></script>
  <script type="text/javascript" src="../js/plugins/table.min.js"></script>
  <script type="text/javascript" src="../js/plugins/save.min.js"></script>
  <script type="text/javascript" src="../js/plugins/url.min.js"></script>
  <script type="text/javascript" src="../js/plugins/video.min.js"></script>
  <!-- Include Language file if we want to use it. -->
  <script type="text/javascript" src="../js/languages/fr.js"></script>
  <!-- Initialize the editor. -->
    <script>
      $(function() {
        $('textarea#froala-editor').froalaEditor({
          // Set the image upload URL.
          imageUploadURL: '/upload_image.php',
    
          imageUploadParams: {
            id: 'my_editor'
          }
        })
      });
    </script>
  <div class="testphp">
  </div>
  
</body>
</html>

et voici le fichier php upload-image.php qui se trouve dans le même dossier

<?php
// Include the editor SDK.
require '../wysiwyg-editor-php-sdk-master/lib/FroalaEditor.php';
$response = FroalaEditor_Image::upload('/uploads/');
if (is_string($response)) {
  http_response_code(404);
  return;
}
echo stripslashes(json_encode($response));
?>

Et le sdk se trouve ici ../wysiwyg-editor-php-sdk-master/lib/FroalaEditor.php

Voila si quelqu'un peut me filer un ptit coup de pouce pour que je puisse upload les images sur mon serveur local :/ et m'expliquer l'histoire de SDK php ! 😀

Merci bonne soirée

Profil introuvable Le 20 novembre 2016 à 23:25

Salut a tous j'ai résolut le problème,

Je mes la soluce ici au cas ou 😀

Je suis repartie de 0 ! et donc j'ai

<?php
   //header('Location: ./page/test.php');
   session_start();
   //$_SESSION['test'] = 0;
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
  <!-- Include Font Awesome. -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <!-- Include Editor style. -->
  <link href="css/froala_editor.min.css" rel="stylesheet" type="text/css" />
  <link href="css/froala_style.min.css" rel="stylesheet" type="text/css" />
  <!-- Include Code Mirror style -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
  <!-- Include Editor Plugins style. -->
  <link rel="stylesheet" href="css/plugins/code_view.css">
  <link rel="stylesheet" href="css/plugins/colors.css">
  <link rel="stylesheet" href="css/plugins/emoticons.css">
  <link rel="stylesheet" href="css/plugins/file.css">
  <link rel="stylesheet" href="css/plugins/fullscreen.css">
  <link rel="stylesheet" href="css/plugins/image.css">
  <link rel="stylesheet" href="css/plugins/image_manager.css">
  <link rel="stylesheet" href="css/plugins/line_breaker.css">
  <link rel="stylesheet" href="css/plugins/quick_insert.css">
  <link rel="stylesheet" href="css/plugins/table.css">
  <link rel="stylesheet" href="css/plugins/video.css">
<body>
  <!-- Create a tag that we will use as the editable area.
       You can use a div tag as well. -->
  <form>
    <textarea id="froala-editor"></textarea>
    <br/>
    <div id="preview" class="fr-view">
      <p>Start typing and you can preview the content of the WYSIWYG HTML editor as you type below the editing box.</p>
    </div>
  </form>
  <!-- Include jQuery. -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <!-- Include JS files. -->
  <script type="text/javascript" src="js/froala_editor.min.js"></script>
  <!-- Include Code Mirror. -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
  <!-- Include Plugins. -->
  <script type="text/javascript" src="js/plugins/align.min.js"></script>
  <script type="text/javascript" src="js/plugins/code_beautifier.min.js"></script>
  <script type="text/javascript" src="js/plugins/code_view.min.js"></script>
  <script type="text/javascript" src="js/plugins/colors.min.js"></script>
  <script type="text/javascript" src="js/plugins/emoticons.min.js"></script>
  <script type="text/javascript" src="js/plugins/entities.min.js"></script>
  <script type="text/javascript" src="js/plugins/file.min.js"></script>
  <script type="text/javascript" src="js/plugins/font_family.min.js"></script>
  <script type="text/javascript" src="js/plugins/font_size.min.js"></script>
  <script type="text/javascript" src="js/plugins/fullscreen.min.js"></script>
  <script type="text/javascript" src="js/plugins/image.min.js"></script>
  <script type="text/javascript" src="js/plugins/image_manager.min.js"></script>
  <script type="text/javascript" src="js/plugins/inline_style.min.js"></script>
  <script type="text/javascript" src="js/plugins/line_breaker.min.js"></script>
  <script type="text/javascript" src="js/plugins/link.min.js"></script>
  <script type="text/javascript" src="js/plugins/lists.min.js"></script>
  <script type="text/javascript" src="js/plugins/paragraph_format.min.js"></script>
  <script type="text/javascript" src="js/plugins/paragraph_style.min.js"></script>
  <script type="text/javascript" src="js/plugins/quick_insert.min.js"></script>
  <script type="text/javascript" src="js/plugins/quote.min.js"></script>
  <script type="text/javascript" src="js/plugins/table.min.js"></script>
  <script type="text/javascript" src="js/plugins/save.min.js"></script>
  <script type="text/javascript" src="js/plugins/url.min.js"></script>
  <script type="text/javascript" src="js/plugins/video.min.js"></script>
  <!-- Include Language file if we want to use it. -->
  <script type="text/javascript" src="js/languages/fr.js"></script>
  <!-- Initialize the editor. -->
    <script>
      $(function() {
        $('textarea#froala-editor').froalaEditor({
          //include languages
          //language: 'fr',
          
          //fileUploadURL: '',//http://localhost/testphp/uploads',
          imageUploadURL: 'upload_image.php',
          //Include BR when u click enter
           enter: $.FroalaEditor.ENTER_BR,
        })
      });
    </script>
  <div class="testphp"></div>
<?php
   //echo "Session : ".$_SESSION['test'];
   //echo "<br/>";
   //echo "DOCUMENT_ROOT : ".$_SERVER['DOCUMENT_ROOT'];
?>
</body>
</html>

Et voici le code de upload_image.php

<?php
//session_start();
// Include the editor SDK.
require 'wysiwyg-editor-php-sdk-master/lib/FroalaEditor.php';
// Store the image.
try {
  //$_SESSION['test'] = 1;
  $response = FroalaEditor_Image::upload('/testphp/uploads/');
 // $_SESSION['test'] = 2;
  //$_SESSION['test'] = stripslashes(json_encode($response));
  //$response = json_decode($response);
  //$_SESSION['test'] = $response->{'link'};
  echo stripslashes(json_encode($response));
}
catch (Exception $e) {
  http_response_code(404);
}
?>

L'erreur venais de ce petit /testphp/uploads/ ou il faller mettre le nom de la racine du site 😀

Voila bon code a tous !

Probleme Upload server (local) avec Froala editeur

Échange

Articles / Vidéos

Ressources