Type: Boolean
Default: false
By default, Redactor doesn't receive focus on load, because there may be other input fields on a page. However, to set focus to the editor, you can use this setting:
Redactor('#entry', {
focus: true
});
Type: Boolean
Number
Default: false
Sets the tabindex attribute for the editable area of the editor.
Redactor('#entry', {
tabindex: 2
});
Type: Boolean
Default: false
Enables br tags to be created when enter key is pressed. Also in this case the editor does not surround the text with paragraph tags.
Redactor('#entry', {
breakline: true
});
Type: String
Default: p
Turns on text markup with div tags.
Redactor('#entry', {
markup: 'div'
});
Type: Boolean
Default: false
Enables the ability to launch the editor by clicking on an element.
Redactor('#entry', {
clicktoedit: true
});
Type: Boolean
Default: true
This setting turns off the Command palette call when a slash (/) character is typed.
Redactor('#entry', {
command: false
});
Type: String
Default: auto
Force the editor to run in a dark or light theme.
Redactor('#entry', {
theme: 'dark' // or 'light'
});
Type: String
Default: false
This setting allows you to set an attribute (for html tag) to specify a theme if the editor content is running in an iFrame. For example, for frameworks:
Redactor('#entry', {
themeAttr: 'data-bs-theme'
});
Type: Boolean
Default: false
Starts the editor by default disabled.
Redactor('#entry', {
disabled: true
});
Type: Boolean
, Object
Default: false
Starts the editor by default readonly.
Redactor('#entry', {
readonly: true
});
Sets an object specifying which of the toolbars should not be disabled when readonly.
Redactor('#entry', {
readonly: {
toolbar: true,
extrabar: true,
statusbar: true
}
});
Type: String
Default: rx-content
Sets the class with the content styles.
Redactor('#entry', {
classname: 'my-content'
});
Type: String
, Boolean
Default: false
Sets the element selector where the editor will output content from the editable area, for any change in the content.
<div id="output"></div>
Redactor('#entry', {
output: '#output'
});
Type: Boolean
Default: true
This setting allows you to turn off drag or drop images or any other elements in Redactor.
Redactor('#entry', {
drop: false
});
Type: Boolean
Default: true
By default, Redactor synchronizes the visual layer with the textarea in which it creates the output html each time the content is changed. This can be turned off to improve performance.
Redactor('#entry', {
sync: false
});
Type: String
Default: top
This setting defines where content will be inserted if there is no focus in Redactor. There are two options: top - at the beginning of the editor, bottom - at the end of the editor content.
Redactor('#entry', {
addPosition: 'bottom'
});
Type: String
Default: en
By default, Redactor is set to English language, but you can download (or create) and install your own language file. All you need is to set a language file after Redactor.js
:
<script src="/js/redactor.js"></script>
<script src="/js/es.js"></script>
And then set the lang option like this:
Redactor('#entry', {
lang: 'es'
});
Type: String
, Node
Default: window
If the editor is in the parent layer, which has its own scrolling, regardless of the page scrolling, then you need to specify the ID of this layer in this setting.
Redactor('#entry', {
scrollTarget: '#my-scroll-layer'
});
Type: Boolean
Default: false
Sticky toolbar is made based on the position: sticky
property.
If the editor is run inside an element with the specified overflow
property, the sticky toolbar will not work.
So you can enable this setting to keep the toolbar sticky, but using position: fixed
.
Redactor('#entry', {
scrollOverflow: true
});
Type: String
Default: ltr
Redactor supports both right-to-left and left-to-right text directions. By default, the editor is set to work with left-to-right, to set it to right-to-left, use direction setting:
Redactor('#entry', {
dir: 'rtl'
});
Type: Boolean
Default: true
This setting allows to turn off a browser spell checking for Redactor.
Redactor('#entry', {
spellcheck: false
});
Type: Boolean
Default: false
This option allows to turn on Grammarly spell check for Redactor.
Redactor('#entry', {
grammarly: true
});
Type: Boolean
Default: false
This option allows to disable Google Translate to translate content of Redactor.
Redactor('#entry', {
notranslate: true
});
Type: String
Default: 100px
This setting allows to set minimum height for the editor.
Redactor('#entry', {
minHeight: '300px'
});
Type: Boolean
, String
Default: false
This setting allows to set maximum height for Redactor.
Redactor('#entry', {
maxHeight: '800px'
});
Type: Boolean
Default: true
This setting disables pressing enter key.
Redactor('#entry', {
enterKey: false
});
Type: Boolean
Default: true
This setting disables adding a timestamp to all Ajax requests to the editor. It is used to prevent the requested file from being cached by the browser.
Redactor('#entry', {
reloadmarker: false
});
Type: Boolean
Default: false
This setting is set to all links https protocol created by pasting content.
Redactor('#entry', {
https: true
});
Type: Boolean
Default: false
This setting disables the creation of a container around the area being edited at startup.
Redactor('#entry', {
nocontainer: true
});
Type: Boolean
Default: false
This setting disables the adding of editor styles. Therefore, content styles will be inherited from the page.
Redactor('#entry', {
nostyle: true
});