---
title: "WYSIWYG form element"
date: "2017-11-13T08:07:55+00:00"
summary: "Enhance your Site Studio components with the WYSIWYG form element, adding rich text editing capabilities. Learn how to integrate CKEditor, customize text formats, and optimize your content creation workflow."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/wysiwyg-form-element"
id: "8d7f8c12-411c-4b98-a1dc-da635e8a305b"
---

Table of contents will be added

Use the WYSIWYG form element to add WYSIWYG editor (CKEditor) field to your Component form. For more information, see [Create an editable component](/drupal-starter-kits/add-ons/site-studio/create-component "Create an editable component").

Locating the WYSIWYG form element
---------------------------------

To find the WYSIWYG form element:

1.  Navigate to a component
2.  Click the **+ button** on the Component form builder
3.  Within the Fields tab, look for the WYSIWYG form element.

![b6696107-wysiwyg.png](https://acquia.widen.net/content/8b913ec3-e9a3-419e-97e2-1eea45b84f5a/web/b6696107-wysiwyg.png)

The WYSIWYG element includes the following fields:

Title field
-----------

*   Provide a name for the form element. **Important:** This will be displayed in your component form.

Default
-------

*   **Default value -** Set default content for this field
*   **Allow text format** - Sets which text format to use for the editor. Text formats are managed within Configuration > Content authoring > Text formats and editors. Site Studio provides an enhanced Text format called 'Site Studio'. For more information, see [Editing content with CKEditor WYSIWYG](/drupal-starter-kits/add-ons/site-studio/editing-content-wysiwyg "Editing content with CKEditor WYSIWYG").

Tooltip
-------

*   **Tooltip text -** Enter tooltip text here.
*   **Tooltip placement -** Define the position of the tooltip on hover of the field.