> For the complete documentation index, see [llms.txt](https://learn.sitecove.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.sitecove.com/how-to-guides/content-management-systems-cms/content-creation-and-management/using-the-wysiwyg-editor-vs.-html-mode.md).

# Using the WYSIWYG Editor vs. HTML Mode

Most Content Management Systems (CMS) provide two main ways to edit content: **WYSIWYG** (What You See Is What You Get) editors and **HTML mode**. Understanding when to use each can help you create and manage content more effectively.\
This guide covers the differences, advantages, and use cases for **WYSIWYG editors** and **HTML mode** in platforms like **WordPress**, **Joomla**, and **Drupal**.

***

#### What is a WYSIWYG Editor?

A **WYSIWYG editor** allows users to create content visually, similar to word processors like Microsoft Word or Google Docs.

**Features of WYSIWYG Editors:**

* **Rich text formatting** (bold, italic, underline, lists).
* **Media embedding** (images, videos, and audio).
* **Drag-and-drop elements** for page layout.
* **Pre-styled templates** and alignment controls.
* **No coding required.**

**Common WYSIWYG Editors:**

* **WordPress**: Classic Editor, Gutenberg Block Editor.
* **Joomla**: TinyMCE, JCE Editor.
* **Drupal**: CKEditor, Froala Editor.

WYSIWYG editors are best for non-technical users who want to create and format content quickly.

***

#### What is HTML Mode?

**HTML mode** allows users to edit raw HTML code for precise customization and advanced formatting.

**Features of HTML Mode:**

* **Full control** over content structure.
* Ability to add **custom styles**, JavaScript, and inline CSS.
* More flexibility for embedding **third-party elements**.
* Prevents formatting issues caused by WYSIWYG auto-corrections.

**Common Use Cases for HTML Mode:**

* Adding **custom classes** and inline styles.
* Embedding **iframes**, forms, or external scripts.
* Creating **custom tables** with advanced styling.
* Troubleshooting **formatting issues** caused by the visual editor.

HTML mode is best for advanced users and developers who need complete control over content formatting.

***

#### WYSIWYG Editor vs. HTML Mode: Key Differences

* **WYSIWYG Editor**: Ideal for quick, visual content creation with minimal technical knowledge.
* **HTML Mode**: Best for users who need advanced customization, embedding custom scripts, or troubleshooting formatting.

If you're new to CMS editing, start with a **WYSIWYG editor** before exploring **HTML mode** for customization.

***

#### How to Use WYSIWYG Editors in Different CMS Platforms

**Using the WordPress Block Editor (Gutenberg)**

1. Go to **Posts > Add New** (or **Pages > Add New**).
2. Click the **+** (Add Block) button to insert content elements.
3. Drag and arrange blocks (text, images, videos, buttons).
4. Use the right panel to adjust text settings, colors, and alignment.
5. Click **Publish** to save changes.

**Using the Joomla WYSIWYG Editor (TinyMCE)**

1. Navigate to **Content > Articles > Add New Article**.
2. Use the formatting toolbar to style text, add images, and create lists.
3. Click **Save & Close** to publish the article.

**Using the Drupal CKEditor**

1. Go to **Content > Add Content** and select an article or page.
2. Use the toolbar to insert media, format text, and create links.
3. Click **Save** to apply changes.

Some WYSIWYG editors allow switching between **visual** and **HTML modes**, giving you the best of both worlds.

***

#### How to Switch to HTML Mode in Different CMS Platforms

**Switching to HTML Mode in WordPress**

1. Open a page or post in the **Classic Editor**.
2. Click the **Text** tab to view and edit the HTML code.
3. Make changes and switch back to the **Visual** tab if needed.
4. Click **Update** to save changes.

**Switching to HTML Mode in Joomla**

1. Open an article in the Joomla editor.
2. Click the **Toggle Editor** button to switch to HTML mode.
3. Edit the raw HTML code as needed.
4. Click **Save & Close**.

**Switching to HTML Mode in Drupal**

1. Edit a page or post in Drupal.
2. Click **Source** in the CKEditor toolbar to switch to HTML mode.
3. Make edits and toggle back to the normal view.
4. Save your changes.

When pasting content into **HTML mode**, clean unnecessary formatting to avoid display issues.

***

#### Best Practices for Using WYSIWYG Editors and HTML Mode

* **Use WYSIWYG Editors for Basic Content Formatting**: Ideal for writing blog posts, creating static pages, and adding images.
* **Switch to HTML Mode for Customization**: Best for embedding videos, adding forms, or modifying CSS styles.
* **Avoid Copy-Pasting from Microsoft Word**: This can introduce unwanted formatting. Instead, paste content into **Notepad** before adding it to the CMS.
* **Test Changes in Both Modes**: Switching between visual and HTML modes can sometimes alter formatting.
* **Use Previews Before Publishing**: Ensure content appears correctly across devices and browsers.

Combine both editing modes by creating content in **WYSIWYG** and refining details in **HTML mode**.

***

#### Summary: When to Use Each Editing Mode

**Use WYSIWYG Editor When:**

* Writing and formatting blog posts.
* Adding images, tables, and basic layouts.
* Creating pages using pre-built templates.

**Use HTML Mode When:**

* Embedding custom scripts (iframes, JavaScript).
* Customizing page styles with inline CSS.
* Troubleshooting formatting issues.

If you're comfortable with basic coding, learning **HTML mode** can significantly enhance your control over web content.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://learn.sitecove.com/how-to-guides/content-management-systems-cms/content-creation-and-management/using-the-wysiwyg-editor-vs.-html-mode.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.