Redactor / Documentation / Settings

Special

s3 #

Set to 'false' by default.

This setting allows to setup image and file uploads to Amazon S3 servers. In order to use Amazon S3 exclusively and without uploading images to your server first, you'd need to set imageUpload: true as well as S3 setting.

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

Server script forms all necessary parameters and a URL for Amazon S3 upload, for example:

<?php

$S3_KEY = 'Your Amazon access key';
$S3_SECRET = 'Your Amazon secret key';
$S3_BUCKET = '/your-bucket-name'; // bucket needs / on the front


$S3_URL = 'http://s3.amazonaws.com';

// expiration date of query
$EXPIRE_TIME = (60 * 5); // 5 minutes

$objectName = '/' . urlencode($_GET['name']);

$mimeType = $_GET['type'];
$expires = time() + $EXPIRE_TIME;
$amzHeaders = "x-amz-acl:public-read";
$stringToSign = "PUTnn$mimeTypen$expiresn$amzHeadersn$S3_BUCKET$objectName";

$sig = urlencode(base64_encode(hash_hmac('sha1', $stringToSign, $S3_SECRET, true)));
$url = urlencode("$S3_URL$S3_BUCKET$objectName?AWSAccessKeyId=$S3_KEY&Expires=$expires&Signature=$sig");

echo $url;

?>

tabindex #

This setting sets tab index form value for Redactor.

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

plugins #

This setting allows to launch Redactor with plugins. We've developed some plugins for you, check them out!

$.Redactor.prototype.myplugin = function()
{
    return {
        init: function()
        {
            console.log('Plugin started');
        }
    };
};

$('#redactor').redactor({
    plugins: ['myplugin']
});

script #

Using this setting with false argument, you can restric use of script tag in your HTML. Redactor will automatically and always strip this tag form the code.

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

structure #

This settings introduces visual indicators for HTML tags h1-h6 and div, helping users understand the structure of the document. Here's an example of Structure setting.

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

preClass #

This setting allows to set a predefined class for the pre tag. Example below, will make all code inside of pre tag to be highlighted, and have line numbers.

    $('#redactor').redactor({
        preClass: 'prettyprint linenums'
});

removeComments #

By default set to 'true'. HTML comments are removed by default.

To prevent Redactor from removing HTML comments, set this to 'false'.

$('#content').redactor({
    removeComments: false
});

animation #

This setting makes it easy to turn dropdown animation on and off. Set to true by default.

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

videoContainerClass #

Redactor helps you improve user's content look and feel by enabling automatic "video-container" div wrapper around iframe videos. Whenever a video embed gets into Redactor via linkify conversion (automatic conversion or Youtube and Vimeo URLs into video embeds), or via Video plugin, there will be a div with "video-container" class wrapped around the video.

This will not make your videos responsive, unless you add corresponding CSS styles to your site's CSS. Here's what this CSS may look like:

.video-container {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  margin-bottom: 16px;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

keepInlineOnEnter #

By default: false.

This setting keeps the inline tags (with styles) on the next line, when the user presses enter key.

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

stylesClass #

By default: false.

This setting allows to add your own CSS class to the editor layer.

$('#redactor').redactor({
    stylesClass: 'my-own-class'
});

replaceTags #

By default, the following is set to happen: 'b', 'i', and 'strike' tags are replaced by 'strong', 'em', and 'del' tags respectively:

{
    'b': 'strong',
    'i': 'em',
    'strike': 'del'
}

To prevent this completely, just set replaceTags: false.

$('#content').redactor({
    replaceTags: false
});    

This setting is customizable. You could have your set of tag replacement rules, for instance:

replaceTags:  {
    'strong': 'mark',
    'i': 'em',
    'p': 'div'
}

This setting works with all tags, which are allowed in Redactor.

spellcheck #

This setting allows to turn off a browser spell checking for Redactor.

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

overrideStyles #

By default: true.

If you turn off the setting: "overrideStyles: false", Redactor will not apply its own styles (from redactor.css file) to the content. The content will be displayed with the style of the website.

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

removeNewlines #

By default: false.

This setting removes new lines in the editor source code.

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

scrollTarget #

By default: document.

This setting sets the parent element when the editor is inside a scrollable layer.

$('#redactor').redactor({
    scrollTarget: '#my-scrollable-layer'
});