{"id":24685,"date":"2021-05-23T15:01:00","date_gmt":"2021-05-23T12:01:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24685"},"modified":"2021-10-18T02:14:17","modified_gmt":"2021-10-17T23:14:17","slug":"top-3-des-editeurs-de-texte-enrichi-gratuits-pour-les-applications-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/top-3-des-editeurs-de-texte-enrichi-gratuits-pour-les-applications-web\/","title":{"rendered":"Top 3 des \u00e9diteurs de texte enrichi gratuits pour les applications Web"},"content":{"rendered":"

Vous recherchez un \u00e9diteur de texte riche gratuit pour votre application Web? Un \u00e9diteur WYSIWYG (ce que vous voyez est ce que vous obtenez) vous permet de saisir du contenu descriptif ainsi que des \u00e9l\u00e9ments HTML. Dans cet article, nous discutons des 3 meilleurs \u00e9diteurs de texte riche gratuits qui sont populaires et faciles \u00e0 installer.<\/p>\n

Il existe plusieurs \u00e9diteurs WYSIWYG disponibles sur Internet. J’ai essay\u00e9 certains des \u00e9diteurs et j’ai choisi les 3 meilleurs \u00e9diteurs HTML WYSIWYG gratuits , \u00e0 savoir CKEditor, TinyMCE et Trix<\/strong>.<\/p>\n

Pourquoi avoir besoin d’un \u00e9diteur de texte enrichi\u00a0?<\/h3>\n

On peut se demander pourquoi utiliser l’\u00e9diteur de texte enrichi? La r\u00e9ponse est simple. Dans la zone de texte, il n’est pas facile et convivial d’entrer de gros morceaux de contenu. Il est tr\u00e8s difficile d’entrer diff\u00e9rents types d’\u00e9l\u00e9ments HTML dans la zone de texte. Envelopper le contenu dans des \u00e9l\u00e9ments et maintenir leur hi\u00e9rarchie est difficile dans textarea.<\/p>\n

Pour simplifier ce probl\u00e8me, nous avons la possibilit\u00e9 d’utiliser un \u00e9diteur de texte enrichi. Ces \u00e9diteurs WYSIWYG offrent une bonne interface utilisateur et une exp\u00e9rience utilisateur \u00e0 la place de textarea.<\/p>\n

CKEditor \u2013 \u00c9diteur de texte Web<\/h3>\n

CKEditor<\/a> est un \u00e9diteur de texte riche gratuit populaire et couramment utilis\u00e9. Cet \u00e9diteur est con\u00e7u pour simplifier la cr\u00e9ation de contenu de site Web.<\/p>\n

Pour utiliser CKEditor, vous devez d’abord inclure son fichier JS. Ils ont fourni 3 types de forfaits – Basic, Standard, Full. Vous pouvez choisir l’un ou l’autre forfait en fonction des besoins. Un fichier JS diff\u00e9rent est disponible pour chaque package.<\/p>\n

Voici le lien pour les packages CKEditor <\/a>http:\/\/ckeditor.com\/download<\/a><\/p>\n

Sur la page ci-dessus, on peut choisir n’importe quel package et obtenir un chemin source JS d’un package.<\/p>\n

\"Top<\/a><\/p>\n

Par exemple, j’utilise le package standard donc mon code sera le suivant.<\/p>\n

<!DOCTYPE html>\n<html>\n\u00a0\u00a0\u00a0\u00a0<head>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<title>CKEditor<\/title>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<script src=\"\/\/cdn.ckeditor.com\/4.14.1\/standard\/ckeditor.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<\/head>\n\u00a0\u00a0\u00a0\u00a0<body>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<textarea name=\"editor1\"><\/textarea>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<script>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0CKEDITOR.replace( 'editor1' );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/script>\n\u00a0\u00a0\u00a0\u00a0<\/body>\n<\/html><\/code><\/pre>\n
Le code ci-dessus g\u00e9n\u00e9rera un \u00e9diteur qui ressemble \u00e0 la capture d’\u00e9cran ci-dessous.<\/p>\n
\"Top<\/a><\/p>\n
TinyMCE \u2013 \u00c9diteur WYSIWYG avanc\u00e9<\/h3>\n
TinyMCE<\/a> est l’un des \u00e9diteurs open source les plus utilis\u00e9s. Des marques bien connues utilisent cet \u00e9diteur dans leur d\u00e9veloppement principal.<\/p>\n
L’installation de l’\u00e9diteur TinyMCE est super facile. Le code suivant remplace textarea par l’\u00e9diteur TinyMCE WYSIWYG.<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n\u00a0\u00a0<script src=\"https:\/\/cdn.tiny.cloud\/1\/no-api-key\/tinymce\/5\/tinymce.min.js\" referrerpolicy=\"origin\"><\/script>\n\u00a0\u00a0<script>tinymce.init({ selector:'textarea' });<\/script>\n<\/head>\n<body>\n\u00a0\u00a0<textarea>Next, get a free Tiny Cloud API key!<\/textarea>\n<\/body>\n<\/html><\/code><\/pre>\n
Vous trouverez ci-dessous la capture d’\u00e9cran d’un \u00e9diteur g\u00e9n\u00e9r\u00e9 \u00e0 l’aide du code ci-dessus.<\/p>\n
\"Top<\/a><\/p>\n
Cet \u00e9diteur fournit un riche ensemble de barres d’outils. L’utilisateur peut ajouter des fonctionnalit\u00e9s (plugins) comme les \u00e9motions, l’ancre, le mode plein \u00e9cran, l’image, l’impression, le correcteur orthographique, le tableau, le nombre de mots, etc. dans la barre d’outils d’un \u00e9diteur. Vous obtiendrez la liste compl\u00e8te de toutes les fonctionnalit\u00e9s de la barre d’outils disponibles sur leur documentation<\/a>.<\/p>\n
Trix – un \u00e9diteur WYSIWYG Open Source<\/h3>\n
Trix<\/a> est un autre \u00e9diteur de texte riche open source de Basecamp. Comme cet \u00e9diteur est utilis\u00e9 dans Basecamp, des millions d’utilisateurs l’utilisent d\u00e9j\u00e0. J’ai \u00e9crit un article s\u00e9par\u00e9 sur l’\u00e9diteur Trix, veuillez donc consulter cet article<\/a> qui explique comment utiliser l’\u00e9diteur Trix dans vos sites Web.<\/p>\n
J’esp\u00e8re que vous avez une compr\u00e9hension de base des \u00e9diteurs de texte riche gratuits populaires. Veuillez partager vos pens\u00e9es et suggestions dans une section de commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n