Directly Upload and Link Files to the Text Editor Content in Drupal 8
One of Drupal’s big advantages is its possibility to structure content with the use of fields. However, from time to time you will want to link a file to your content without the need of adding a field to the database for that purpose.
The D8 Editor File Upload module provides this functionality by adding a button to the toolbar of the rich text editor (in this case CKEditor). This way it is possible to upload a file and present it within the content as a link. This tutorial will expĺain the usage of this module.
Let’s start!
Step #1. – Install the Required Module
- Open your terminal window
- In the root of your Drupal installation type:
composer require drupal/editor_file
No further modules are required.
- Click Extend
- Scroll down to the D8 Editor File Upload module and enable it
- Click Install:
Step #2. – Configure the Text Format
- Click Configuration > Text formats and editors:
You can configure and add text formats to be used by different user roles on your site. By default, there are four formats.
- Click Configure beside the Full HTML format
- Scroll down to the Toolbar configuration area and click Show group names
- Click the Add group button in order to create a new group and call it File:
- Drag the paper clip button to the newly created group:
- Scroll down to the vertical tabs and add more file extensions to the Allowed file extensions (by default only txt):
- Click Save configuration.
Step #3. Adding a File Link to the Content
- Click Content > Add content > Basic page
- Make sure the text format is set to Full HTML, otherwise you will not be able to see the paper clip button
- Add some dummy text and click the paper clip button
- Click the Select/Browse File button and upload a file:
- After uploading the file click Save:
The link to the file will be shown in blue.
- Click Save in order to save the node:
Now you have a link to the file inserted into your content and you didn’t have to create an extra field for that. The link will open the file in the browser or it will download the file to your computer.
Thanks for reading!