Markdown Editor

Introduction

Il s'agit d'un Markdown Editor basé sur l'éditeur Web ACE et Markdown-it.

Vous pouvez déployer cet éditeur sur un serveur distant ou simplement l'installer sur un ordinateur local.

C'est très simple à utiliser. Ouvrez simplement la page Web et vous pouvez modifier le texte de démarque à gauche et vous pouvez prévisualiser les résultats à droite une fois que vous appuyez sur le bouton Preview . Vous pouvez enregistrer le fichier en local si vous appuyez sur le bouton Save . Cliquez sur Settings , vous pouvez choisir la taille de la police de l'éditeur, vous pouvez également choisir le style CSS de la fenêtre d'aperçu.

Comment déployer sur un ordinateur local

Installer Node.js

Cet éditeur est basé sur Node.js, vous devez donc d'abord installer Node.js. Vous pouvez trouver le package Node.js ici.

Téléchargez la version appropriée en fonction de votre plateforme et suivez les instructions d'installation fournies par le site Web Node.js.

La façon de vérifier que vous avez déjà installé Node.js consiste à exécuter les deux commandes suivantes :

$ node -v
$ npm -v

Les commandes ci-dessus sont utilisées pour vérifier la version de Node.js et npm que vous venez d'installer. Vous devriez obtenir un résultat similaire.

$ node -v
v6.9.5
$ npm -v
4.1.2

Téléchargez le code source de l'éditeur

Téléchargez/clonez le code source de l'éditeur depuis github.

Trouvez le code dans server.js :

Markdown Editor is openned at: http://%s:%s", host, port); })">

 var server = app . listen ( 7888 , function ( ) {
    var host = server . address ( ) . address ;
    var port = server . address ( ) . port ;

    console . log ( " Markdown Editor is openned at: http://%s:%s" , host , port ) ;
} )

Assurez-vous que le port écouté par cette application est 7888 (vous pouvez choisir un autre port disponible si vous savez ce qui sera affecté).

À présent, vous pouvez exécuter le serveur avec Node.js.

$ node /path/to/source/code/server.js

Ensuite, ouvrez un navigateur et visitez http://127.0.0.1:7888/index.html, vous pouvez voir l'éditeur comme ceci. (Oui, vous devez spécifier le port 7888 ici) Éditeur Markdown " title="Cet Markdown Editor " style="max-width: 100%;">

Comment déployer sur un serveur distant

Vous avez besoin de SSH sur votre serveur distant et effectuez ces étapes sur le serveur distant.

Installer Node.js

Commencez par SSH sur votre serveur distant, je pense que cette étape ne posera plus de problème une fois que vous aurez déjà un serveur distant.

Et puis, c’est la même chose qu’installer en local. Vous devrez peut-être l'installer via PPA, et vous pouvez rechercher sur Google comment installer Node.js sur un serveur distant.

Téléchargez le code source de l'éditeur

Assurez-vous d'abord d'avoir installé git sur votre serveur distant, afin de pouvoir cloner la source avec une simple ligne de commande :

git clone https://github.com/daveying/Markdown-Editor.git

Vous devez également le rechercher sur Google. (remarque : système d'exploitation différent, différentes manières)

Trouvez le code dans server.js :

Markdown Editor is openned at: http://%s:%s", host, port); })">

 var server = app . listen ( 7888 , function ( ) {
    var host = server . address ( ) . address ;
    var port = server . address ( ) . port ;

    console . log ( " Markdown Editor is openned at: http://%s:%s" , host , port ) ;
} )

Assurez-vous que le port que cette application écoute est 80. Ici, nous choisissons 80 car vous pouvez visiter l'application en spécifiant simplement l'adresse IP sur votre navigateur. Et il est beaucoup plus simple de créer un nom de domaine.

À présent, vous pouvez exécuter le serveur avec Node.js.

$ node /path/to/source/code/server.js

Ensuite, ouvrez un navigateur et visitez http://ip_of_your_remote_server, vous devriez voir cet éditeur.

Si vous avez un nom de domaine

Vous pouvez ajouter un point d'enregistrement A à l'adresse IP de votre serveur distant et utiliser votre domaine pour visiter cet éditeur. (Si le port n'est pas défini sur 80, vous devez utiliser un outil appelé nginx)

Vous possédez déjà un nom de domaine, vous pouvez donc comprendre comment le configurer. Voici le rendu de cette application web lorsque vous la visitez via un appareil mobile.

Éditeur Markdown " title="Cet Markdown Editor " style="max-width: 100%;">