Setting up viewing and uploading files in FCKeditor
This article describes the individual techniques for setting up the FCKeditor editor and its built-in file browser to control the uploading of files to the server. These techniques will help to better understand the principles of the editor and more closely integrate it into your CMS, at the same time preventing possible security problems when using this editor.
General information about the editor FCKeditor you can find on its official website www.fckeditor.net . In short: this is a WYSIWYG editor written in JavaScript and supporting work with server scripts in various programming languages ​​(perl, php, python, asp). Further everywhere I will have in mind the php language, but everything said can be easily adapted for other languages. The editor works fine in most modern browsers (IE 6+, FF 1.5+, Opera 9.5), has rich functionality and well-documented code that allows you to edit it to adapt to the specific requirements of the CMS in which it is used. This is not an advertisement, but an explanation of why I use this editor and decided to write this article :)
Among other things, the editor allows you to insert into the editable text various objects: images, Flash-videos, multimedia files, as well as links to arbitrary files from the server. Two dialogs are used for this: inserts and object properties (for example, an image, see the first slide) and a resource browser (see the second slide). On the slides, I highlighted the controls that will be mentioned in the text. The insert dialog is invoked when clicking on the image insertion buttons, it implements two important functions for us: upload the image file to the server and call the resource browser window. The ability to perform these functions and a number of parameters (location of downloadable files on the server, valid file extensions, etc.) are described in the configuration files.
Inserting and editing object properties
Resource Browser Dialog
')
Next, we define: it will be about FCKeditor version 2.6.3 , which was the last one at the time of this writing.
The main editor configuration file is called
However, as you know, and always have to remember, the user can always change the client settings with due diligence against your will, so I knowingly clarified that the previous settings affect the interface more than the actual restrictions on downloading and viewing files on the server. Therefore, the basic access settings are controlled through the configuration of server scripts.
The scripts controlling viewing and uploading the file to the server are located in the subfolder
1. Line 30. Here is the main "switch" of the connector, supplied, as expected, with a stern warning that you can only turn it on by setting everything up correctly, otherwise you will get a big hole in the security of the site. In order for the connector to work at all, in this line, of course, you need to write = true.
2. Line 34. Specifies the relative URL of the folder with the resources managed by this connector.
Here it is time to figure out how we manage access to the resource browser in accordance with the rights of visitors to the site. If we use the editor in a single-user CMS (when everyone who was able to access the editor’s catalog has the right to upload anything to the site), it’s enough to configure everything for the site administrator and deny access to others (for example, at the web server level) . But if the editor will be used to write posts in personal blogs, then you need to firstly prohibit the work of the connector for unauthorized users, and secondly, split the folders for downloading files by different users.
The configuration file is used when a resource browser web page is accessed by the connector. Therefore, the only way out is to include a call to your own script in this file, which will check the user's authorization (by cookie, for example) and turn the connector on and off, and at the same time specify the correct path.
Code example:
Next in the file ...
3. Line 40. Here you can see the path to the same folder with resources, but from the point of view of the file system. If this path is left blank, it will be determined by calling a function from the web server API (in the case of PHP, it is apache_lookup_uri , which returns information about the object by the specified URI). If you have mod_rewrite configured on the server in the directory pointed to by 'UserFilesPath', you need to fill this field because The request through the web server will be executed with regard to mod_rewrite and may lead completely to the wrong place.
4. Line 54. Here are listed the types of resources with which the resource browser can work. Remember these names, they will be mentioned in the next block of settings.
5. Lines 123 - 149. Here are the setting blocks for each type of resource. The settings are grouped together, the composition of the groups is the same, so we consider only one of them. The comments before the blocks describe in detail the purpose of the fields, so my description is mostly a translation and retelling of this comment in my own words.
It is first checked if the list of allowed extensions is not empty and the extension of the downloadable file is missing in it, the file is not accepted. Then it is checked if the list of prohibited extensions is not empty and the extension of the downloadable file is present in it, the file is not accepted. To disable the ability to load any type of resources, you can specify in the 'AllowedExtensions' array of one element "*", because None of the downloaded files will fit this extension. You can also configure valid extensions depending on user rights, as already described just above.
Next come the path settings for file placement. We see that directory path settings are formed from global paths (specified in lines 34 and 40) by adding to them the corresponding subdirectory. But nothing prevents you from specifying these paths directly, with string constants. By the way, the global path is no longer used for anything, except for the formation of paths for each type of resource (this is just a note so that you are not afraid to change them as you need).
Please note (this is also described in the comments) that by default this directory is different from the one specified by the 'FileTypesPath' field (it is written that for backward compatibility), therefore it is recommended to edit the lines 'QuickUploadPath' and 'QuickUploadAbsolutePath' to specify to the same directory as 'FileTypesPath' and 'FileTypesAbsolutePath' respectively:
at the end of the settings file, and simply assigning the assignment lines to the 'QuickUploadPath' and 'QuickUploadAbsolutePath' fields. Otherwise, you may encounter an unpleasant effect - files uploaded through the “Download” tab will not be visible by the “View on server” button.
And finally, a small bonus. The fact is that the rich functions of the browser built into FCKeditor can be used not only in the editor, but also separately.
To view and manage image files, you must create a window (for example, by calling the
In the opening window should be a JS-function
which will be called when the user clicks on the image file, the corresponding URL will be passed to this function.
If you want to allow the user to browse all categories of files, not just images, remove the
I hope the information was helpful. Ready for constructive dialogue and valid criticism :)
General information about the editor FCKeditor you can find on its official website www.fckeditor.net . In short: this is a WYSIWYG editor written in JavaScript and supporting work with server scripts in various programming languages ​​(perl, php, python, asp). Further everywhere I will have in mind the php language, but everything said can be easily adapted for other languages. The editor works fine in most modern browsers (IE 6+, FF 1.5+, Opera 9.5), has rich functionality and well-documented code that allows you to edit it to adapt to the specific requirements of the CMS in which it is used. This is not an advertisement, but an explanation of why I use this editor and decided to write this article :)
Among other things, the editor allows you to insert into the editable text various objects: images, Flash-videos, multimedia files, as well as links to arbitrary files from the server. Two dialogs are used for this: inserts and object properties (for example, an image, see the first slide) and a resource browser (see the second slide). On the slides, I highlighted the controls that will be mentioned in the text. The insert dialog is invoked when clicking on the image insertion buttons, it implements two important functions for us: upload the image file to the server and call the resource browser window. The ability to perform these functions and a number of parameters (location of downloadable files on the server, valid file extensions, etc.) are described in the configuration files.
Inserting and editing object properties
Resource Browser Dialog
')
Next, we define: it will be about FCKeditor version 2.6.3 , which was the last one at the time of this writing.
The main editor configuration file is called
fckconfig.js and is located in the root directory of the editor (for definiteness, we assume that the editor is in the / fcke / root directory of the site). In it, we are interested in lines 284 through 312, which describe the settings for downloading files of various types in a different way. The LinkBrowser, ImageBrowser, and FlashBrowser fields determine whether the View on Server button is displayed in the corresponding dialog box, which opens the resource browser dialog. The fields LinkUpload, ImageUpload, FlashUpload determine the presence in the corresponding dialog of the “Download” tab for a quick download of the corresponding file. By setting the required fields to false, you disable the display of the corresponding interface elements.
However, as you know, and always have to remember, the user can always change the client settings with due diligence against your will, so I knowingly clarified that the previous settings affect the interface more than the actual restrictions on downloading and viewing files on the server. Therefore, the basic access settings are controlled through the configuration of server scripts.
The scripts controlling viewing and uploading the file to the server are located in the subfolder
editor/filemanager/connectors/LANGUAGE , where LANGUAGE is the server scripting language. We, as I said, will consider the settings on the example of PHP. It is better to completely erase unused connectors for security reasons and simply reduce the space occupied. There is a configuration file in the connector directory, in our case it is config.php . This file contains everything you need to set up file uploads.
1. Line 30. Here is the main "switch" of the connector, supplied, as expected, with a stern warning that you can only turn it on by setting everything up correctly, otherwise you will get a big hole in the security of the site. In order for the connector to work at all, in this line, of course, you need to write = true.
2. Line 34. Specifies the relative URL of the folder with the resources managed by this connector.
Here it is time to figure out how we manage access to the resource browser in accordance with the rights of visitors to the site. If we use the editor in a single-user CMS (when everyone who was able to access the editor’s catalog has the right to upload anything to the site), it’s enough to configure everything for the site administrator and deny access to others (for example, at the web server level) . But if the editor will be used to write posts in personal blogs, then you need to firstly prohibit the work of the connector for unauthorized users, and secondly, split the folders for downloading files by different users.
The configuration file is used when a resource browser web page is accessed by the connector. Therefore, the only way out is to include a call to your own script in this file, which will check the user's authorization (by cookie, for example) and turn the connector on and off, and at the same time specify the correct path.
Code example:
global $ Config;
require ('my_auth_script.php');
$ currentUser = GetCurrentUser ();
if ($ currentUser)
{
$ Config ['Enabled'] = true;
$ Config ['UserFilesPath'] = "/ userfiles / $ currentUser /";
}
else
{
$ Config ['Enabled'] = false;
$ Config ['UserFilesPath'] = '';
}
Next in the file ...
3. Line 40. Here you can see the path to the same folder with resources, but from the point of view of the file system. If this path is left blank, it will be determined by calling a function from the web server API (in the case of PHP, it is apache_lookup_uri , which returns information about the object by the specified URI). If you have mod_rewrite configured on the server in the directory pointed to by 'UserFilesPath', you need to fill this field because The request through the web server will be executed with regard to mod_rewrite and may lead completely to the wrong place.
4. Line 54. Here are listed the types of resources with which the resource browser can work. Remember these names, they will be mentioned in the next block of settings.
5. Lines 123 - 149. Here are the setting blocks for each type of resource. The settings are grouped together, the composition of the groups is the same, so we consider only one of them. The comments before the blocks describe in detail the purpose of the fields, so my description is mostly a translation and retelling of this comment in my own words.
- 'AllowedExtensions' - file extensions that are allowed to upload to the server for this type of resource. The type of resource, by the way, is selected from the list in the upper left corner of the resource browser (see the second slide).
- 'DeniedExtensions' - a list of file extensions that are prohibited for download. Only one of these two lists makes sense.
It is first checked if the list of allowed extensions is not empty and the extension of the downloadable file is missing in it, the file is not accepted. Then it is checked if the list of prohibited extensions is not empty and the extension of the downloadable file is present in it, the file is not accepted. To disable the ability to load any type of resources, you can specify in the 'AllowedExtensions' array of one element "*", because None of the downloaded files will fit this extension. You can also configure valid extensions depending on user rights, as already described just above.
Next come the path settings for file placement. We see that directory path settings are formed from global paths (specified in lines 34 and 40) by adding to them the corresponding subdirectory. But nothing prevents you from specifying these paths directly, with string constants. By the way, the global path is no longer used for anything, except for the formation of paths for each type of resource (this is just a note so that you are not afraid to change them as you need).
- 'FileTypesPath' is the URL of the directory where the file will be uploaded through the resource browser .
- 'FileTypesAbsolutePath' is the same directory in terms of the file system. The rules for this setting are the same as for the global 'UserFilesAbsolutePath' - automatic search for a path if you do not specify anything in this field.
- 'QuickUploadPath' is the URL of the directory to which the file will be uploaded via the “Download” tab of the object's insert dialog (links, images, Flash movie).
- 'QuickUploadAbsolutePath' is the file system path to the same directory.
Please note (this is also described in the comments) that by default this directory is different from the one specified by the 'FileTypesPath' field (it is written that for backward compatibility), therefore it is recommended to edit the lines 'QuickUploadPath' and 'QuickUploadAbsolutePath' to specify to the same directory as 'FileTypesPath' and 'FileTypesAbsolutePath' respectively:
foreach ($ Config ['ConfigAllowedTypes'] as $ resType)
{
$ Config ['QuickUploadPath'] [$ resType]
= $ Config ['FileTypesPath'] [$ resType];
$ Config ['QuickUploadAbsolutePath'] [$ resType]
= $ Config ['FileTypesAbsolutePath'] [$ resType];
}
at the end of the settings file, and simply assigning the assignment lines to the 'QuickUploadPath' and 'QuickUploadAbsolutePath' fields. Otherwise, you may encounter an unpleasant effect - files uploaded through the “Download” tab will not be visible by the “View on server” button.
And finally, a small bonus. The fact is that the rich functions of the browser built into FCKeditor can be used not only in the editor, but also separately.
To view and manage image files, you must create a window (for example, by calling the
window.open JavaScript function at the click of a button) by opening a page with the following URL: /fcke/editor/filemanager/browser/default/browser.html?Type=Image&Connector=../../connectors/php/connector.php
In the opening window should be a JS-function
function SetUrl (url)
{
}
which will be called when the user clicks on the image file, the corresponding URL will be passed to this function.
If you want to allow the user to browse all categories of files, not just images, remove the
Type=Image parameter from the browser URL above. Then all the types listed in the connector configuration file will appear in the drop-down list of file types (line 54).
I hope the information was helpful. Ready for constructive dialogue and valid criticism :)
Source: https://habr.com/ru/post/39054/
All Articles