Using The New Redactor Editor

Beginning with version 4.7 of MightyMerchant, HEROweb changed the text editor used in the site manager to a product called Redactor. We believe that this new editor offers more flexibility and is all around easier to use than the old editor. As we've continued to make updates our Redactor has become more refined and added new features, for instance we've made it even easier to change the styles used in Redactor to better match the old editor.

In this article we'll look at several features of the new editor so that you can once again edit your own site like a pro. Let's begin by going over the new buttons that are found at the top of the editor. In the old version, most of these features were only available if you clicked the HTML editor link below the text box, but now they are easier and quicker to find and use.

The HTML Button.

This button allows you to view the HTML version of the text. If you know HTML code and want to add code directly to the text you'll use this button. If you don't know any HTML code, don't worry about it! Almost anything you need to do can be accomplished with one of the other buttons.

The Formatting Button.

This button is similar to the styles drop down menu in the old editor. If you click the button, a drop down menu of different text styles appears which you can use to change the look of your text.

The Font Buttons

These are not unlike what you might find in a word processor like Microsoft Word. These give the options to bold, Italicize, or strikethrough.

The List Buttons,

The list buttons allow you to: create unorganized lists, create ordered list, as well as indent and outdent, which in addition to operating much like the tab key on your keyboard, can also turn lists into outlines.

The Insert Buttons

These allow you to insert images, videos, files, tables, and links. These may seem very similar to the old editor but they are easier to access and give you many more features. For example it is much easier to size and move around images. 

The Font Color Buttons

The font color buttons allow you to change the color of your font, and also the background color (similar to the highlighter feature on many word processors).

The Alignment Button

The alignment button allows to switch the side of the page that your text is aligned with.

The Style Buttons.

These buttons help to organize your page and keep with your websites theme. They include a horizontal rule button, which adds a horizontal line to help organize and break up text, as well as a styles button which we can program to include custom fonts and colors that match the look of your website.

Tips & Tricks

 In addition to the buttons, here are a couple of extra short cuts to help you with the new editor

• You can copy any text to add to the editor without any of the formatting by pressing the shift key when you paste (ctrl/cmd + shift + v)
• Hitting return on your keyboard defaults to a double spaced line in the editor, if you want to just use a single spaced line, press (shift + enter/return)
• To make an image into a link, first insert the image, then click on the edit box that appears over the image in the editor. A pop up should appear with the link field in it.
•  To make a link to a document like a pdf, click the paper clip in the insert buttons, add the text you want to use as the link and upload the file.