{"id":24549,"date":"2021-05-20T11:02:00","date_gmt":"2021-05-20T08:02:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24549"},"modified":"2021-10-18T02:15:12","modified_gmt":"2021-10-17T23:15:12","slug":"comment-installer-et-utiliser-ckeditor-dans-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-installer-et-utiliser-ckeditor-dans-laravel\/","title":{"rendered":"Comment installer et utiliser CKEditor dans Laravel"},"content":{"rendered":"

Voulez-vous installer CKEditor dans Laravel\u00a0? CKEditor est un \u00e9diteur HTML WYSIWYG (ce que vous voyez est ce que vous obtenez) qui nous permet d’\u00e9crire des formats de texte enrichi. Dans cet article, je vous montre comment installer et utiliser CKEditor dans Laravel<\/strong>.<\/p>\n

Pourquoi utiliser CKEditor\u00a0?<\/h3>\n

L’\u00e9diteur de texte enrichi est n\u00e9cessaire pour r\u00e9diger du contenu riche pour vos pages ou articles. Sur la page Web, nous devons avoir diff\u00e9rents \u00e9l\u00e9ments comme des images, des paragraphes, des liens, etc. Tous ces diff\u00e9rents \u00e9l\u00e9ments peuvent \u00eatre ajout\u00e9s \u00e0 l’aide de CKEditor.<\/p>\n

HTML fournit un \u00e9l\u00e9ment textarea pour \u00e9crire la description. Mais, cela vient avec des limites. Dans textarea, il n’est pas facile et convivial d’\u00e9crire d’autres \u00e9l\u00e9ments HTML comme p, div, img, etc.<\/p>\n

Pour surmonter ces limitations, vous pouvez utiliser CKEditor qui est lui-m\u00eame un \u00e9diteur de texte enrichi. Notre \u00e9diteur final ressemblera \u00e0 la capture d’\u00e9cran ci-dessous.<\/p>\n

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

Installer CKEditor dans Laravel<\/h3>\n

Il existe 2 fa\u00e7ons d’installer CKEditor dans Laravel – CDN ou CKEditor package. Vous pouvez obtenir les deux ressources \u00e0 partir de leur page de t\u00e9l\u00e9chargement<\/a>.<\/p>\n

Le lien CDN est \/\/cdn.ckeditor.com\/4.14.0\/standard\/ckeditor.js<\/code>. Si vous optez pour le CDN, vous n’avez pas besoin de t\u00e9l\u00e9charger quoi que ce soit sur le site Web de CKEditor.<\/p>\n

Si vous avez l’intention de l’installer sans CDN, t\u00e9l\u00e9chargez le package (package standard recommand\u00e9). Ensuite, cr\u00e9ez un dossier ‘ckeditor’ dans le r\u00e9pertoire ‘public’ de votre projet Laravel. Et \u00e0 l’int\u00e9rieur de ce dossier ‘ckeditor’, copiez ci-dessous les fichiers et dossiers du package t\u00e9l\u00e9charg\u00e9.<\/p>\n

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

Comment utiliser CKEditor<\/h3>\n

A ce stade, vous avez termin\u00e9 les \u00e9tapes d’installation du package CKEditor. Voyons maintenant comment utiliser CKEditor.<\/p>\n

Disons que vous avez une ‘zone de texte’ qui devrait \u00eatre remplac\u00e9e par CKEditor. Pour ce faire, j’ajoute l’identifiant ‘summary-ckeditor’ \u00e0 la ‘textarea’.<\/p>\n

<textarea class=\"form-control\" id=\"summary-ckeditor\" name=\"summary-ckeditor\"><\/textarea><\/code><\/pre>\n
Ensuite, vous devez inclure un ckeditor.js<\/code>fichier et \u00e9crire un code JavaScript qui remplace ‘textarea’ par CKEditor.<\/p>\n
<script src=\"{{ asset('ckeditor\/ckeditor.js') }}\"><\/script>\n<script>\nCKEDITOR.replace( 'summary-ckeditor' );\n<\/script><\/code><\/pre>\n
Le code JavaScript ci-dessus remplace textarea par CKEditor. Si vous souhaitez utiliser CDN, le code ci-dessus serait le suivant\u00a0:<\/p>\n
<script src=\"\/\/cdn.ckeditor.com\/4.14.0\/standard\/ckeditor.js\"><\/script>\n<script>\nCKEDITOR.replace( 'summary-ckeditor' );\n<\/script><\/code><\/pre>\n
Ex\u00e9cutez votre page sur le navigateur et vous devriez maintenant pouvoir voir le CKeditor. Vous pouvez maintenant ajouter votre contenu \u00e0 l’\u00e9diteur et l’utiliser sur votre site Web.<\/p>\n
T\u00e9l\u00e9charger et ins\u00e9rer une image dans CKEditor<\/h3>\n
CKEditor par d\u00e9faut ne donne pas la possibilit\u00e9 de t\u00e9l\u00e9charger l’image. Si quelqu’un cherche \u00e0 donner cette option, continuez \u00e0 lire cet article. Il doit ajouter une route Laravel, \u00e9crire un code pour le t\u00e9l\u00e9chargement d’images et du JavaScript dans votre application. Tout d’abord, pour activer l’option de t\u00e9l\u00e9chargement d’images, vous devez appeler CKEditor de la mani\u00e8re suivante.<\/p>\n
<script>\nCKEDITOR.replace( 'summary-ckeditor', {\n\u00a0\u00a0\u00a0\u00a0filebrowserUploadUrl: \"{{route('upload', ['_token' => csrf_token() ])}}\",\n\u00a0\u00a0\u00a0\u00a0filebrowserUploadMethod: 'form'\n});\n<\/script><\/code><\/pre>\n
Ici, pour la cl\u00e9, filebrowserUploadUrl<\/code>j’ai pass\u00e9 l’URL de la route et le jeton csrf. D\u00e9finissons la route ‘upload’.<\/p>\n
Route::post('ckeditor\/image_upload', 'CKEditorController@upload')->name('upload');<\/code><\/pre>\n
Recharge la page. Maintenant, si vous cliquez sur l’ic\u00f4ne d’image de CKEditor, vous verrez l’option de t\u00e9l\u00e9chargement d’image comme indiqu\u00e9 ci-dessous.<\/p>\n
\"Comment<\/a><\/p>\n
Afin d’utiliser l’image t\u00e9l\u00e9charg\u00e9e dans CKEditor, vous devez t\u00e9l\u00e9charger l’image dans votre dossier d’application et renvoyer une URL d’image. Pour stocker une image sur un serveur, j’utiliserai la fonction de stockage Laravel. Je dois donc d’abord cr\u00e9er un lien symbolique d’un dossier de "stockage". Ex\u00e9cutez la commande ci-dessous pour cr\u00e9er un lien symbolique\u00a0:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Notre carte de \u00ab\u00a0t\u00e9l\u00e9chargement\u00a0\u00bb d’itin\u00e9raire avec la m\u00e9thode de t\u00e9l\u00e9chargement de CKEditorController<\/code>. Cr\u00e9ez donc un contr\u00f4leur CKEditorController<\/code>et d\u00e9finissez la upload<\/code>m\u00e9thode comme suit\u00a0:<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\n\u00a0\nclass CKEditorController extends Controller\n{\n\u00a0\u00a0\u00a0\u00a0public function upload(Request $request)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($request->hasFile('upload')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename with extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenamewithextension = $request->file('upload')->getClientOriginalName();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename without extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get file extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$extension = $request->file('upload')->getClientOriginalExtension();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/filename to store\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenametostore = $filename.'_'.time().'.'.$extension;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Upload File\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('upload')->storeAs('public\/uploads', $filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$CKEditorFuncNum = $request->input('CKEditorFuncNum');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$url = asset('storage\/uploads\/'.$filenametostore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$msg = 'Image successfully uploaded';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$re = \"<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')<\/script>\";\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Render HTML output\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@header('Content-type: text\/html; charset=utf-8');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $re;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Voil\u00e0, essayez maintenant de t\u00e9l\u00e9charger l’image \u00e0 partir de l’option d’image int\u00e9gr\u00e9e de CKEditor et vous obtiendrez l’image ajout\u00e9e dans votre \u00e9diteur.<\/p>\n
J’esp\u00e8re que vous comprenez comment installer et utiliser CKEditor dans Laravel. Veuillez partager vos pens\u00e9es et suggestions dans le commentaire ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n