Menu

[Monaco-Editor] Éditeur de texte façon Visual Studio Code

Aujourd'hui notre but sera de créer notre propre éditeur de texte sur une page HTML grâce à Monaco Editor.
Ce dernier ne sera malheureusement pas pris en charge par les navigateurs mobiles ou les cadres Web mobiles comme l'indique la documentation.

Tout d'abord il vous faudra télécharger les composants nécessaires de Monaco Editor :
Télécharger Monaco-Editor.
Dans ce dernier, vous y retrouverez 2 dossiers qui comportent :

  • La documentation complète prise du GIT de Monaco Editor (02/12/2018)
  • Les fichiers nécessaires seulement pour ce tutoriel
Pour ce tutoriel, nous ne nous servirons que du dossier "monaco-editor TITOCODE".


Commençons par intégrer Monaco-editor ainsi que notre balise HTML qui contiendra notre éditeur de code, le style pourra être changé selon vos besoins.
N'oubliez pas d'adapter les liens des fichiers importés avec votre projet.

	
HTML
<!-- CSS --> <link rel="stylesheet" data-name="vs/editor/editor.main" href="min/vs/editor/editor.main.css"> <!-- BODY --> <div id="container" style="width:800px;height:600px;border:1px solid grey"></div> <!-- JS --> <script>var require = { paths: { 'vs': 'min/vs' } };</script> <script src="min/vs/loader.js"></script> <script src="min/vs/editor/editor.main.nls.js"></script> <script src="min/vs/editor/editor.main.js"></script>

Après avoir importé ce dont ont a besoin, nous pouvons configurer notre éditeur de code. Nous ferons ici une configuration simple, n'hésitez pas à aller voir la documentation pour consulter toutes les options disponibles. La documentation

	
JS
var editor = monaco.editor.create(document.getElementById('container'), { value: [ ' <div class="myclass" id="myid"> ', ' \t<p>Hello world !</p> ', ' </div> ' ].join(' \n '), language: 'html', theme: "vs-dark", }); function saveEditor() { // get the value of the data var value = editor.getValue() return value; }

Votre éditeur de texte est prêt à fonctionner !

Vous pourrez également récupérer le contenu de ce dernier avec la fonction que nous avons créée "saveEditor()" !



Catégorie :
JS
Vues :
1133