Settings

air

Default setting is false

You can turn on an air-mode (see live example):

$('#redactor').redactor({
    air: true
});
airButtons

Default setting is array

['formatting', 'bold', 'italic', 'deleted', 'unorderedlist', 'orderedlist', 'outdent', 'indent']

You can set up a custom buttons for air-mode:

$('#redactor').redactor({
    airButtons: ['formatting', 'bold', 'italic', 'deleted']
});
allowedTags

Default setting is false.

This setting determines what tags are allowed in Redactor. Every tag not listed here will be removed from the markup.

Set an array of tags:

$('#redactor').redactor({
    allowedTags: ['p', 'h1', 'h2', 'pre']
});

If you are not in a linebreaks mode and there's no 'p' in allowed tags array, 'p' tag will be added automatically to allowed tags.

You cannot set both allowed tags and denied tags at the same time. These settings are mutually exclusive.

autoresize

Default setting is true.

This option turns on height autoresizing, which depends on the amount of text inputted into the text layer.

$('#redactor').redactor({ autoresize: false });
autosave

Default setting is false

If you set a path to the handler file, Redactor automatically sends the code at default intervals. Autosave will send variable $_POST['textareaname'].

$('#redactor').redactor({ autosave: '/save.php' });
autosaveCallback

Default setting is false

$('#redactor').redactor({
    autosave: '/save.php',
    autosaveCallback: function(data) { alert(data); }
});
autosaveInterval

Default setting is 60

Autosave interval (in seconds).

$('#redactor').redactor({
    autosave: '/save.php',
    autosaveInterval: 30 // seconds
});
boldTag

Default setting is strong.

This setting allows choosing the way of formatting bold text: with "strong" or "b".

$('#redactor').redactor({
    boldTag: 'b'
});
buttons

By default, this setting contains the following array of toolbar's buttons:

['html', 'formatting',  'bold', 'italic', 'deleted', 
'unorderedlist', 'orderedlist', 'outdent', 'indent', 
'image', 'video', 'file', 'table', 'link', 'alignment', 'horizontalrule']

// additional buttons
// 'underline', 'alignleft', 'aligncenter', 'alignright', 'justify'

If you wish to set your own array, set it in this option:

$('#redactor').redactor({
    buttons: ['html', 'formatting', 'bold', 'italic']
});
buttonsHideOnMobile

Default setting is empty array

With this option, you can specify which buttons of the toolbar can be hidden on mobile devices.

$('#redactor').redactor({
    buttonsHideOnMobile: ['image', 'video']
});
buttonSource

Default setting is true.

Show/hide the HTML source button on the toolbar.

$('#redactor').redactor({ buttonSource: false });
cleanFontTag

Default setting is true

Removes font tags in pasted text when true and leave when 'false'.

$('#redactor').redactor({ cleanFontTag: false });
cleanSpaces

Default setting is true

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

$('#redactor').redactor({ cleanSpaces: false });
cleanup

Default setting is true.

Turns on/off a text's cleanup on paste.

$('#redactor').redactor({ cleanup: false });
clipboardUploadUrl

This setting allows to paste images from clipboard and upload them to the server. It works in latest Chrome, Firefox and Opera (Webkit).

Default setting is true, to turn off, set clipboardUpload: false.

To perform pasted images uploads, set the following:

$('#redactor').redactor({
	clipboardUploadUrl: '/your_clipboard_upload_script/'
});

Callback on image paste is the same as on usual image upload — imageUploadCallback

convertDivs

Default setting is true

With this option turned on, Redactor will automatically replace divs to paragraphs.

$('#redactor').redactor({ convertDivs: false });
convertImageLinks convertLinks convertVideoLinks css

Default setting is false

Load custom styles with iframe (see example) or fullpage:

$('#redactor').redactor({
    iframe: true,
    css: 'http://site.com/your_stylesheet_file.css'
});

or

$('#redactor').redactor({
    iframe: true,
    css: '/styles/your_stylesheet_file.css'
});

or many stylesheet

$('#redactor').redactor({
    iframe: true,
    css: ['/styles/your_stylesheet_file.css', 'another_stylesheet_file.css']
});
deniedTags

Default setting is ['html', 'head', 'link', 'body', 'meta', 'script', 'style', 'applet'].

This setting determines what tags cannot be used in Redactor. Every tag not listed here will be allowed in the markup.

Set an array of tags:

$('#redactor').redactor({
    deniedTags: ['blockquote', 'div']
});

If you are not in a linebreaks mode and there's 'p' in denied tags array, 'p' tag will be removed automatically from denied tags. You cannot set both allowed tags and denied tags at the same time. This settings are mutually exclusive.

You cannot set both allowed tags and denied tags at the same time. These settings are mutually exclusive.

direction

Default setting is ltr

Sets text direction (see live example).

$('#redactor').redactor({ direction: 'rtl' });
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 setting is true, to turn off, set dragUpload: false.

To upload images, set the following:

$('#redactor').redactor({
    imageUpload: '/your_image_upload_script/
});

Callback on dropped image is the same as on usual image upload — imageUploadCallback

fileUpload

Default setting is false

This option sets a path to the file that is responsible for uploading files. The handler will receive an array $_FILES['file'].

$('#redactor').redactor({ fileUpload: '/file_upload.php' });

The handler should return JSON, for example:

$array = array(
    'filelink' => '/files/'.$_FILES['file']['name'],
    'filename' => $_FILES['file']['name']
);

echo stripslashes(json_encode($array));

JSON example:

{ "filelink": "/files/file.doc", "filename": "Filename" }

fileUploadCallback

Default setting is false

$('#redactor').redactor({
    fileUpload: '/file_upload.php',
    fileUploadCallback: function(link, json) { … }
});
fileUploadErrorCallback

Default setting is false

Please see example.

$('#redactor').redactor({
    fileUpload: '/file_upload.php',
    fileUploadErrorCallback: function(json) { … }
});
focus

Default setting is false.

This option allows you to set whether Redactor gets cursor focus on load or not.

$('#redactor').redactor({ focus: true });
formattingPre

Default setting is false.

This setting allows formatting inside of 'pre' tag (e.g., bold, italicized, etc).

$('#redactor').redactor({
    formattingPre: true
});
formattingTags

Default setting is ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4'].

Set up formatting drop down list.

$('#redactor').redactor({
    formattingTags: ['h1', 'h2']
});
fullpage

Default setting is false.

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

$('#redactor').redactor({
    fullpage: true
});
iframe

Default setting is false

Option to run the editor iframe with custom styles (see example):

$('#redactor').redactor({ iframe: false });
imageFloatMargin

Default setting is 10px.

Custom margin for images setting.

$('#redactor').redactor({
    imageFloatMargin: '30px'
});
imageGetJson

Default setting is false

A path to json file, which stores data about files that have already been uploaded.

$('#redactor').redactor({ imageGetJson: '/images.json' });

json file example:

[
    { "thumb": "/img/1m.jpg", "image": "/img/1.jpg", "title": "Image 1", "folder": "Folder 1" },
    { "thumb": "/img/2m.jpg", "image": "/img/2.jpg", "title": "Image 2", "folder": "Folder 1" },
    { "thumb": "/img/3m.jpg", "image": "/img/3.jpg", "title": "Image 3", "folder": "Folder 1" },
    { "thumb": "/img/4m.jpg", "image": "/img/4.jpg", "title": "Image 4", "folder": "Folder 2" },
    { "thumb": "/img/5m.jpg", "image": "/img/5.jpg", "title": "Image 5", "folder": "Folder 2" }
]

* title and folder are optional


imageTabLink imageUpload

Default setting is false

This option sets a path to the file that is responsible for uploading images. The handler will receive an array $_FILES['file'].

$('#redactor').redactor({ imageUpload: '/image_upload.php' });

The handler should return JSON, for example:

$array = array(
    'filelink' => '/tmp/images/'.$file
);

echo stripslashes(json_encode($array));

JSON example:

{ "filelink": "/images/img.jpg" }

imageUploadCallback

Default setting is false

$('#redactor').redactor({
    imageUpload: '/image_upload.php',
    imageUploadCallback: function(image, json) { … }
});
imageUploadErrorCallback

Default setting is false

Please see example.

$('#redactor').redactor({
    imageUpload: '/image_upload.php',
    imageUploadErrorCallback: function(json) { … }
});
imageUploadParam and fileUploadParam

Default setting is 'file'.

Allow to change variable's name that Redactor receives upon image/file upload.

$('#redactor').redactor({
    imageUploadParam: 'anotherfilename'
});
$('#redactor').redactor({
    fileUploadParam: 'anotherfilename'
});
italicTag

Default setting is em.

This setting allows choosing the way of formatting italicized text: with "em" or "i".

$('#redactor').redactor({
    italicTag: 'i'
});
lang

Default setting is 'en'.

First you must download your language.

To setup a new language in Redactor you should do two things:

  • Connect the language file.
  • Call Redactor using the new language option.

For example (or see live example):

<script src="redactor/langs/es.js"></script>
<script type="text/javascript">
$(document).ready(
    function()
    {
        $('#redactor').redactor({ lang: 'es' });
    }
);
</script>
linebreaks

Default setting is false.

In linebreaks mode, Redactor will markup text with "br" tag. Otherwise, Redactor will markup text with paragraphs.

$('#redactor').redactor({
    linebreaks: true
});
linkNofollow

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

Default setting is false, to turn on, set the following:

$('#redactor').redactor({
    linkNofollow: true
});
linkProtocol

Default setting is http://

This setting adds a protocol to the links.

$('#redactor').redactor({
    linkProtocol: 'https://'
});

You can turn off adding a protocol.

$('#redactor').redactor({
    linkProtocol: false
});
linkSize

Default setting is 50.

Allows to set link truncation length or to switch it off completely.

$('#redactor').redactor({
    linkSize: 100
});
maxHeight

Default setting is false

$('#redactor').redactor({ maxHeight: 300 // pixels });
minHeight

Default setting is false

$('#redactor').redactor({ minHeight: 200 // pixels });
mobile

Default setting is true

This setting turns on/off the editor for mobile.

$('#redactor').redactor({
    mobile: false
});
modalOverlay

Default setting is true

Turns on and off overlay for modal Redactor's windows.

$('#redactor').redactor({ modalOverlay: false });
observeImages

Default setting is true

Enable or disable by clicking on the image to display a modal window image settings.

$('#redactor').redactor({
    observeImages: false
});
observeLinks paragraphy

Default setting is true

Turns on/off formatting to paragraphs.

$('#redactor').redactor({ paragraphy: false });
pastePlainText

This setting allows users to have all html tags stripped from the pasted text. Generally it is "paste as plain text" feature.

Default setting is false, to turn on, set the following:

$('#redactor').redactor({
    pastePlainText: true
});
phpTags

Default setting is false.

This setting allows php tags in source code.

$('#redactor').redactor({
    phpTags: true
});
placeholder

Default setting is false.

Allows to set a placeholder. A text for the placeholder will be taken from a placeholder attribute, or you may set any text:

Text from a placeholder attribute:

$('#redactor').redactor({
    placeholder: true
});

Text set directly:

$('#redactor').redactor({
    placeholder: 'Add comment...'
});
predefinedLinks removeEmptyTags

Default setting is true.

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

$('#redactor').redactor({
    removeEmptyTags: false
});
s3

Default setting is false.

This setting turns on Amazon S3 uploads. You must pass a link to your server-side upload script which performs encryption of upload data to this setting. See this example.

$('#redactor').redactor({
    s3: 'your_server_side_script.php' // you can use any server-side language, not only PHP
});
shortcuts

Default setting is true

Turns on/off keydown / keyup shortcuts functionality.

$('#redactor').redactor({ shortcuts: false });
shortcutsAdd

This setting add your custom shortcuts to Redactor. For example:

$('#redactor').redactor({
	shortcutsAdd: {
		'ctrl+t, meta+t': "this.formatQuote()",
		'ctrl+shift+0': "this.execCommand('formatBlocks', 'p')"
	}
});
tabFocus

Default setting is true.

This setting turns on focus switching to another field, turning off Tab key inside Redactor. Also, if Redactor has no text in it, Tab key will switch focus to the next field.

$('#redactor').redactor({
    tabFocus: false
});
tabindex

Default setting is false

$('#redactor').redactor({ tabindex: 2 });
tabSpaces

Default setting is false.

See the example.

Space instead of margins for Chinese language:

$('#redactor').redactor({
    tabSpaces: true
});

or number of spaces:

$('#redactor').redactor({
    tabSpaces: 4
});
tidyHtml

Default setting is true.

Allows to turn off nice output code formatting:

$('#redactor').redactor({
    tidyHtml: false
});
toolbar

Default setting is 'object'

If you want to turn a toolbar off set the toolbar option to false:

$('#redactor').redactor({ toolbar: false });
toolbarExternal

Default setting is false

If you want the toolbar is loaded in a separate layer from the editor, call setup (see example):

$('#redactor').redactor({
    toolbarExternal: '#your-toolbar-id'
});
toolbarFixed

Default setting is false.

If this option is turned on, Redactor's toolbar will remain at the top of the browser's window at all times.

$('#redactor').redactor({ toolbarFixed: true });
toolbarFixedBox

Default setting is false.

This option makes a fixed toolbar to the width of the editor.

$('#redactor').redactor({ fixed: true, toolbarFixedBox: true });
toolbarFixedTarget

This setting allows to set target for fixedToolbar in case Redactor is launching from a layer with its own scrollbar. As a result, toolbar position will always depend on layer's scrollbar position, and not document's scrollbar position.

Default setting is document. To set to the layer positioning, set this:

$('#redactor').redactor({
    toolbarFixed: true,
    toolbarFixedTarget: '#your-target-id'
});
toolbarFixedTopOffset

Default setting is 0.

This option setup css top property of a fixed toolbar (in pixels).

$('#redactor').redactor({ fixed: true, toolbarFixedTopOffset: 50 });
toolbarOverflow

Default setting is false

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

$('#redactor').redactor({
    toolbarOverflow: true
});
uploadFields

Default setting is false

You can set up an hidden fields for upload (see live example).

The field value for "field1" will be taken from input by ID selector:

$('#redactor').redactor({
    uploadFields: {
    	'field1': '#field1'
    }
});

The field "field2" will automatically generated with value "12345".

$('#redactor').redactor({
    uploadFields: {
    	'field2': '12345'
    }
});

In the upload script you can take them from POST data.

visual

Default setting is true.

This setting allows you to launch the editor in code view or visual mode by default.

$('#redactor').redactor({
    visual: false // the editor starts in code view
});
wym

Default setting is false

Turns on a visual structure mode (see live example):

$('#redactor').redactor({
    wym: true
});
xhtml

Default setting is false.

This setting making code produced by Redactor more XHTML-compatible.

$('#redactor').redactor({
    xhtml: true
});