Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

All edits to the width, height, and placement must be made inside the source HTML itself. An example of an offsite image might be an image for a logo that isn’t hosted on your website, or an image that was uploaded on a separate webpage of your website.

Inline Files

...

Uploading Inline Files

  • Available in Text blocks that load the CKEditor

  • Click on the File button in the toolbar. 

    Looks like a paperclip

    When editing content, you should now see the Insert File button in the CKEditor5 toolbar.

  • Use the Insert File button to upload and insert files. You can either select a blank space in Ckeditor5 to designate the file location or you can highlight a piece of text, then select Insert File button to upload and insert files.

  • You will then be prompted to upload a file.

    • Files must be smaller than 15 5 MB

    • Allowed types: pdf doc docx xls xlsx zip csv ppt pptx

  • The Title field is only used for the advisory title of the link to the file

    • Title is not the link text that will be used inside the editor

  • Clicking Save will insert a link to the file inside of the editor

  • The inserted link will use the name of the file as its text by default

    • Editing this link text can be tricky, as Drupal wants to keep a relationship to the file that was uploaded.

    • If you want to change this text, it is recommended that you do so in the HTML source.

  • If you want to use specific text for the file link, highlight the desired link text in the editor you want to link before uploading the file.

    • Then follow the steps above

    • The text you highlighted should now be linked to the file you uploaded

  • Inline files uploaded in this manner are added to the files managed by Drupal

  • Files are uploaded to an /inline-files directory on your website

    • txt.

Note

When uploading an inline file, CKEditor CKEditor5 will add these attributes:
data-entity-type="file"
data-entity-uuid="random_string_of_characters"
filenamehref="filename.extension"

These attributes are how Drupal ‘knows’ if a file should be Temporary or Permanent. Temporary files are removed with an automatic cron job. If you remove these attributes, the image will be marked Temporary and will still be available until Drupal deletes your image with the next cron.

To check if a file is Temporary or Permanent, check for it on the /admin/content/files page.

Info

To remove the file icon that displays next to the file link, remove the css class for the file icon from the class="" attribute.

CKEditor 5 Editor File Upload

...

Insert File

...

.

...

Use the Insert File button to upload and insert files.

...

Replace File

  • When replacing a file, select the text of the file you want to replace, you should now see the File Toolbar where there is a Replace file button.

  • Use the Replace file dialog window to remove Remove, then replace with a new file.

    2024-03-06_13-53-58.pngImage Removed

    You must upload a file.

    replace.pngImage Added

Delete File

  • When deleting a file, select the text of the file you want to delete, you should now see the File Toolbar where there is a Delete file button.

...

  • When the window prompts you to “Are you sure you want to delete this file?“ You can now either click ok Ok to accept or cancel Cancel.