{"id":27637,"date":"2021-05-20T10:43:00","date_gmt":"2021-05-20T07:43:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27637"},"modified":"2021-10-18T04:10:53","modified_gmt":"2021-10-18T01:10:53","slug":"como-instalar-e-usar-o-ckeditor-no-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-instalar-e-usar-o-ckeditor-no-laravel\/","title":{"rendered":"Como instalar e usar o CKEditor no Laravel"},"content":{"rendered":"

Voc\u00ea quer instalar o CKEditor no Laravel? CKEditor \u00e9 um editor HTML WYSIWYG (o que voc\u00ea v\u00ea \u00e9 o que voc\u00ea obt\u00e9m) que nos permite escrever formatos de texto rico. Neste artigo, mostro como instalar e usar o CKEditor no Laravel<\/strong>.<\/p>\n

Por que usar o CKEditor?<\/h3>\n

O editor de rich text \u00e9 necess\u00e1rio para escrever um conte\u00fado rico para suas p\u00e1ginas ou artigos. Na p\u00e1gina da web, precisamos ter diferentes elementos como imagens, par\u00e1grafos, links, etc. Todos esses diferentes elementos podem ser adicionados usando o CKEditor.<\/p>\n

HTML fornece um elemento textarea para escrever a descri\u00e7\u00e3o. Mas, ele vem com limita\u00e7\u00f5es. Em textarea, n\u00e3o \u00e9 f\u00e1cil e amig\u00e1vel escrever outros elementos HTML como p, div, img, etc.<\/p>\n

Para superar essas limita\u00e7\u00f5es, voc\u00ea pode usar o CKEditor, que \u00e9 um editor de rich text. Nosso editor final ser\u00e1 semelhante \u00e0 imagem abaixo.<\/p>\n

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

Instale o CKEditor no Laravel<\/h3>\n

Existem 2 maneiras de instalar o CKEditor no pacote Laravel – CDN ou CKEditor. Voc\u00ea pode obter os dois recursos de sua p\u00e1gina de download<\/a>.<\/p>\n

O link CDN \u00e9 \/\/cdn.ckeditor.com\/4.14.0\/standard\/ckeditor.js<\/code>. Se voc\u00ea for para o CDN, n\u00e3o precisar\u00e1 baixar nada do site do CKEditor.<\/p>\n

Se voc\u00ea pretende instal\u00e1-lo sem o CDN, baixe o pacote (pacote padr\u00e3o recomendado). A seguir, crie uma pasta ‘ckeditor’ no diret\u00f3rio ‘public’ do seu projeto Laravel. E dentro desta pasta ‘ckeditor’ copie abaixo os arquivos e pastas do pacote baixado.<\/p>\n

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

Como usar o CKEditor<\/h3>\n

Neste est\u00e1gio, voc\u00ea concluiu as etapas de instala\u00e7\u00e3o do pacote CKEditor. Agora vamos ver como usar o CKEditor.<\/p>\n

Digamos que voc\u00ea tenha uma ‘textarea’ que deve ser substitu\u00edda pelo CKEditor. Para fazer isso, estou adicionando id ‘summary-ckeditor’ \u00e0 ‘textarea’.<\/p>\n

<textarea class=\"form-control\" id=\"summary-ckeditor\" name=\"summary-ckeditor\"><\/textarea><\/code><\/pre>\n
Em seguida, voc\u00ea precisa incluir o ckeditor.js<\/code>arquivo e escrever um c\u00f3digo JavaScript que substitua ‘textarea’ pelo CKEditor.<\/p>\n
<script src=\"{{ asset('ckeditor\/ckeditor.js') }}\"><\/script>\n<script>\nCKEDITOR.replace( 'summary-ckeditor' );\n<\/script><\/code><\/pre>\n
O c\u00f3digo JavaScript acima substitui textarea pelo CKEditor. Se voc\u00ea quiser usar o CDN, o c\u00f3digo acima seria o seguinte:<\/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
Execute sua p\u00e1gina no navegador e agora voc\u00ea deve conseguir ver o CKeditor. Agora voc\u00ea pode adicionar seu conte\u00fado ao editor e us\u00e1-lo em seu site.<\/p>\n
Carregar e inserir imagem no CKEditor<\/h3>\n
O CKEditor por padr\u00e3o n\u00e3o oferece a op\u00e7\u00e3o de fazer upload da imagem. Se algu\u00e9m est\u00e1 procurando dar esta op\u00e7\u00e3o, continue lendo este artigo. Ele precisa adicionar uma rota do Laravel, escrever um c\u00f3digo para o upload da imagem e algum JavaScript para o seu aplicativo. Primeiro, para habilitar a op\u00e7\u00e3o de upload de imagem, voc\u00ea precisa chamar o CKEditor da seguinte maneira.<\/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
Aqui, para a chave filebrowserUploadUrl<\/code>, passei a URL da rota e o token csrf. Vamos definir a rota de ‘upload’.<\/p>\n
Route::post('ckeditor\/image_upload', 'CKEditorController@upload')->name('upload');<\/code><\/pre>\n
Recarregue a p\u00e1gina. Agora, se voc\u00ea clicar no \u00edcone da imagem do CKEditor, ver\u00e1 a op\u00e7\u00e3o de upload de imagem conforme mostrado abaixo.<\/p>\n
\"Como<\/a><\/p>\n
Para usar a imagem carregada no CKEditor, voc\u00ea precisa fazer upload da imagem na pasta do aplicativo e enviar de volta o URL da imagem. Para armazenar uma imagem em um servidor, usarei o recurso de armazenamento do Laravel. Portanto, primeiro preciso criar um link simb\u00f3lico para uma pasta de ‘armazenamento’. Execute o comando abaixo para criar um link simb\u00f3lico:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Nosso mapa de rota ‘upload’ com o m\u00e9todo de upload de CKEditorController<\/code>. Portanto, crie um controlador CKEditorController<\/code>e defina o upload<\/code>m\u00e9todo nele da seguinte maneira:<\/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
Agora tente fazer o upload da imagem da op\u00e7\u00e3o de imagem embutida do CKEditor e voc\u00ea obter\u00e1 a imagem adicionada em seu editor.<\/p>\n
Espero que voc\u00ea entenda como instalar e usar o CKEditor no Laravel. Por favor, compartilhe suas id\u00e9ias e sugest\u00f5es no coment\u00e1rio abaixo.<\/p>\n
Artigos relacionados<\/h4>\n