Installer un éditeur de texte WYSIWYG sur son site

c-cadeau

Membre
Hello, suite à cette discussion
Je me demandais quelle était la procédure pour installer un éditeur sur son site.
J'ai donc choisi TRIX et sur GitHub on télécharge plusieurs fichiers

Quelle est la suite ? J'installe tout à la racine du site ou bien je crée un dossier spécifique ?
Merci de m'aider.
 
Solution
Si vous pouviez regarder de votre côté, merci.
Probablement qu'il y en a pas, pour ce faire, ce dernier s'adapte au formulaire de ta page. Si ta page est brut sans css, il s'affichera à 100%
C'est à toi de décider la largeur que tu lui donneras dans un css maison (Grid -Col etc..)

Ou sinon, encore plus simple pour te donner une idée, un tableau en HTML

HTML
<table style="width:400px">
  <tr>
     <td>
            <form>
                <input id="x" value="Editor content goes here" type="hidden" name="content">
                <trix-editor input="x"></trix-editor>
          </form>
      </td>
   </tr>
</table>

yule

Membre
@c-cadeau comme @7UP l'a précisé, tu adaptes en fonction de tes besoins et oui , à la lecture de ta page explicative , tout n'est pas à uploader

Fait ainsi pour commencer...

Crée un dossier "trix"

Télécharges ces deux fichiers (depuis la page de téléchargement de Github)
  • trix.css
  • trix.js
Puis tu crées un page HTML (index.html) de ce style dans ce même dossier

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Trix</title>

<!-------- Ici tu ajoutes le CSS et le JS de Trix-------->
      <link rel="stylesheet" type="text/css" href="trix.css">
     <script type="text/javascript" src="trix.js"></script>

</head>
<body>
  
<!-------- Ici tu ajoutes les éléments de ton formulaire-------->
   <p>
    <form action="" method="POST" enctype="multipart/form-data" >
        <input id="x" value="Editor content goes here" type="hidden" name="content">
        <trix-editor input="x"></trix-editor>
      </form>
    </p>

</body>
</html>

Normalement, on crée un dossier avec un sous dossier css et un js.. mais on reste sur l'aspect test...

Et tu devrais avois ton éditeur en te rendant sur ta page index.html, une page qu'il suffira de "doper" selon tes souhaits et des possibilités de Trix (jamais essayé..)

A+
Yule
 

c-cadeau

Membre
Merci yule mais je crains que ce ne soit suffisant, si tu télécharges l'archive entière sur GitHub tu trouves d'autres fichiers CSS qui paraissent indispensable au bon fonctionnement de l'éditeur
Capture d’écran 2020-12-31 131014.png

Et d'ailleurs le fichier trix.css contient :
CSS
//= require trix/banner
//= require trix/stylesheets/editor
//= require trix/stylesheets/toolbar
//= require trix/stylesheets/attachments
//= require trix/stylesheets/content

Donc je vais essayer ce que tu as dit en rajoutant tout de même le dossier trix en entier et voir ce que ça donne,
Je m'y mets tout de suite !
 

yule

Membre
@Nicolas Extra sur le dev ! Sinon l'index.html n'est pas d'origine, c'est moi qui l'ai fait rapide pour pouvoir afficher la barre de Trix... (a utiliser comme base pour d'autres éditeurs si nécessaires ;) ?

@c-cadeau ce que j'ai détaillé, c'est la base pour le faire fonctionner. Peut-être et pour le compléter d'autres ajout seront nécessaire, il faut reconnaître que cet éditeur est bien maigre ainsi... Mais c'est en tout cas pas des .scss que tu auras besoin.

A+
Yule
 

Nicolas

Membre actif
Ah je n'avais pas pensé à prendre ton HTML, celui utilisé est bien celui fournit avec le dossier d'origine.
HTML
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Trix</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="csp-nonce" content="topsecret">
    <link rel="stylesheet" type="text/css" href="trix.css">
    <style type="text/css">
      main {
        margin: 20px auto;
        max-width: 700px;
      }
    </style>
    <script type="text/javascript" src="trix.js"></script>
    <script type="text/javascript" src="trix/inspector.js"></script>
    <script type="text/javascript">
      Trix.config.attachments.preview.caption.name = true
      Trix.config.attachments.preview.caption.size = false

      document.addEventListener("trix-initialize", function(event) {
        Trix.Inspector.install(event.target);
      });

      document.addEventListener("trix-attachment-add", function(event) {
        var attachment = event.attachment;
        if (attachment.file) {
          var xhr = new XMLHttpRequest;
          xhr.open("POST", "/attachments", true);

          xhr.upload.onprogress = function(event) {
            var progress = event.loaded / event.total * 100;
            attachment.setUploadProgress(progress);
          };

          xhr.onload = function() {
            if (xhr.status === 201) {
              setTimeout(function() {
                var url = xhr.responseText;
                attachment.setAttributes({ url: url, href: url });
              }, 30)
            }
          };

          attachment.setUploadProgress(10);

          setTimeout(function() {
            xhr.send(attachment.file);
          }, 30)
        }
      });
    </script>
  </head>
  <body>
    <main>
      <trix-editor autofocus class="trix-content"></trix-editor>
    </main>
  </body>
</html>
 

yule

Membre
Non non tranquille, c'est juste pour préciser que c'est pas celui d'origine, pour ne pas avoir d'ambiguïté

Sinon , avec le fichier d'origine que tu montres ci-dessus, il manque ce fichier qui est appelé... (inspector.js) mais ca fonctionne tout de même sans, étrange :unsure: (il ne doit rien apporter à ce stade..)
<script type="text/javascript" src="[URL='https://devcometrue.fr/trix/trix/inspector.js']trix/inspector.js[/URL]"></script>
 
Dernière édition:

c-cadeau

Membre
Je m'incline.
J'ai installé de la même façon du coup et ça marche.

Par contre j'arrive pas à régler la largeur de l'éditeur comme je veux, dans leur fichier CSS qui n'est pas très beau, c'est bien indenté mais peu clair à mon avis je ne trouve pas de propriété width pour .editor
Si vous pouviez regarder de votre côté, merci.
 

yule

Membre
Si vous pouviez regarder de votre côté, merci.
Probablement qu'il y en a pas, pour ce faire, ce dernier s'adapte au formulaire de ta page. Si ta page est brut sans css, il s'affichera à 100%
C'est à toi de décider la largeur que tu lui donneras dans un css maison (Grid -Col etc..)

Ou sinon, encore plus simple pour te donner une idée, un tableau en HTML

HTML
<table style="width:400px">
  <tr>
     <td>
            <form>
                <input id="x" value="Editor content goes here" type="hidden" name="content">
                <trix-editor input="x"></trix-editor>
          </form>
      </td>
   </tr>
</table>
 
Dernière édition:

Ces discussions pourraient vous intéresser...

Hello, Quand j'essaie de connecter mon fichier PHP à la base de données sur mon serveur local cela ne fonctionne pas. (site WordPress) ERROR ESTABLISHING A DATABASE CONNECTION Pourtant mes éléments sont bons, j'ai vérifié et revérifié. Je vous colle le code du fichier PHP...
Hello, Je voulais tester un peu node.JS et je l'ai donc installé sur mon Win 10, l'installation s'est bien passé. Par contre quand j'essaie de faire tourner un petit code simple qui permet de créer un serveur, je l'ai enregistré sous serveur.js var http = require('http')...
Bonjour à tous, J'essaie de déployer une application sur mon serveur live via Docker mais j'ai du faire une mauvaise configuration car l'application s'est installé en local. Il y a un fichier à configurer : docker-compose.yml notamment cette section server: image...
Haut