{"id":24663,"date":"2021-05-23T10:59:00","date_gmt":"2021-05-23T07:59:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24663"},"modified":"2021-10-18T02:14:25","modified_gmt":"2021-10-17T23:14:25","slug":"comment-installer-et-utiliser-tinymce-editor-dans-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-installer-et-utiliser-tinymce-editor-dans-laravel\/","title":{"rendered":"Comment installer et utiliser TinyMCE Editor dans Laravel"},"content":{"rendered":"

Dans le pass\u00e9, j’ai publi\u00e9 un article Comment utiliser CKEditor dans Laravel<\/a>. En r\u00e9f\u00e9rence \u00e0 cet article, de nombreux lecteurs ont demand\u00e9 d’\u00e9crire un article sur l’utilisation de l’ \u00e9diteur TinyMCE dans Laravel<\/strong>. TinyMCE est \u00e9galement l’un des \u00e9diteurs HTML WYSIWYG les plus populaires comme CKEditor. Dans cet article, nous \u00e9tudions comment installer et utiliser l’\u00e9diteur TinyMCE dans l’application Laravel.<\/p>\n

Lorsque nous travaillons sur le Web, nous devons parfois stocker du contenu long, des images et des extraits enrichis dans la base de donn\u00e9es. Ce contenu peut \u00eatre une biographie, un r\u00e9sum\u00e9 de produit, un contenu de page, etc. Tous ces formats n\u00e9cessitent l’utilisation de diff\u00e9rentes balises HTML. La balise textarea de HTML n’est pas conviviale lorsqu’il s’agit d’\u00e9crire du contenu comprenant des \u00e9l\u00e9ments HTML. C’est ici que vous devez utiliser les \u00e9diteurs de texte Web<\/a>.<\/p>\n

TinyMCE et CKEditor sont des \u00e9diteurs populaires. A vous de choisir l’un ou l’autre. Les deux \u00e9diteurs WYSIWYG (ce que vous voyez est ce que vous obtenez) sont l\u00e9gers et fonctionnent parfaitement pour les applications Web.<\/p>\n

L’\u00e9diteur TinyMCE est gratuit \u00e0 utiliser avec les outils limit\u00e9s. Si vous souhaitez utiliser leurs plugins premium, veuillez consulter leur page de tarification<\/a>.<\/p>\n

Installer et utiliser TinyMCE Editor dans Laravel<\/h2>\n

Pour int\u00e9grer l’\u00e9diteur TinyMCE dans Laravel, je vais utiliser le package npm pour TinyMCE<\/a>. Laravel fournit un support int\u00e9gr\u00e9 pour npm. Tout ce dont vous avez besoin pour vous assurer que Node.js<\/a> est install\u00e9 sur votre syst\u00e8me. Ouvrez le terminal dans le r\u00e9pertoire racine de votre projet et ex\u00e9cutez la commande pour installer d’abord les d\u00e9pendances npm.<\/p>\n

npm install<\/code><\/pre>\n
Apr\u00e8s cela, installez TinyMCE \u00e0 l’aide de npm par la commande\u00a0:<\/p>\n
npm i tinymce<\/code><\/pre>\n
Une fois termin\u00e9, si vous vous dirigez vers le r\u00e9pertoire "node_modules\/tinymce", vous verrez quelques fichiers et dossiers. Nous devons en copier certains et les placer dans le r\u00e9pertoire ‘public’. Pour ce faire, ouvrez le webpack.mix.js<\/code>fichier et ajoutez-y le code ci-dessous.<\/p>\n
webpack.mix.js<\/strong><\/p>\n
....\n....\nmix.copyDirectory('node_modules\/tinymce\/icons', 'public\/node_modules\/tinymce\/icons');\nmix.copyDirectory('node_modules\/tinymce\/plugins', 'public\/node_modules\/tinymce\/plugins');\nmix.copyDirectory('node_modules\/tinymce\/skins', 'public\/node_modules\/tinymce\/skins');\nmix.copyDirectory('node_modules\/tinymce\/themes', 'public\/node_modules\/tinymce\/themes');\nmix.copy('node_modules\/tinymce\/jquery.tinymce.js', 'public\/node_modules\/tinymce\/jquery.tinymce.js');\nmix.copy('node_modules\/tinymce\/jquery.tinymce.min.js', 'public\/node_modules\/tinymce\/jquery.tinymce.min.js');\nmix.copy('node_modules\/tinymce\/tinymce.js', 'public\/node_modules\/tinymce\/tinymce.js');\nmix.copy('node_modules\/tinymce\/tinymce.min.js', 'public\/node_modules\/tinymce\/tinymce.min.js');<\/code><\/pre>\n
Dans le code ci-dessus, nous utilisons la fonctionnalit\u00e9 Compiling Assets (Mix)<\/a> de Laravel.<\/p>\n
Ensuite, ex\u00e9cutez la commande qui copie les fichiers et dossiers de ‘node_modules\/tinymce’ vers le r\u00e9pertoire ‘public’.<\/p>\n
npm run dev<\/code><\/pre>\n
Nous sommes maintenant pr\u00eats \u00e0 utiliser l’\u00e9diteur TinyMCE dans le fichier blade. Incluez le tinymce.js<\/code>fichier et appelez l’\u00e9diteur comme suit.<\/p>\n
<textarea class=\"description\" name=\"description\"><\/textarea>\n<script src=\"{{ asset('node_modules\/tinymce\/tinymce.js') }}\"><\/script>\n<script>\n\u00a0\u00a0\u00a0\u00a0tinymce.init({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0selector:'textarea.description',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 900,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 300\n\u00a0\u00a0\u00a0\u00a0});\n<\/script><\/code><\/pre>\n
Vous devriez maintenant voir l’\u00e9diteur TinyMCE sur votre page, tout comme la capture d’\u00e9cran ci-dessous.<\/p>\n
Installer TinyMCE \u00e0 l’aide du CDN<\/h2>\n
Jusqu’\u00e0 pr\u00e9sent, nous avons vu comment installer l’\u00e9diteur TinyMCE \u00e0 l’aide de npm, ce qui est une m\u00e9thode recommand\u00e9e. Une autre fa\u00e7on d’utiliser TinyMCE est via CDN. En utilisant CDN, vous n’avez pas besoin de conserver les fichiers de biblioth\u00e8que sur votre serveur. Il inclut directement les fichiers requis \u00e0 partir d’un serveur h\u00e9berg\u00e9.<\/p>\n
L’utilisateur peut utiliser TinyMCE via CDN comme suit.<\/p>\n
<textarea class=\"description\" name=\"description\"><\/textarea>\n<script src=\"https:\/\/cloud.tinymce.com\/stable\/tinymce.min.js\"><\/script>\n<script>\n\u00a0\u00a0\u00a0\u00a0tinymce.init({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0selector:'textarea.description',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 900,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 300\n\u00a0\u00a0\u00a0\u00a0});\n<\/script><\/code><\/pre>\n
C’est \u00e7a! J’esp\u00e8re que vous comprenez comment installer et utiliser l’\u00e9diteur TinyMCE dans Laravel. J’aimerais entendre vos pens\u00e9es et suggestions dans la section des commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h3>\n