Directly Upload and Link Files to the Text Editor Content in Drupal 8

Parent Feed: 

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

type the composer command

No further modules are required.

  • Click Extend
  • Scroll down to the D8 Editor File Upload module and enable it
  • Click Install:

Click Extend

Step #2. - Configure the Text Format

  • Click Configuration > Text formats and editors:

Click Configuration

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:

Click Add group

  • Drag the paper clip button to the newly created group:

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):

add more file extensions to the Allowed file extensions

  • 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:

Click the Select/Browse File button

  • After uploading the file click Save:

Click Save

The link to the file will be shown in blue.

  • Click Save in order to save the node:

Click Save

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.

The link will open the file in the browser

Thanks for reading!

About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web