Un éditeur de texte HMTL gratuit et toujours disponible partout

1

C’est une astuce rigolote et légère, même si elle est éculée, j’en remets une couche :

  1. Frapper dans la barre d’adresse de votre navigateur exactement ceci au caractère près :

data:text/html, <html contenteditable>

(pensez bien à la virgule)

=> cela ouvre génère une page vierge.

  1. Puis cliquer n’importe où dans la page vierge, puis commencer à taper du texte, ou à y copier-coller ce que vous voulez.

  2. Pour sauvegarder sur votre disque, frapper CTRL-S, puis choississez le format [Page Web complète] si vous avez collé des images ou autres éléments Web, sinon page Web HTML simple suffira. Frapper un nom de fichier. Cela servira donc à rouvrir la page et à la modifier ensuite.

  3. Pour gagner du temps, vous pouvez :

  • Enregistrer un favoris Web avec l’adresse : data:text/html, <html contenteditable> pour pouvoir ouvrir une nouvelle page vierge
  • Enregistrer des favoris Web vers vos fichiers enregistrés sur le disque pour les rouvrir d’un coup.

<!> Warning :warning: Si vous avez modifié le contenu de la page, fermer l’onglet/la page sans avoir sauvegardé au préalable, comme le navigateur ne sauvegarde rien automatiquement, vous perdrez toutes les modifications que vous n’aurez pas manuellement sauvées par un CTRL-S (ou Menu fichier/Enregistrer sous).

Info :bulb: Comme vous êtes à la merci d’une fermeture de Navigateur/onglet intempestive, cette astuce est plutôt à utiliser comme bloc-note HTML toujours disponible, sur n’importe quel PC, n’importe quel navigateur. Pour des mises en pages élaborées, il faut faire des copier-coller de texte déjà formaté. Il n’est pas possible de faire de la mise en page par des commandes particulières.

Vous pouvez toujours ultérieurement améliorer le contenu sauvegardé, soit avec un éditeur perfectionné comme libreoffice (ou ms-word, etc.) qui traite l’HTML en WYSIWYG, ou en éditant le fichier HTML avec une éditeur de texte brut comme VIM.

Bon, le plus simple est d’essayer vous même et de vous faire une idée. Qu’en dites-vous?

1 « J'aime »
2

je ne connaissais pas, c’est rigolo … mais ca sert à quoi ? :upside_down_face:

<html contenteditable=""><head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1252">
</head>
<body>ceci est un essai ,éàçê ?<br><br>
</body>
</html>
3

Cher @esteban,

Si vous aviez mieux lu, c’était écrit :

  • Vous pouvez utiliser ce truc chaque fois que vous avez besoin de saisir du texte, de récupérer des infos de pages Web
  • C’est immédiatement disponible
  • Sur tout PC
  • Sans installation, sans extension
  • Utilise un format standard. C’est stocké en HTML, donc exploitable par tous les autres logiciels de TTX
  • Vous constaterez que les copier-coller à partir de pages Web sont très efficaces
  • Je conseillais de l’utiliser comme un bloc-note pratique. Ca ne casse pas 4 pattes à un canard, mais cela fonctionne très bien. Pas besoin d’ouvrir un autre programme
  • Cela peut vous aider à débugger du HMTL aussi, pourquoi pas, mais il existe bien sûr le mode Inspecteur de chaque navigateur qui est à utiliser de préférence, soyons clairs
  • Accessoirement, cela vous démontre que votre navigateur possède intrinsèquement des fonctions d’éditeur de texte HTML.

J’admets que c’est plus pour la beauté geekienne :nerd_face: et de la simplicité de la chose que j’en parle, plutôt que pour l’aspect panacée logicielle. :smile:

4

:bulb: n°2

  • Pour tirer le maximum de cette astuce, pensez à ajouter un favoWeb vers le dossier où sont stockés vos fichiers HTML enregistrés.
  • Par défaut, les fichiers sont enregistrés dans le répertoire actuel de vos téléchargements.
  • Un URL qui pointe vers vos fichiers locaux est du type du protocole FILE.
    exemple file:///C:/Downloads
  • Il faut tirer parti du protocole FILE, et par exemple apprendre que le contenu d’un dossier est triable par Nom, ou Date, ou Taille, dans un navigateur comme gChrome.
  • Avec le protocole FILE, il suffit de cliquer sur le fichier HTML que vous voulez éditer avec le navigateur pour l’ouvrir.

Amusez-vous bien! :smile:

5

:bulb: n°3

En réalité, lorsque vous éditez le texte, vous avez accès à quelques fonctions de mise en forme HTML, comme les raccourcis habituels des TTX :
Sur du texte sélectionné :

  • CTRL-B => Texte mis en gras (B comme BOLD)
  • CTRL-U => Texte souligné (U comme UNDERLINED)
  • CTRL-I => Texte mis en italiques (I comme ITALIC)
6

:bulb: n°4

Vous avez aussi accès aux fonctions Undo/Redo des TTX

  • UnDo (annuler la dernière modification) : CTRL-Z
  • ReDo (refaire la dernière modification annulée) : CTRL-Y
7

:bulb: n°5

Les Geek se sont éclatés avec ce concept qu’on peut pousser au moins de deux manières :

  1. Compléter l’URL d’appel

Exemple : Essayez cela :

data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false">
  1. Ajouter toutes les fonctions possibles en créant un modèle de document HTML qui contient des scripts & CSS qui permettent d’ajouter des tas d’amélioration.

Un exemple : Ce modèle ajoute un bouton [Suavegarder] dans le document. Voir ici :
https://www.encodedna.com/2014/03/convert-your-browser-into-a-notepad-html5-contenteditable.htm

Dans la pratique, vous pouvez pousser le concept très loin. Sky is zzze Limit, Buddy !!! :star_struck:

Si vous STFW, vous trouverez des trésors, partagez-les ici ! :+1:

1 « J'aime »
8

merci d’avoir précisé, parce que je ne sais soit pas lire, soit pas deviner ce qui n’était pas écrit :slight_smile:

Assez useless de mon point de vue ; accessoirement le formatage ne marche pas sous Fx

9

Bon, OK, je vous prie de bien vouloir pardonner, j’ai eu des propos quelque peu caricaturants et exagérés, donc inappropriés.
Je vais essayer de m’amender, sincèrement. Point taken.

Disons que pour le particulier chez lui, j’imagine que cela entre en concurrence avec les TTX qui sont bien plus puissant.

En revanche pour l’IT guy qui se balade partout sur des postes et pc qui ne lui appartiennent pas, et qui ne peut installer ou disposer de ses outils habituels, cela peut dépanner occasionnellement. Personnellement cela m’a dépanné dans des situations d’urgence et dépannage.

Peut-être, mais cela dépend du formatage.

Pour être précis, les attributs qui sont utilisés sont notamment les attributs du HTML5
comme contenteditable et spellcheck:

https://www.w3schools.com/tags/ref_standardattributes.asp

Donc, comme c’est standard, en théorie FFX devrait faire le job.
Difficile de savoir qui est le coupable sans avoir des détails techniques.
Je vais essayer avec mon FFX.

10

Alors, oui sous FFX les raccourcis (CTRL B, U, I) ne fonctionnent pas, car il sont affectés par FFX à ses propres fins.
En revanche, CTRL-S fonctionne bien sûr.

Cela dit, cet exemple fonctionne aussi :

data:text/html, <div contenteditable style="width:500px; height:500px; border:3px dashed gray;">

11
  1. Si l’on veut s’amuser un peu plus, voici un document modèle HTML qu’on peut ouvrir à chaque fois et sauvegarder plusieurs fois, comme dans l’exemple que je citais plus haut :

https://www.encodedna.com/2014/03/convert-your-browser-into-a-notepad-html5-contenteditable.htm

Par défaut dans mon navigateur, le fichier de sauvegarde porte le nom inscrit dans le code (myfile.txt) et bien sûr on perd le formatage HTML, mais cela n’est qu’un exemple à améliorer.

  1. Autres exemple : on peut utiliser aussi et en plus le LocalStorage, et là bien sûr on s’amuse à créer une appli HTML5 standard, cela va un peut au-delà du propos initial, on tombe dans le développement Web habituel, comme cette appli de post-It dans le navigateur.

https://jsfiddle.net/teylorfeliz/kyykdvce/1/

  1. Un petit dernier pour la route qui fonctionne sous FFX :

data:text/html,<html%20contenteditable><style>body{-moz-box-sizing:border-box;box-sizing:border-box;word-break:break-all;overflow-x:hidden;color:%23333;width:960px;margin:0%20auto;display:block;height:100%;font-size:20pt;font-family:monospace;padding:20pt;}</style></html>

Voili, voilà.