{"id":28106,"date":"2021-05-20T10:55:00","date_gmt":"2021-05-20T07:55:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28106"},"modified":"2021-10-17T16:55:51","modified_gmt":"2021-10-17T13:55:51","slug":"como-instalar-y-usar-ckeditor-en-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-instalar-y-usar-ckeditor-en-laravel\/","title":{"rendered":"C\u00f3mo instalar y usar CKEditor en Laravel"},"content":{"rendered":"

\u00bfQuieres instalar CKEditor en Laravel? CKEditor es un editor HTML WYSIWYG (lo que ves es lo que obtienes) que nos permite escribir formatos de texto enriquecido. En este art\u00edculo, te muestro c\u00f3mo instalar y usar CKEditor en Laravel<\/strong>.<\/p>\n

\u00bfPor qu\u00e9 es necesario utilizar CKEditor?<\/h3>\n

El editor de texto enriquecido es necesario para escribir contenido enriquecido para sus p\u00e1ginas o art\u00edculos. En la p\u00e1gina web, necesitamos tener diferentes elementos como im\u00e1genes, p\u00e1rrafos, enlaces, etc. Todos estos elementos diferentes se pueden agregar usando el CKEditor.<\/p>\n

HTML proporciona un elemento de \u00e1rea de texto para escribir la descripci\u00f3n. Pero viene con limitaciones. En textarea, no es f\u00e1cil ni f\u00e1cil de usar escribir otros elementos HTML como p, div, img, etc.<\/p>\n

Para superar estas limitaciones, puede utilizar CKEditor, que en s\u00ed mismo es un editor de texto enriquecido. Nuestro editor final se ver\u00e1 como la siguiente captura de pantalla.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Instalar CKEditor en Laravel<\/h3>\n

Hay 2 formas de instalar CKEditor en Laravel: paquete CDN o CKEditor. Puede obtener ambos recursos en su p\u00e1gina de descarga<\/a>.<\/p>\n

El enlace CDN es \/\/cdn.ckeditor.com\/4.14.0\/standard\/ckeditor.js<\/code>. Si opta por CDN, no necesita descargar nada del sitio web de CKEditor.<\/p>\n

Si tiene la intenci\u00f3n de instalarlo sin CDN, descargue el paquete (se recomienda el paquete est\u00e1ndar). A continuaci\u00f3n, cree una carpeta ‘ckeditor’ en el directorio ‘p\u00fablico’ de su proyecto Laravel. Y dentro de esta carpeta ‘ckeditor’, copie debajo los archivos y carpetas del paquete descargado.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

C\u00f3mo utilizar CKEditor<\/h3>\n

En esta etapa, ha completado los pasos para instalar el paquete CKEditor. Ahora veamos c\u00f3mo usar CKEditor.<\/p>\n

Digamos que tiene un ‘textarea’ que deber\u00eda ser reemplazado por CKEditor. Para hacerlo, estoy agregando id ‘summary-ckeditor’ al ‘textarea’.<\/p>\n

<textarea class=\"form-control\" id=\"summary-ckeditor\" name=\"summary-ckeditor\"><\/textarea><\/code><\/pre>\n
A continuaci\u00f3n, debe incluir el ckeditor.js<\/code>archivo y escribir un c\u00f3digo JavaScript que reemplace ‘textarea’ con CKEditor.<\/p>\n
<script src=\"{{ asset('ckeditor\/ckeditor.js') }}\"><\/script>\n<script>\nCKEDITOR.replace( 'summary-ckeditor' );\n<\/script><\/code><\/pre>\n
El c\u00f3digo JavaScript anterior reemplaza textarea con CKEditor. Si desea utilizar CDN, el c\u00f3digo anterior ser\u00eda el siguiente:<\/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
Ejecute su p\u00e1gina en el navegador y ahora deber\u00eda poder ver el CKeditor. Ahora puede agregar su contenido al editor y usarlo en su sitio web.<\/p>\n
Cargar e insertar una imagen en CKEditor<\/h3>\n
CKEditor por defecto no da la opci\u00f3n de cargar la imagen. Si alguien est\u00e1 buscando ofrecer esta opci\u00f3n, siga leyendo este art\u00edculo. Necesita agregar una ruta Laravel, escribir un c\u00f3digo para la carga de im\u00e1genes y algo de JavaScript en su aplicaci\u00f3n. Primero, para habilitar la opci\u00f3n de carga de im\u00e1genes, debe llamar a CKEditor de la siguiente manera.<\/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
Aqu\u00ed, para la clave filebrowserUploadUrl<\/code>, pas\u00e9 la URL de la ruta y el token csrf. Definamos la ruta ‘upload’.<\/p>\n
Route::post('ckeditor\/image_upload', 'CKEditorController@upload')->name('upload');<\/code><\/pre>\n
Vuelve a cargar la p\u00e1gina. Ahora, si hace clic en el icono de imagen de CKEditor, ver\u00e1 la opci\u00f3n de carga de imagen como se muestra a continuaci\u00f3n.<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
Para utilizar la imagen cargada en CKEditor, debe cargar la imagen en la carpeta de su aplicaci\u00f3n y enviar una URL de imagen. Para almacenar una imagen en un servidor, usar\u00e9 la funci\u00f3n de almacenamiento de Laravel. Entonces, primero necesito crear un enlace simb\u00f3lico de una carpeta de ‘almacenamiento’. Ejecute el siguiente comando para crear un enlace simb\u00f3lico:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Nuestro mapa de ‘carga’ de ruta con el m\u00e9todo de carga de CKEditorController<\/code>. As\u00ed que cree un controlador CKEditorController<\/code>y defina el upload<\/code>m\u00e9todo en \u00e9l de la siguiente manera:<\/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
Eso es, ahora intente cargar la imagen desde la opci\u00f3n de imagen incorporada de CKEditor y obtendr\u00e1 la imagen agregada en su editor.<\/p>\n
Espero que entiendas c\u00f3mo instalar y usar CKEditor en Laravel. Comparta sus pensamientos y sugerencias en el comentario a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n