# Varbase Editor

Integrates a rich editor into [Varbase](https://www.drupal.org/project/varbase) distribution.

## Varbase Editor Module

{% hint style="info" %}
Varbase editor features are bundled through the **Varbase Editor** module.\
GitHub: <https://github.com/Vardot/varbase_editor>\
Drupal.org: <https://www.drupal.org/project/varbase_editor>&#x20;

After building a project using the `varbase-project` template, you can see the code of the **Varbase Editor** module in:
{% endhint %}

```
project_directory
|-- docroot
    |-- modules
        |-- contrib
            |-- varbase_editor
```

Brings in the following core and contributed modules to your site:

| Module                                                                                 | Purpose                                                                                                                    |
| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>Node</strong></p><p><em>(in Drupal core)</em></p>                           | Allows content to be submitted to the site and displayed on pages.                                                         |
| <p><strong>Text Editor</strong></p><p><em>(in Drupal core)</em></p>                    | Provides a means to associate text formats with text editor libraries such as WYSIWYGs or toolbars.                        |
| <p><strong>CKEditor</strong></p><p><em>(in Drupal core)</em></p>                       | WYSIWYG editing for rich text fields using CKEditor.                                                                       |
| <p><strong>Filter</strong></p><p><em>(in Drupal core)</em></p>                         | Filters content in preparation for display.                                                                                |
| [**Ace Code Editor**](https://www.drupal.org/project/ace_editor)                       | Provides integration with [Ace code editor](https://ace.c9.io/).                                                           |
| [**CKEditor BiDi Buttons**](https://www.drupal.org/project/ckeditor_bidi)              | Enables CKEditor 2 bi directional Buttons. One for Right To Left text direction (RTL) and another for Left To Right (LTR). |
| [**CKEditor Media Embed Plugin**](https://www.drupal.org/project/ckeditor_media_embed) | Adds the Media Embed CKEditor plugins to Drupal.                                                                           |
| [**Entity Embed**](https://www.drupal.org/project/entity_embed)                        | Allows entities to be embedded using a text editor.                                                                        |
| [**Image Resize Filter**](https://www.drupal.org/project/image_resize_filter)          | Resizes images based on width and height attributes and optionally link to the original image.                             |
| [**External Links**](https://www.drupal.org/project/extlink)                           | Modify behavior and appearance of external links.                                                                          |
| [**Linkit**](https://www.drupal.org/project/linkit)                                    | Provides an easy interface for internal and external linking with wysiwyg editors.                                         |
| [**Editor Advanced link**](https://www.drupal.org/project/editor_advanced_link)        | Add title, target etc. attributes to Text Editor''s link dialog if the text format allows them.                            |
| [**CKEditor Anchor Link**](https://www.drupal.org/project/anchor_link)                 | This plugin module adds the better link dialog and anchor related features to CKEditor in Drupal 8/9                       |
| [**Pathologic**](https://www.drupal.org/project/pathologic)                            | Helps avoid broken links and incorrect paths in content.                                                                   |
| [**Token**](https://www.drupal.org/project/token)                                      | Provides a user interface for the Token API and some missing core tokens.                                                  |
| [**Token Filter**](https://www.drupal.org/project/token_filter)                        | Allows token values to be used as filters.                                                                                 |
| [**CKEditor Paste Filter**](https://www.drupal.org/project/ckeditor_paste_filter)      | This module implements extra filtering of text pasted from Word.                                                           |

## Features

* Full media integration with CKEditor including captions and much more like the CKEditor paste filter which provides extra filtering for text pasted from word.
* LinkIt Integration for easy internal linking of content.
* Image enhancements and optimizations.
* Embeddable media and entities.
* Path fixing when uploading images or linking to content with absolute URLs directing to staging or development environments.
* Code Editor for Web Admins.

## List of Text Formats

### Rich editor

![Rich Editor](https://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-MePdFET1W7_kQRVQfBI%2F-MePedleazkKc-gCI096%2Fvarbase-editor--rich-editor.png?alt=media\&token=492f9709-cdee-479d-9008-8b39acfb74d4)

### Simple editor

![](https://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-MePdFET1W7_kQRVQfBI%2F-MePfH77ziPXqF6oDQTt%2Fvarbase-editor--sample-editor.png?alt=media\&token=28ec93e7-8f20-4a83-82cb-112e6ff9017a)

####

### HTML code

![](https://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-MePdFET1W7_kQRVQfBI%2F-MePfzM26SqgO-h2Dz2t%2Fvarbase_editor-text-format--code_html.png?alt=media\&token=d14d05fe-a6e3-4cba-92c4-38e48e4cc3f0)

## CKEditor Paste Filter in Action

The CKEditor paste filter module provides extra filtering for text pasted from word or general text preprocessor applications, Text pasted with formatting will be processed to be displayed with no formatting to it.

The following image shows how a pasted formatted text will look like on the site without using the CKEditor paste filter.

![Pasted Formatted Text Without CKEditor Paste Filter](https://1741922406-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu42G9phGWi3WksRxVOC1%2Fuploads%2FYuaKVlUdlIymUwDYkQ2L%2FTest%20Landing%20page%20\(Layout%20Builder\)%20_%20dev%20VLBautomation%20\(2\).png?alt=media\&token=c5ff6a8c-de81-45b6-9fe7-f68401d708d9)

The following image will show how the text will be displayed when using CKEditor paste filter.

![Pasted Formatted Text When Using CKEditor paste filter](https://1741922406-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu42G9phGWi3WksRxVOC1%2Fuploads%2FPQteC6QAFg75qJpsNoZP%2Fpaste%20filter%20_%20dev%20pathauto%20\(2\).png?alt=media\&token=f5d31193-b0ad-4dbb-a3e8-83d314ad16ef)
