Css

css #

You can run Redactor in iframe mode. In this case, all content and its styles will be isolated from the styles of the page on which Redactor is running. This allows, for example, to edit the content of frontend frameworks as it is. You can see this in the examples:

• Bootstrap content
• Bootstrap components
• Bootstrap grid
• Tailwind typography
• Tailwind layouts

Or take a look at these examples of articles made with Redactor. It's impressive.

To run Redactor in iframe mode you need to specify the css setting, where you specify the path to the editor files on your server:

Redactor('#entry', {
    css: '/your-dist-path/'
});

Redactor will automatically connect the redactor.min.css file at the specified path in the editable iframe. This will provide the content with default styles and technical styles for the editor to work in iframe mode.

In this way, the editor will connect the file that is located at the specified path:

<link href="/your-dist-path/redactor.min.css" rel="stylesheet">

cssFile #

By default, the editor connects the redactor.min.css file for content styles and other editor styles. Sometimes you may need to change this if, for example, the editor styles file is included in your project build.

Redactor('#entry', {
    css: '/your-dist-path/',
    cssFile: 'myproject.min.css'
});

The cssFile setting sets the name of the style file that will be connected by default. And as a result, a file with this path will be connected in the iframe:

<link href="/your-dist-path/myproject.min.css" rel="stylesheet">

custom.css #

You can customize the styles inside iframe so that the content looks exactly as it should be on your website or in your application.

To do this, use the custom setting and in it, in the form of an array, you can specify the connection of those CSS styles that you need.

Redactor('#entry', {
    css: '/your-dist-path/',
    custom: {
        css: [
            'https://fonts.googleapis.com...',
            '/mystyle/my-content.css',
        ]
    }
});

As you can see in the example above, you can connect both local styles and those styles that are remotely located to the iframe. For example, font styles or framework styles using CDN.

As a result, these styles will be connected inside the iframe:

<link rel="stylesheet" href="/your-dist-path/redactor.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com...">
<link rel="stylesheet" href="/mystyle/my-content.css">

The editor always sets its content styles by default. If you want the content to display only in the styles you set in custom.css, you can specify a classname setting such as 'content'. Then the editor will not connect its own styles and the content will be displayed exactly as specified in your styles.

Redactor('#entry', {
    css: '/your-dist-path/',
    classname: 'content',
    custom: {
        css: [
            'https://fonts.googleapis.com...',
            '/mystyle/my-content.css',
        ]
    }
});

The classname setting sets the value of the class attribute for the editable layer within the iframe. It may contain several classes:

Redactor('#entry', {
    css: '/your-dist-path/',
    classname: 'prose prose-slate mx-auto',
    custom: {
        css: [
            '/path-to/tailwind-typography.css',
        ]
    }
});

Overriding the classname setting always makes it so that the default content styles will be turned off and only the styles you specify with custom.css will be used.

plugin css #

Sometimes a plugin you create may require a special display of your content when editing. You can do this in the same way as with styles to connect this plugin file:

Redactor('#entry', {
    plugins: ['myplugin']
    css: '/your-dist-path/',
    classname: 'content',
    custom: {
        css: [
            '/path-to/my-content.css',
            '/path-to-myplugin/myplugin.css'
        ]
    }
});

custom.js #

The interactive elements of your page can work right when editing content. To do this, you can connect javascript of your page or framework in Redactor:

Redactor('#entry', {
    css: '/your-dist-path/',
    classname: 'content',
    custom: {
        css: ['/path-to/my-content.css'],
        js: ['/path-to/my-file.js']
    }
});

The js file will be connected before body tag inside the Redactor frame:

<script src="/path-to/my-file.js"></script>

You can set js file connection attributes for the script tag, for example, if it is a js module:

Redactor('#entry', {
    css: '/your-dist-path/',
    classname: 'content',
    custom: {
        js: [{
            src: '/path-to/my-file.js',
            type: 'module'
        }]
    }
});

As a result, the file will be connected inside the frame like this:

<script src="/path-to/my-file.js" type="module"></script>

By default, Redactor connects js files before the body tag. In some cases, it is necessary to include them inside the head tag. To do this, use the head flag:

Redactor('#entry', {
    css: '/your-dist-path/',
    classname: 'content',
    custom: {
        js: [{
            src: '/path-to/js/my-file.js',
            head: true
        }]
    }
});

In this case my-file.js file will be connected inside the head tag of the iframe.

frame lang and dir #

The frame setting allows you to optionally specify the lang and dir attributes for the html iframe tag.

Redactor('#entry', {
    css: '/your-dist-path/',
    classname: 'content',
    frame: {
        lang: 'en',
        dir: 'ltr'
    },
    custom: {
        css: ['/mystyle/my-content.css']
    }
});

Of course, you can specify only one of these settings. For example, only set 'lang'.