How to Use the WYSIWYG Editor in Magento 2

Posted by

Magento 2 provides you with useful tools for setting up and controlling the content of the website. In this article, you will get the brief introduction of utilizing the Editor in Magento 2.

When working with the content displayed by the WYSIWYG editor, you can easily open and format it and all you have edited will appear in final published form. However, it is possible for you to change modes if you want to work with the HTML code directly. In the product catalog, you can approach the WYSIWYG editor for the purpose of building content for pages, blocks, or product descriptions by a tap on the WYSIWYG Editor button.


  1. Editing Devices

Except familiar tools like Cut, Copy and Paste, we can see other devices such as Paste as Plain Text or Paste from Word, Find and Replace, Undo/Redo, Citation, Abbreviation, Acronym, Mark as Insertion and Mark as Deletion.

2. Styles and Fonts

The editor also provides Styles, Paragraph, Font Family and Font Size for constructing the content of website.

 3. Character Format.

Formatting characters in the WYSIWYG editor is quite easy with various choices including Bold, Italic, Underline, Strikeout, Subscript, Superscript.

4. Special Characters

Some special options can be added like Insert Symbol, Insert Non-Breaking Space and Insert Page Break in the editor.

5. Color

In terms of Color, the editor can allow you to Select Text Color or Select Background Color.

6. Paragraph Format

To format content paragrapghs, you can choose any among Align Left, Align Center, Align Right, Align Full, Increase Outdent/Indent or Block Quote options.

7. Coding Tools

Coding tools consisting of Removing Formatting and Cleanup Messy Code make you feel more convenient in building contents.

8. Lists

When creating lists in the editor, you can be supported by Inserting and Removing Bulleted (Unordered) List/Numbered (Ordered) List tool.

9. Rules

In terms of rules, Inserting Simple Horizontal Rule and Inserting Formatted Horizontal Rule can be useful selections for users in the WYSIWYG editor.

10. Links and Anchors

With the WYSIWYG editor, you can carry out activities involving Inserting or Editting Link/Anchor, Removing Link.

11. Images and Media

Insert/Edit Image and Insert Media tool help you diversify the content of the website.

12. Tables

About table, the editor allows you to use tools including Inserting/Modifing Table, Table Row Properties, Table Cell Properties, Inserting Row Above, Inserting Row Below, Removing Column, Removing Row, Splitting Merged Table Cells, Merging Table Cells.

13. Layers

In layer field, the editor supports Inserting New Layer, Moving Layer Forward/Backward, Toggling Absolute Positioning.

14. Variables, Attributes and Widgets

In this area, you can easily Insert or Edit Attributes as well as Add Variable/Widget.

15. Workspace Preferences

Toggling Fullscreen Mode, Displaying Visual Control Characters (On/Off), Toggling Guidelines / Invisible Elements, Setting Typing Direction Left-to-Right or Right-to-Left are tools supported in workspace preferences part.

We hope that you have had the brief overview of using the editor in Magento 2. If you need any help, please feel free to contact us.

Leave a Reply

Your email address will not be published. Required fields are marked *