In small projects that require minimal functionality from the wysiwyg editor, I use the standard version of Ckeditor. ckeditor allows you to insert images into text by uploading them to the server first. This is usually done by the file manager, which opens when you click on the "Browse files" button.

But sometimes functionality file manager redundant. You just need to select a file on your computer, download it and paste it into the text. To do this, use the uploadimage plugin, which must be connected to ckeditor. It is convenient to immediately configure ckeditor with this plugin so as not to have to worry about resolving the dependencies of this plugin. Uploadimage adds new tab into the image insertion window.

For the plugin to work, you need to specify the path to the image upload handler on the server in the ckeditor config.js configuration file.

public/ckeditor/config.js

Config.filebrowserUploadUrl = "/upload-image";

This completes the ckeditor setup. Now let's implement the download functionality on the server. Let's add a new route in the web.php file. For simplicity and clarity, I will not put the image loading code into a separate controller, but will write it directly in the routes.

routes/web.php

Route::post("upload-image", function(\Illuminate\Http\Request $request, Illuminate\Contracts\Validation\Factory $validator) ( $v = $validator->make($request->all(), [ "upload" => "required|image", ]); $funcNum = $request->input("CKEditorFuncNum"); if ($v->fails()) ( return response(" window.parent.CKEDITOR. tools.callFunction(($funcNum), "", "($v->errors()->first())"); "); $image = $request->file("upload"); $image ->store("public/uploads"); $url = asset("storage/uploads/".$image->hashName()); return response(" window.parent.CKEDITOR.tools.callFunction(($funcNum) , "($url)", "Image uploaded successfully"); "); ));

Because ckeditor sends the image with a POST request, and laravel checks the CSRF token, which ckeditor does not send, you need to include the newly created route in the exceptions so that laravel does not check the token:

app/Http/Middleware/VerifyCsrfToken.php

Now your file will only be allowed to be downloaded PNG images and JPEG not exceeding 2 MB (Done in terms of security). You can also understand the code and change everything at your discretion.

The most important thing is to change the following in the code:

In line move_uploaded_file($_FILES["upload"]["tmp_name"], "images/".$name); change images/ to the folder where the images relative to the file will be downloaded upload.php.

In addition, specify in the variable $full_path change http://site/images/ to your absolute path to the folder with the downloaded images.

4. That's all. Now loading pictures into CKeditor is no longer a problem. If you consider the processor complex and want to see a “light” version here, in which you can download everything, write in the comments.

- best text editor for everyone" (c) (The best web text editor for everyone). CKEditor is a free visual cross-platform browser editor that is often used to contribute rich text to various content management systems (CMS). The editor is highly customizable, but the latest edition (version 4 at the time of writing this post) does not have the functionality for uploading photos through the editor itself. Now we will figure out how to correct this shortcoming.

Uploading images is not presented because the editor does not have server scripts necessary for uploading files to the server. It is unclear what reasons prompted the editor’s authors to disable this functionality (in previous versions it existed), but without loading images the editor introduces certain problems in formatting the text. Fortunately, the ability to connect your server scripts remains, you just need to enable it. We will not go into details of configuring the editor, but will immediately indicate which options need to be added for this.

So, open the file config.php, which is located in the root of the editor folder and add two lines (38, 39)

/** * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.html or http://ckeditor.com/license */ CKEDITOR.editorConfig = function(config) ( // Define changes to default configuration here. // For the complete reference: // http:/ /docs.ckeditor.com/#!/api/CKEDITOR.config // The toolbar groups arrangement, optimized for two toolbar rows. config.toolbarGroups = [ ( name: "clipboard", groups: [ "clipboard", "undo" ]), ( name: "editing", groups: [ "find", "selection", "spellchecker" ]), ( name: "links" ), ( name: "insert" ), ( name: "forms" ) , ( name: "tools" ), ( name: "document", groups: [ "mode", "document", "doctools" ]), ( name: "others" ), "/", ( name: "basicstyles" ", groups: [ "basicstyles", "cleanup" ]), ( name: "paragraph", groups: [ "list", "indent", "blocks", "align", "bidi" ]), ( name: "styles", ( name: "colors"), ( name: "about" ) ]; // Remove some buttons, provided by the standard plugins, which we don"t // need to have in the Standard(s) toolbar.config.removeButtons = "Underline,Subscript,Superscript"; // Se the most common block elements. config.format_tags = "p;h1;h2;h3;pre"; //Make dialogs simpler. config.removeDialogTabs = "image:advanced;link:advanced"; config.filebrowserImageUploadUrl = "/js/ckeditor/php/imageupload.php"; config.filebrowserImageBrowseUrl = "/js/ckeditor/php/imagebrowse.php"; );

Line 38 tells the editor to enable the file upload functionality in the picture input dialog, line 39 enables the functionality for selecting an already uploaded image.

We have the editor installed in the /js/ckeditor/ folder of the site. There we also created a php folder for our server scripts, this folder must have execution permission for php scripts.

Image upload script imageupload.php.