Redactor Redactor 2.x Configuration

With 150 or so settings, there is a lot you can configure with Redactor. On this page you will find a complete list of all these settings, what they do and links to additional relevant documentation where applicable.

All of these settings are created automatically when installing Redactor. They can also be added manually to Users, User Groups or Contexts to override their values for specific users or contexts. To do that, add a new setting with the mentioned key (including the redactor. prefix!) and the desired value.

Table of Contents

Configuration: Advanced

Additional Plugins (redactor.additionalPlugins)

Define as a comma separated list of “pluginname:pluginfile” to load additional Redactor plugins.

Advanced Attributes (redactor.advAttrib) (tv)

If enabled attributes such as class, id, and title will be available when editing links and images.

Default:false

Clean File Names (redactor.cleanFileNames)

When enabled, special characters will be removed from files on upload.

Default:true

Counter Words per Minute (redactor.counterWPM)

Words per minute used by counter plugin to estimate reading time.

Default:275

Formatting Add (redactor.formattingAdd)

This setting allows to select tags and styles for the formatting dropdown. formattingAdd can only be applied to p, pre, blockquote and header tags. Each formatting tag gets a CSS class that allows to customize style of each element. See more.

Fullpage (redactor.fullpage) (tv)

Allows editing of a complete HTML-page (including html, head, body and other tags) in iframe and fullpage mode.

Link Protocol (redactor.linkProtocol) (tv)

The protocol (http://, https:// or leave empty) to build links with.

Sanitize Pattern (redactor.sanitizePattern)

A RegEx pattern applied when sanitizing names of uploaded files.

Sanitize Replace (redactor.sanitizeReplace)

The replacement character used when sanitizing names of uploaded files.

Default:_

Speech Pitch (redactor.speechPitch)

Pitch at which voice should be spoken by Speek Plugin when reading aloud.

Default:1

Speech Rate (redactor.speechRate)

Rate at which voice should be spoken by Speek Plugin when reading aloud.

Default:1

Speech Voice (redactor.speechVoice)

Voice to be used by Speek Plugin when reading aloud.

Speech Volume (redactor.speechVolume)

Volume to be used by Speek Plugin when reading aloud.

Stylesheet (redactor.css)

Put in a full URL to a CSS file to use your own styling for formatting.

Text Expander (redactor.textexpander)

Enter a short snippet of text or a word and this plugin will replace it to a frequently used predefined text. For example, enter “addrr” to have it replaced with your mailing address.

Configuration: Editor

Add Shortcuts (redactor.shortcutsAdd)

This setting add your custom shortcuts to Redactor. See more.

Anchor Links (redactor.linkAnchor)

When enabled, the insert link modal will include a tab for inserting links to anchors.

Default:false

Autoresize (redactor.autoresize) (tv)

When enabled, the editor will automatically grow as big as needed to show all the text without having any scroll.

Default:true

CodeMirror (redactor.codemirror) (tv)

If set to ‘true’, CodeMirror will be used for syntax highlighting in source mode, regardless of plugin_syntax setting.

Default:true

Enter Key (redactor.enterKey)

This setting allows to prevent use of Return key.

Default:true

Focus (redactor.focus)

By default, Redactor doesn’t receive focus on load, because there may be other input fields on a page. However, to set focus to Redactor, you can use this setting.

Default:false

Focus End (redactor.focusEnd)

When enabled sets focus after the last character in Redactor.

Default:false

Image Link (redactor.imageLink)

Turns on the ability to add a link to an image via edit modal window.

Default:true

Image Position (redactor.imagePosition)

This setting allows to set image position (float alignment) in relation to the text.

Default:true

Image Resizable (redactor.imageResizable)

Turns on visual image resizing.

Default:true

Linebreaks (redactor.linebreaks)

This setting turns on markup with line breaks instead of paragraphs when user presses Return key.

Default:false

Link No Follow (redactor.linkNoFollow)

This setting will add nofollow attribute to the links added via Redactor.

Default:false

Link to Email (redactor.linkEmail)

When enabled, the insert link modal will include a tab for inserting mailto: links.

Default:true

Link Size (redactor.linkSize)

Maximum number of characters when displaying a URL.

Default:50

Link to Resource (redactor.linkResource)

When enabled, the resource link modal will include a tab for inserting links to other MODX Resources.

Default:true

Link Tooltip (redactor.linkTooltip)

Set to true to allow follow/edit links by putting cursor to the link right in Redactor.

Default:true

Load Introtext (redactor.loadIntrotext)

When enabled, adds Redactor to the introtext field on the resource.

Default:false

Minimum Height (redactor.minHeight) (tv)

Used together with the Autoresize option, the Min Height configuration lets you set either a minimum (when autoresize is enabled) or fixed (when autoresize is disabled) height for the text area. The height is in pixels and only needs the integer numbers added in the setting.

Default:200

Observe Images (redactor.imageEditable)

When enabled you can click an image to change the alignment and alt/title text.

Default:true

Paste as Plain Text (redactor.pastePlainText)

This setting turns on pasting as plain text. The pasted text will be stripped of any tags, line breaks will be marked with tag. With this set to ‘true’ and ‘enterKey’ set to ‘false’, line breaks will be replaced by spaces.

Default:true

Placeholder (redactor.placeholder)

Optional placeholder text to initially display when no other text is available to display.

Shortcuts (redactor.shortcuts)

This setting add your custom shortcuts to Redactor. See more.

Default:true

Tabifier (redactor.tabifier)

Sets indent for code when using code.toggle or code.get.

Default:true

Tab Index (redactor.tabindex)

The tab index order of the text editing field.

0 ### Predefined Links (redactor.predefinedLinks)

This setting allowing to add a list of predefined links in “Add link” modal. See more.

Scroll Target (redactor.scrollTarget)

This setting allows to set a parent layer when Redactor is placed inside of layer with scrolling. When this is set, scroll will return to correct position when a user pastes some text.

tabSpaces (redactor.tabSpaces)

Set to true to use space instead of margins for Chinese language.

Default:false

Typewriter (redactor.typewriter) (tv)

Stress-free typewriter mode with less clutter.

Default:false

Visual (redactor.visual)

When disabled launches Redactor in code view mode by default.

Default:true

WYM (redactor.wym) (tv)

WYM (“What you mean”, aka Visual Structure) mode is a special mode in which through the use of background colors and indentation, the markup structure is made visible. If you want to train your editors to make clean markup, this is a great option to enable. View an example.

Default:false

Limiter Character Count (redactor.limiter)

Used with the Limiter plugin, this setting controls how many characters are allowed in the editor.

Configuration: Internationalisation

Direction (redactor.direction)

Sets the default text direction. This can be overridden on block level using the textdirection plugin.

Default:ltr

Options:

  • ltr (left-to-right)
  • rtl (right-to-left)

Language (redactor.lang) (tv)

The language to use for Redactor. By default, this will inherit the MODX Manager Language, but can be overridden here.

Default:Manager language

Configuration: Markup

Allowed Attributes (redactor.allowedAttr)

This setting allows to set attributes that will not be removed from the code.

Allowed Tags (redactor.allowedTags)

Either use the Allowed Tags setting, or the Denied Tags setting - not both! When using the Allowed Tags setting, you can whitelist accepted tags in the content - others will be stripped.

Cleanup (redactor.cleanup) (tv)

When enabled, any time text is pasted into the editor it will be parsed and cleaned up to only leave the important markup.

Default:true

Clean Spaces (redactor.cleanSpaces) (tv)

Removes extra space in pasted text when true and leave extra spaces when ‘false’.

Default:true

Clean Styles on Enter (redactor.cleanStyleOnEnter)

When enabled this setting will prevent new paragraph from inheriting styles, classes and attributes form a previous paragraph.

Default:false

Convert Divs (redactor.convertDivs) (tv)

With Convert Divs enabled, Redactor will automatically replace tags with tags.

Default:true

Convert Links (redactor.convertLinks) (tv)

When Convert Links is enabled, Redactor will automatically parse links in the content, and add the proper anchor tags into the markup.

Default:true

Denied Tags (redactor.deniedTags) (tv)

Either use the Allowed Tags setting, or the Denied Tags setting - not both! When using the Denied Tags setting, you can blacklist tags that are not allowed in the markup.

Default:html, head, link, body, meta, script, style, applet

Margin Float Left (redactor.marginFloatLeft)

When positioning images as left or right, Redactor lets you put in a_CSS class_ or margins to prevent the image from colliding with the text floating around it. You can define the margin or CSS class for the left align with this setting. Either provide the margin like the value part of a CSS declaration: 0 10px 10px 0 or provide a class name prefixed with a dot: .imageFloatLeftInContent. If you want multiple classname, only prefix the first with a dot.

Default:0 10px 10px 0

Margin Float Right (redactor.marginFloatRight)

When positioning images as left or right, Redactor lets you put in a_CSS class_ or margins to prevent the image from colliding with the text floating around it. You can define the margin or CSS class for the right align with this setting. Either provide the margin like the value part of a CSS declaration: 0 0 10px 10px or provide a class name prefixed with a dot: .imageFloatRightInContent. If you want multiple classname, only prefix the first with a dot.

Default:0 0 10px 10px

Paragraphize (redactor.paragraphize)

When linebreaks setting is not set, new and pasted text will be processed by a paragraph markup function. All pasted text and all newly entered text will be marked up with paragraphs to preserve proper text formatting.

Pre Spaces (redactor.preSpaces)

This setting allows to set the number of spaces that will be applied when a user presses Tab key inside of preformatted blocks. If set to ‘false’, Tab key will apply tabulation instead of spaces inside of preformatted blocks.

Remove Attributes (redactor.removeAttr)

This setting allows to set attributes that will be removed from the code.

Remove Comments (redactor.removeComments)

If set to ‘true’, all HTML comment will be removed from code.

Remove Data Attributes (redactor.removeDataAttr)

When enabled, Redactor will remove all data attributes in the code.

Remove Empty Tags (redactor.removeEmptyTags)

This setting allows to turn on and off removing of empty tags.

Default:p

Replace Styles (redactor.replaceStyles)

This setting allows to set which span styles will be replaced by tags.See more.

Replace Tags (redactor.replaceTags)

By default, tag will always be replaced with . You can set your own array of tags to be replaced. See more.R

Configuration: Media

Browse Files (redactor.browse_files)

When enabled, allows browsing the filesystem to select uploaded fields.

Default:true

Convert Image Links (redactor.convertImageLinks)

Converts inserted links to images into `` tags on return.

Default:false

Convert Video Links (redactor.convertVideoLinks)

Convert added links to YouTube into an embedded player.

Default:false

Date Files (redactor.date_files)

Enable this setting to have file uploads prefixed with a full timestamp.

Default:false

Date Images (redactor.date_images)

Enable this setting to have image uploads prefixed with a full timestamp.

Default:false

Drag Upload (redactor.dragUpload)

This setting allows users to drag and drop images from their computers into Redactor and upload these images to server. This feature works in all latest browsers, except for IE.

Default:true

Drag Image Upload (redactor.dragImageUpload)

When disabled, turns off the ability to upload files using drag and drop.

Default:true

Dynamic Thumbs (redactor.dynamicThumbs)

When enabled, dynamic thumbnails will be generated for previewing images.

Default:true

Eureka Plugin (redactor.plugin_eureka)

When enabled uses the Eureka media browser to choose images.

Default:true

Eureka Plugin Shiv IE 9 (redactor.plugin_eureka_shivie9)

When enabled includes polyfills to hack IE9 support.

Default:false

Eureka Upload (redactor.eurekaUpload)

When enabled, files can be uploaded to current directory within the Insert Image Choose Tab.

Default:false

File Browse Path (redactor.file_browse_path) (tv)

The path to browse when choosing files, relative to the root of the media source as defined by the Media Source setting, in which files should be available through the insert file modal window.

Default:assets/uploads/

File Media Source (redactor.file_mediasource) (tv)

Choose (or provide the ID of) a Media Source to use for uploading and browsing files. This can be any type of Media Source that implements uploading and browsing of images.

File Upload Path (redactor.file_upload_path)

The path, relative to the root of the media source as defined by the Media Source setting, in which file uploads should be placed. See Managing Media.

Default:assets/uploads/

Image Browse Path (redactor.image_browse_path) (tv)

The path to browse when choosing images, relative to the root of the media source as defined by the Media Source setting, in images which should be browsed through the choose image modal window.

Default:assets/uploads/

Image Media Source (redactor.mediasource) (tv)

Choose (or provide the ID of) a Media Source to use for uploading and browsing images and files. This can be any type of Media Source that implements uploading and browsing of images.

Image Upload Path (redactor.image_upload_path) (tv)

The path, relative to the root of the media source as defined by the Media Source setting, in which image uploads should be placed. See Managing Media.

Default:assets/uploads/

Max Directory Depth (redactor.max_directory_depth)

Maximum Numbers of directories to recursively fetch when browsing media.

Default:5

Parse Parent Path (redactor.parse_parent_path)

When enabled, the parent resource is parsed into placeholders in the upload or browse paths. See Managing Media.

Increment File Names (redactor.increment_file_names)

When enabled, this option will prevent duplicate files getting overwritten by appending a numeric index to the file name.

This option only supports file media sources.

Default:true

Parse Parent Path Height (redactor.parse_parent_path_height)

The height (or depth) to search for a resources’ ultimate parent.

Default:10

Show Dimensions on Resize (showDimensionsOnResize)

When enabled image dimensions will be displayed beneath images as they are resized.

Configuration: Plugins

Breadcrumb Plugin (redactor.plugin_breadcrumb) (tv)

When enabled visually displays a breadcrumb navigation of the DOM node or nodes being edited.

Default:false

Contrast Plugin (redactor.plugin_contrast) (tv)

When enabled hit F5 to invert editor screen contrast.

Default:false

Counter Plugin (redactor.plugin_counter) (tv)

Adds a character counter to the bottom right of the editor.

Default:false

Download Plugin (redactor.plugin_download) (tv)

When enabled adds a toolbar button to download editor code.

Default:false

Eureka Plugin (redactor.plugin_eureka) (tv)

When enabled uses the Eureka media browser to choose images.

Default:true

Font Color Plugin (redactor.plugin_fontcolor) (tv)

Adds the ability to set the text color and/or text background color in the toolbar.

Default:false

Font Family Plugin (redactor.plugin_fontfamily) (tv)

Choose a font family for selected text via the toolbar.

Default:false

Font Size Plugin (redactor.plugin_fontsize) (tv)

Change the font size specified in pixels. Bigger sometimes is better.

Default:false

Limiter (redactor.plugin_limiter) (tv)

Limit the number of characters a user can enter.

Default:false

Listen Plugin (redactor.plugin_speek) (tv)

When enabled and in supported browsers adds a toolbar button which reads editor content aloud.

Default:false

Image Dimensions Plugin (redactor.plugin_imagepx) (tv)

When enabled adds options to set and preview image dimensions in the Image Edit modal window.

Default:false

Norphan Plugin (redactor.plugin_norphan) (tv)

When enabled attempts to prevent orphans by replacing the last space between words of block elements with a non-breaking space.

Default:false

Replacer Plugin (redactor.plugin_replacer) (tv)

When enabled use CTRL+F to trigger a simple Find and Replace tool.

Default:true

Syntax Plugin (redactor.plugin_syntax) (tv)

When enabled adds Ace syntax highlighter to Redactor source mode. If you prefer CodeMirror, enable the redactor.codemirror setting instead.

Default:false

Table Plugin (redactor.plugin_table) (tv)

Insert and format tables with ease.

Default:true

Text Direction Plugin (redactor.plugin_textdirection) (tv)

Easily change the direction of the text in a block element (paragraph, header, blockquote etc.) via the toolbar.

Default:true

Text Expander Plugin (redactor.textexpander) (tv)

Enter a short snippet of text or a word and this plugin will replace it to a frequently used predefined text. For example, enter “addrr” to have it replaced with your mailing address.

Default:false

Uploadcare Plugin (redactor.plugin_uploadcare) (tv)

When enabled adds Uploadcare to the toolbar.

Default:false

Video Plugin (redactor.plugin_video)

Enrich text with embedded video.

Default:true

Zoom Plugin (redactor.plugin_zoom) (tv)

When enabled adds a keyboard shortcut to enlarge and decrease font size in content area. Use CTRL + and CTRL -.

Default:false

Configuration: Resource Typeahead

Include Introtext (redactor.include_introtext)

When enabled, the typeahead will include the introtext for each of the resources, providing you with more information about the resource.

Default:true

Prefetch TTL (redactor.prefetch_ttl)

Used in the Resource search typeahead, the prefetch contains the top level resources that are published and not deleted. This data is preloaded when the typeahead field is instantiated, providing very quick access to important resources that may be requested, however the typeahead will continue to search further down the resource tree when the users start typing. The prefetch TTL is how long (in microseconds) the prefetch data should be considered valid and stored in the users\’ LocalStorage.

Default:3600000

Configuration: Toolbar

Active Buttons (redactor.activeButtons)

This setting allows to set which buttons will become active if the cursor is positioned inside of a respectively formatted text. activeButtons should always be used with activeButtonStates.

Default:deleted, italic, bold, underline, unorderedlist, orderedlist, alignleft, aligncenter, alignright, justify

Active Button States (redactor.activeButtonStates)

This setting allows to set which tags make buttons active. activeButtonStates should always be used with activeButtons.

Default:{ b: 'bold', strong: 'bold', i: 'italic', em: 'italic', del: 'deleted', strike: 'deleted', ul: 'unorderedlist', ol: 'orderedlist', u: 'underline' }

Buttons (redactor.buttons) (tv)

Contains a comma separated list of the buttons to show in the Redactor toolbar.

Default:html, formatting, bold, italic, deleted, unorderedlist, orderedlist, outdent, indent, image, link, alignment, horizontalrule

Clips JSON (redactor.clipsJson) (tv)

If set and a valid JSON String, adds the Redactor Clips plugin to the toolbar.

Hide Buttons (redactor.buttonsHide)

This setting allows certain buttons to be hidden on launch.

Hide Buttons on Mobile (redactor.buttonsHideOnMobile) (tv)

This setting allows certain buttons to be hidden on mobile devices.

Colors (redactor.colors) (tv)

The colors (hexcodes) that are available with the fontcolor and backcolor toolbar buttons.

Default:#ffffff,#000000,#eeece1,#1f497d,#4f81bd,#c0504d,#9bbb59,#8064a2,#4bacc6,#f79646,#ffff00,#f2f2f2,#7f7f7f,#ddd9c3,#c6d9f0,#dbe5f1,#f2dcdb,#ebf1dd,#e5e0ec,#dbeef3,#fdeada,#fff2ca,#d8d8d8,#595959,#c4bd97,#8db3e2,#b8cce4,#e5b9b7,#d7e3bc,#ccc1d9,#b7dde8,#fbd5b5,#ffe694,#bfbfbf,#3f3f3f,#938953,#548dd4,#95b3d7,#d99694,#c3d69b,#b2a2c7,#b7dde8,#fac08f,#f2c314,#a5a5a5,#262626,#494429,#17365d,#366092,#953734,#76923c,#5f497a,#92cddc,#e36c09,#c09100,#7f7f7f,#0c0c0c,#1d1b10,#0f243e,#244061,#632423,#4f6128,#3f3151,#31859b,#974806,#7f6000

Commemorate Rebecca (redactor.commemorateRebecca)

Commemorates Rebecca Meyer by setting the Redactor toolbar to her favorite color the seventh of each June.

Default:false

Formatting Tags (redactor.formattingTags) (tv)

The options you get when clicking the formatting button in the Redactor toolbar. Defaults to: p, blockquote, pre, h1, h2, h3, h4 which are the only currently supported formatting tags.

Default:p,blockquote,pre,h1,h2,h3,h4

Fullscreen Button (redactor.buttonFullScreen) (tv)

When enabled, a fullscreen button will be located in the right of the toolbar.

Default:true

Source Button (redactor.buttonSource) (tv)

This setting adds an HTML code view button to the toolbar.

Default:true

Toolbar Fixed (redactor.toolbarFixed) (tv)

If this option is turned on, Redactor’s toolbar will remain in view at all times, by sticking to the top of the window when scrolling down.

Default:true

Toolbar Overflow (redactor.toolbarOverflow) (tv)

With this option, you can specify a toolbar button to build only one row on mobile devices.

Default:false