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.

#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