### Complete HTML Page with Redactor Integration
Source: https://imperavi.com/redactor/docs/get-started/quickstart
This example demonstrates a full HTML page structure, showing how to include Redactor's CSS and JavaScript files and initialize the editor on a textarea element. It illustrates the basic setup for a web page using Redactor.
```HTML
Redactor
```
--------------------------------
### Loading Redactor with Plugins
Source: https://imperavi.com/redactor/docs/get-started/quickstart
Illustrates how to enable Redactor plugins by specifying their names in the `plugins` array within the initialization settings. This extends Redactor's functionality, showing examples for single and multiple plugins.
```JavaScript
Redactor('#entry', {
plugins: ['imageresize']
});
```
```JavaScript
Redactor('#entry', {
plugins: ['imageresize', 'emoji']
});
```
--------------------------------
### Importing Redactor as an ES6 Module
Source: https://imperavi.com/redactor/docs/get-started/quickstart
Demonstrates how to import the Redactor editor as an ES6 module, either directly from `redactor.js` or using the UMD version `redactor.usm.min.js`, and then initialize it.
```JavaScript
import '../dist/redactor.js';
Redactor('#entry', { ...opts... });
```
```JavaScript
import Redactor from '../dist/redactor.usm.min.js';
Redactor('#entry', { ...opts... });
```
--------------------------------
### Initializing Redactor with Custom Settings
Source: https://imperavi.com/redactor/docs/get-started/quickstart
Shows how to pass an object of settings to Redactor during initialization to customize its behavior, such as disabling source view, setting initial focus, or configuring image uploads.
```JavaScript
Redactor('#entry', {
source: false,
focus: true,
image: {
upload: '/path-to-image-upload/'
}
});
```
--------------------------------
### Redactor Plugin: Assigning Hotkey in Start Method
Source: https://imperavi.com/redactor/docs/api/hotkeys
Illustrates how to integrate a keyboard shortcut directly into a Redactor plugin's `start` method. This example defines a 'myplugin' that registers 'ctrl+j' or 'meta+j' to call its 'toggle' method, demonstrating a common pattern for plugin hotkey integration.
```JavaScript
Redactor.add('plugin', 'myplugin', {
start() {
this.app.hotkeys.add('ctrl+j, meta+j', {
title: 'Toggle my plugin',
name: 'meta+j',
command: 'myplugin.toggle',
params: { arg: 1 }
});
},
toggle(params, e) {
console.log('Shortcut action with a param ' + params.arg);
}
});
```
--------------------------------
### Vue3 Redactor Single Editor Component Setup
Source: https://imperavi.com/redactor/docs/get-started/vue-setup
This comprehensive example demonstrates how to integrate the Redactor editor as a Vue3 component within a full HTML page. It includes the necessary CSS and JavaScript imports, and defines a Vue component that wraps the Redactor instance. The component handles initialization, destruction, and propagates editor content changes via an 'input' event.
```HTML
Vue Redactor
{{ content }}
```
--------------------------------
### Launch Angular Application using CLI
Source: https://imperavi.com/redactor/docs/get-started/angular-setup
This command-line instruction shows how to start an Angular development server using the Angular CLI. Running `ng serve` compiles the application, watches for file changes, and serves the application on a local development server, typically at `http://localhost:4200`.
```bash
ng serve
```
--------------------------------
### Vue.js Component for Multiple Redactor Editor Instances
Source: https://imperavi.com/redactor/docs/get-started/vue-setup
This comprehensive example illustrates how to create a reusable Vue.js component for the Redactor WYSIWYG editor. It demonstrates initializing multiple editor instances on a single page, passing configuration and initial content via props, and managing the editor's lifecycle (initialization and destruction) within the Vue component's mounted and beforeUnmount hooks. It also shows how to subscribe to editor events like 'editor.change' to handle input.
```HTML
Vue Redactor
```
--------------------------------
### Initialize Redactor in React with basic import
Source: https://imperavi.com/redactor/docs/get-started/react-setup
Demonstrates how to import Redactor and its CSS, then initialize it on a textarea element in a React `main.jsx` file. This is the fundamental setup for using Redactor in a React application.
```javascript
// main.jsx
import React from 'react'
import ReactDOM from 'react-dom';
// import Redactor
import './redactor.min.css';
import Redactor from './redactor.usm.min.js';
// call
let editor = Redactor('#editor');
```
```html
React App
```
--------------------------------
### Initializing Redactor on a Page Element
Source: https://imperavi.com/redactor/docs/get-started/quickstart
Explains how to initialize Redactor on a `textarea` or `div` element by specifying its ID or class. It also shows how to ensure Redactor is called after the DOM content is loaded. The HTML element is provided for context.
```HTML
```
```JavaScript
Redactor('#entry');
```
```JavaScript
document.addEventListener('DOMContentLoaded', function() {
Redactor('#entry');
});
```
--------------------------------
### Setting Initial Focus for Redactor
Source: https://imperavi.com/redactor/docs/get-started/quickstart
Demonstrates how to configure Redactor to automatically set focus on its content area upon initialization using the `focus` setting. Focus can be set to the beginning (`true`) or end (`'end'`) of the content.
```JavaScript
Redactor('#entry', {
focus: true // or use 'end' to set focus to the end of content
});
```
--------------------------------
### Dynamically Import Redactor Component in NextJS
Source: https://imperavi.com/redactor/docs/get-started/nextjs-setup
This example shows how to dynamically import the Redactor component in NextJS, specifically for client-side rendering (`ssr: false`). This approach is crucial for preventing issues related to Redactor's reliance on the `window` object during server-side rendering in NextJS environments.
```JavaScript
// page.js
'use client'
import dynamic from "next/dynamic";
const RedactorJS = dynamic(() => import("../components/RedactorJS"), {
ssr: false,
});
export default () => (
);
```
--------------------------------
### Initialize Redactor after DOM Content Loaded
Source: https://imperavi.com/redactor/docs/get-started/quickstart
This JavaScript snippet shows how to initialize the Redactor editor after the DOM content has been fully loaded. This approach ensures that the target element (#entry) is available in the DOM before Redactor attempts to attach to it, preventing potential errors when scripts are included in the head tag.
```JavaScript
document.addEventListener('DOMContentLoaded', function() {
Redactor('#entry');
});
```
--------------------------------
### Redactor Hotkeys: Adding a Keyboard Shortcut Example
Source: https://imperavi.com/redactor/docs/api/hotkeys
Demonstrates how to add a keyboard shortcut using `this.app.hotkeys.add` within the Redactor editor. This example assigns 'ctrl+j' or 'meta+j' to trigger a specific command 'myplugin.toggle' with a parameter.
```JavaScript
this.app.hotkeys.add('ctrl+j, meta+j', {
title: 'Toggle my plugin',
name: 'meta+j',
command: 'myplugin.toggle',
params: { arg: 1 }
});
```
--------------------------------
### Define Redactor Component HTML Template
Source: https://imperavi.com/redactor/docs/get-started/angular-setup
Configure the `redactor.component.html` file with a basic HTML structure, including a `textarea` element that Redactor will attach to, demonstrating its presence.
```HTML
Redactor is working!
```
--------------------------------
### Handle Redactor Editor App Before Start Event
Source: https://imperavi.com/redactor/docs/events/app
This event occurs just before the Redactor editor begins its initialization process. It allows developers to execute custom logic or perform setup tasks before the editor is fully active, such as pre-loading data or configuring initial settings.
```javascript
Redactor('#entry', {
subscribe: {
'app.before.start': function() {
...
}
}
});
```
--------------------------------
### Redactor Plugin Template
Source: https://imperavi.com/redactor/docs/guides/create-a-plugin
A basic template for creating a Redactor editor plugin, demonstrating its lifecycle methods like init, start, and stop, along with public and private method definitions. The init method is called when modules and plugins are initialized, start when the editor begins, and stop when the editor is stopped.
```JavaScript
Redactor.add('plugin', 'myplugin', {
// call when the editor initialize all modules & plugins (optional method)
init() {
// define local variables
this.myvariable = true;
},
// call when the editor starts (optional method)
start() {
if (this.myvariable) {
this.myMethod();
this._myPrivateMethod();
}
},
// call when the editor stops (optional method)
stop() {
this.myvariable = false;
},
// public methods
myMethod() {
// do something
},
// private
_myPrivateMethod() {
// do something
}
});
```
--------------------------------
### Frontend Framework Layout Structure Example
Source: https://imperavi.com/redactor/docs/guides/layouts-and-grids
Illustrates a typical HTML structure for a grid layout using `grid` and `col` classes, common in frontend frameworks, which Redactor can recognize when properly configured.
```HTML
Column 1
Column 2
```
--------------------------------
### Get and select a link in Redactor
Source: https://imperavi.com/redactor/docs/api/link
This method returns an array with the Dom elements of all links in the selected text. This example retrieves the first link from the selection and then programmatically selects it.
```JavaScript
const $link = app.link.get().first();
const selection = app.create('selection');
selection.select($link);
```
--------------------------------
### JavaScript: Insert block and set caret at start
Source: https://imperavi.com/redactor/docs/api/block
Shows how to create and insert a text block, explicitly setting the caret position to the beginning of the newly added block using the `caret: 'start'` parameter.
```javascript
// create block
let $source = this.dom('
').html('Hello world!');
let instance = this.app.create('block.text', $source);
// add and set caret at start
this.app.block.insert({ instance: instance, caret: 'start' });
```
--------------------------------
### Initialize Redactor with Content via Settings
Source: https://imperavi.com/redactor/docs/settings/content
This example shows how to pass initial content to Redactor directly through its configuration object. This method is useful for dynamically generated content or when the content is not pre-filled in the HTML element.
```HTML
```
```JavaScript
Redactor('#entry', {
content: '
My content
'
});
```
--------------------------------
### Start Redactor Editor Instance
Source: https://imperavi.com/redactor/docs/api/app
Starts the Redactor editor instance. This method is typically used after the editor has been stopped using 'this.app.stop'. It can optionally accept a settings object to reconfigure the editor upon restart.
```APIDOC
Method: start(settings: Object (optional)
+ Options object
```
```javascript
this.app.start();
this.app.start(settings);
```
--------------------------------
### Set Caret Position in Redactor Editor (Caret.set) Example
Source: https://imperavi.com/redactor/docs/api/caret
Illustrates how to use the `caret.set()` method to programmatically place the caret at the start of a specified element in the Redactor editor. This involves creating a caret instance and then invoking the `set` method.
```JavaScript
let caret = this.app.create('caret');
caret.set(element, 'start');
```
--------------------------------
### Handle Redactor Editor App Start Event
Source: https://imperavi.com/redactor/docs/events/app
This event fires immediately after the Redactor editor has successfully started and is ready for use. It's ideal for tasks that require the editor to be fully initialized, such as loading initial content, setting up plugins, or attaching event listeners.
```javascript
Redactor('#entry', {
subscribe: {
'app.start': function() {
...
}
}
});
```
--------------------------------
### Retrieve All Content Blocks (Redactor)
Source: https://imperavi.com/redactor/docs/api/blocks
Demonstrates how to get all block elements within the Redactor editor's content. The example then iterates through each block to access its associated instance, useful for further manipulation or inspection.
```JavaScript
let $blocks = this.app.blocks.get();
$blocks.each(function($node) {
let instance = $node.dataget('instance');
});
```
--------------------------------
### Connect Redactor plugins in React
Source: https://imperavi.com/redactor/docs/get-started/react-setup
Shows how to import and connect a Redactor plugin (e.g., 'emoji') during the editor's initialization in a React `main.jsx` file. Plugins extend Redactor's functionality and are passed as an array in the editor's options.
```javascript
// main.jsx
import React from 'react';
// import Redactor
import './redactor.min.css';
import Redactor from './redactor.js';
// import plugin
import './emoji.min.js';
// call
let editor = Redactor('#editor', {
plugins: ['emoji']
});
```
--------------------------------
### Example JSON error response for Redactor image upload
Source: https://imperavi.com/redactor/docs/events/image
An example of the JSON structure returned when an image upload fails in Redactor, indicating an error and a descriptive message.
```JSON
{
"error": true,
"message": "Something went wrong..."
}
```
--------------------------------
### Configure Redactor Wrapper Template with JavaScript
Source: https://imperavi.com/redactor/docs/settings/wrapper
Example of initializing Redactor to customize the wrapper's HTML template by providing a custom 'div' with a specific class, overriding the default structure.
```JavaScript
Redactor('#entry', {
wrapper: {
template: ''
}
});
```
--------------------------------
### Redactor Plugin: Adding a Custom Button to Addbar
Source: https://imperavi.com/redactor/docs/api/addbar
Illustrates how to create a Redactor plugin that adds a custom button to the editor's addbar. The example shows the `start` method for button registration and a `toggle` method for handling button clicks.
```JavaScript
Redactor.add('plugin', 'myplugin', {
start() {
this.app.addbar.add('mybutton', {
title: 'My Button',
icon: '',
command: 'myplugin.toggle'
});
},
toggle(params, button) {
// do something
}
});
```
--------------------------------
### Redactor Placeholder Set Method Usage Example
Source: https://imperavi.com/redactor/docs/api/placeholder
Demonstrates how to use the 'set' method of the Redactor Placeholder API to change the editor's placeholder text.
```JavaScript
this.app.placeholder.set('New placeholder text...');
```
--------------------------------
### Integrate Redactor API within Custom Plugins
Source: https://imperavi.com/redactor/docs/api/overview
Provides an example of how to develop a Redactor plugin, demonstrating the use of `this.app` to access the editor's API for tasks like adding toolbar buttons and inserting content.
```JavaScript
Redactor.add('plugin', 'myplugin', {
start() {
this.app.toolbar.add('mybutton', {
title: 'My Button',
icon: '',
command: 'myplugin.insert'
});
},
insert() {
this.app.editor.insertContent({
html: '
Hello world!
'
});
}
});
```
--------------------------------
### Generate Angular Redactor Component with CLI
Source: https://imperavi.com/redactor/docs/get-started/angular-setup
Utilize the Angular CLI to scaffold a new component named 'redactor' within your project, which will encapsulate the Redactor editor.
```Angular CLI
ng generate component redactor
```
--------------------------------
### Redactor API: Get Editor Selection Offset
Source: https://imperavi.com/redactor/docs/api/offset
Example demonstrating how to retrieve the current selection offset (start and end positions) within the Redactor editor using the 'offset.get()' method without arguments. The method returns an object with 'start' and 'end' properties.
```JavaScript
let offset = this.app.create('offset');
let obj = offset.get();
console.log(obj.start, obj.end);
```
--------------------------------
### Redactor API: Get Element Selection Offset
Source: https://imperavi.com/redactor/docs/api/offset
Example demonstrating how to retrieve the selection offset within a specific HTML element using the 'offset.get(element)' method. The method returns an object containing the 'start' and 'end' positions of the selection within the provided element.
```JavaScript
let offset = this.app.create('offset');
let obj = offset.get(element);
console.log(obj.start, obj.end);
```
--------------------------------
### Get Event Parameter Value
Source: https://imperavi.com/redactor/docs/events/overview
Example of using the `event.get()` method to retrieve the value of a parameter from the event object.
```JavaScript
let value = event.get('name');
```
--------------------------------
### Create and use a Redactor React component
Source: https://imperavi.com/redactor/docs/get-started/react-setup
This snippet demonstrates how to create a reusable Redactor React component (`RedactorJS.jsx`) and integrate it into your main application file (`main.jsx`), along with the necessary HTML structure (`index.html`). The component handles Redactor initialization and cleanup using `useEffect`.
```javascript
// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import RedactorJS from './RedactorJS.jsx';
// Render
ReactDOM.createRoot(document.getElementById('root')).render(
,
)
```
```javascript
// RedactorJS.jsx
import React, { useEffect, useRef } from 'react';
import './redactor.min.css';
import Redactor from './redactor.usm.min.js';
import './emoji.js';
const RedactorJS = ({ opts }) => {
const textAreaRef = useRef(null);
useEffect(() => {
let editor;
let opts = {
plugins: ['emoji'],
content: 'Hello World!'
};
if (textAreaRef.current) {
editor = Redactor(textAreaRef.current, opts);
}
return () => {
if (editor) {
editor.destroy();
}
};
}, [opts]);
return ;
};
export default RedactorJS;
```
```html
React
```
--------------------------------
### Configure Redactor Context Menu Buttons
Source: https://imperavi.com/redactor/docs/settings/buttons
Shows how to customize the buttons that appear in the Redactor context menu. This example enables the context menu and specifies a custom set of buttons.
```JavaScript
['ai-tools', 'format', 'bold', 'italic', 'deleted', 'moreinline', 'link']
// additional buttons: mark, sub, sup, kbd
```
```JavaScript
Redactor('#entry', {
context: true,
buttons: {
context: ['bold', 'italic', 'mark', 'link']
}
});
```
--------------------------------
### Get all selected links in Redactor
Source: https://imperavi.com/redactor/docs/api/link
This method returns an array with the Dom elements of all links in the selected text. This example retrieves all links in the current selection.
```JavaScript
const $links = app.link.get();
```
--------------------------------
### Example: Get Random ID in Redactor
Source: https://imperavi.com/redactor/docs/api/utils
Demonstrates how to instantiate the Redactor 'utils' module and call the `getRandomId` method to generate a unique alphanumeric ID.
```JavaScript
let utils = this.app.create('utils');
let id = utils.getRandomId();
```
--------------------------------
### Subscribe to editor.before.load Event
Source: https://imperavi.com/redactor/docs/events/editor
Occurs before the editor starts. This event provides the source HTML content of the editor as an argument, allowing for pre-processing or validation.
```APIDOC
editor.before.load(html: String)
html: Source content of the editor.
```
```JavaScript
Redactor('#entry', {
subscribe: {
'editor.before.load': function(event) {
...
}
}
});
```
--------------------------------
### Get HTML Email Content from Redactor Editor
Source: https://imperavi.com/redactor/docs/api/editor
Returns the editor's content formatted as HTML suitable for emails, provided the Email plugin is installed.
```javascript
let data = this.app.editor.getEmail();
```
--------------------------------
### Create Custom Plugin Event
Source: https://imperavi.com/redactor/docs/events/overview
Demonstrates how to broadcast a custom event from a Redactor plugin using `this.app.broadcast` when the plugin starts, enabling other plugins to subscribe to it.
```JavaScript
Redactor.add('plugin', 'myplugin', {
start() {
this.app.broadcast('myplugin.start');
}
});
```
--------------------------------
### Execute Redactor API Commands on an Instance
Source: https://imperavi.com/redactor/docs/api/overview
Once an editor instance is obtained, this snippet demonstrates how to call its API methods, such as inserting content into the editor.
```JavaScript
app.editor.insertContent({ html: '
Hello world!
' });
```
--------------------------------
### Configure Angular Project for Redactor Assets
Source: https://imperavi.com/redactor/docs/get-started/angular-setup
Modify `angular.json` to include Redactor's core CSS and JavaScript files in your Angular build process. This ensures that the necessary Redactor styles and scripts are bundled and available to your application.
```JSON
// angular.json
"styles": [
"src/redactor/redactor.css"
],
"scripts": [
"src/redactor/redactor.js"
]
```
--------------------------------
### Configure Redactor Format Popup Options
Source: https://imperavi.com/redactor/docs/settings/format
Examples demonstrating how to configure the `popups.format` setting in Redactor to customize the list and order of block tags available in the editor's formatting popup.
```JavaScript
Redactor('#entry', {
popups: {
format: ['text', 'h1', 'h2', 'h3', 'bulletlist', 'numberedlist', 'address']
}
});
```
```JavaScript
Redactor('#entry', {
popups: {
format: ['text', 'h3', 'h4', 'address']
}
});
```
```JavaScript
Redactor('#entry', {
popups: {
format: ['text', 'bulletlist', 'numberedlist', 'h1', 'h2', 'h3']
}
});
```
--------------------------------
### Get URLs of all selected links in Redactor
Source: https://imperavi.com/redactor/docs/api/link
This method returns an array with the Dom elements of all links in the selected text. This example retrieves the 'href' attribute (URL) for all selected links.
```JavaScript
const $links = app.link.get();
const urls = $links.map($link => $link.attr('href'));
```
--------------------------------
### Integrate Redactor Component into Angular App Template
Source: https://imperavi.com/redactor/docs/get-started/angular-setup
Embed the newly created `RedactorComponent` into your main `AppComponent`'s template (`app.component.html`) by using its selector, making the Redactor editor visible in your application.
```HTML
Welcome to {{ title }}!
```
--------------------------------
### Redactor: Subscribe to format.set Event
Source: https://imperavi.com/redactor/docs/events/format
JavaScript example demonstrating how to subscribe to the `format.set` event in Redactor, logging the formatted DOM nodes when the event occurs.
```JavaScript
Redactor('#entry', {
subscribe: {
'format.set': function(event) {
console.log(event.get('$nodes'));
}
}
});
```
--------------------------------
### Get the first selected link in Redactor
Source: https://imperavi.com/redactor/docs/api/link
This method returns an array with the Dom elements of all links in the selected text. This example retrieves the first link from the selection and adds a CSS class to it.
```JavaScript
const $link = app.link.get().first();
$link.addClass('link-classname');
```
--------------------------------
### Retrieve First Content Block (Redactor)
Source: https://imperavi.com/redactor/docs/api/blocks
Provides an example of how to get the very first block element present in the Redactor editor's content, useful for operations that target the beginning of the document.
```JavaScript
let $block = this.app.blocks.get({ first: true });
```
--------------------------------
### Create Redactor React Component for NextJS
Source: https://imperavi.com/redactor/docs/get-started/nextjs-setup
This React component wraps the Redactor editor, initializing it within a textarea. It handles Redactor's lifecycle, including destruction on unmount, and accepts options for plugins and initial content. It imports necessary CSS and JavaScript files for Redactor's functionality.
```JavaScript
// RedactorJS.js
import React, { useEffect, useRef } from 'react';
import './redactor.min.css';
import Redactor from './redactor.usm.min.js';
import './emoji.js';
const RedactorJS = ({ opts }) => {
const textAreaRef = useRef(null);
useEffect(() => {
let editor;
let opts = {
plugins: ['emoji'],
content: 'Hello World!'
};
if (textAreaRef.current) {
editor = Redactor(textAreaRef.current, opts);
}
return () => {
if (editor) {
editor.destroy();
}
};
}, [opts]);
return ;
};
export default RedactorJS;
```
--------------------------------
### Redactor API: Set Editor Selection Offset
Source: https://imperavi.com/redactor/docs/api/offset
Example demonstrating how to programmatically set the selection offset within the Redactor editor using the 'offset.set({ start, end })' method. This allows for precise control over the cursor and selection range.
```JavaScript
let offset = this.app.create('offset');
offset.set({ start: 1, end: 10 });
```
--------------------------------
### Implement Redactor Component Logic in TypeScript
Source: https://imperavi.com/redactor/docs/get-started/angular-setup
Update `redactor.component.ts` to manage the Redactor instance's lifecycle. It initializes Redactor on view initialization (`ngAfterViewInit`) and ensures proper destruction on component removal (`ngOnDestroy`), preventing memory leaks.
```TypeScript
// redactor.component.ts
import { Component, AfterViewInit, OnDestroy } from '@angular/core';
declare let Redactor: any;
@Component({
selector: 'redactor',
templateUrl: './redactor.component.html',
styleUrls: ['./redactor.component.css']
})
export class RedactorComponent implements AfterViewInit, OnDestroy {
private app:any;
ngAfterViewInit(): void {
this.app = Redactor('#entry');
}
ngOnDestroy(): void {
this.app.destroy();
}
}
```
--------------------------------
### Default AI Image Style Options Configuration
Source: https://imperavi.com/redactor/docs/tools/ai-tools
This snippet outlines the default image styling options available within the AI plugin, which can be used to guide image generation.
```JavaScript
style: [
'3d model',
'Digital art',
'Isometric',
'Line art',
'Photorealistic',
'Pixel art'
]
```
--------------------------------
### Initialize Redactor with custom settings
Source: https://imperavi.com/redactor/docs/settings/overview
This snippet demonstrates how to initialize the Redactor editor instance by passing an object of settings. It shows how to disable the source view and configure a specific upload path for images.
```JavaScript
Redactor('#entry', {
source: false,
image: {
upload: '/path-to-upload/'
}
});
```
--------------------------------
### Define Custom Styles for Redactor Layout and Column Classes
Source: https://imperavi.com/redactor/docs/guides/layouts-and-grids
Provides example CSS rules for the `grid` and `col` classes, demonstrating how to style the layout (flex container) and column (background, padding) elements within the Redactor content area.
```CSS
.rx-content .grid {
display: flex;
flex-direction: row;
gap: 12px;
}
.rx-content .col {
background: #eee;
padding: 16px;
}
```
--------------------------------
### Redactor Editor: Initializing with a Custom Plugin
Source: https://imperavi.com/redactor/docs/api/addbar
Demonstrates how to initialize the Redactor editor instance, enabling the previously defined custom plugin. This step is crucial for the plugin's functionality to be available within the editor.
```JavaScript
Redactor('#entry', {
plugins: ['myplugin']
});
```
--------------------------------
### Get Content with Redactor API Method
Source: https://imperavi.com/redactor/docs/get-started/get-content
Demonstrates how to programmatically retrieve content from the Redactor editor instance using the `editor.getContent()` API method. This can be done from outside scripts or within a plugin method.
```JavaScript
// call editor
let app = Redactor('#entry');
// get content from outside scripts
let content = app.editor.getContent();
// get content in the plugin method
let content = this.app.editor.getContent();
```
--------------------------------
### Subscribe to editor.load Event
Source: https://imperavi.com/redactor/docs/events/editor
Occurs when the editor is fully started and loaded. This event provides the source HTML content of the editor as an argument, useful for post-load operations.
```APIDOC
editor.load(html: String)
html: Source content of the editor.
```
```JavaScript
Redactor('#entry', {
subscribe: {
'editor.load': function(event) {
...
}
}
});
```
--------------------------------
### Redactor Editor Plugin Configuration
Source: https://imperavi.com/redactor/docs/guides/create-a-plugin
Illustrates how to override or specify plugin settings when initializing the Redactor editor. This allows for dynamic configuration of plugin behavior at editor startup, providing flexibility for different use cases.
```JavaScript
Redactor('#entry', {
plugins: ['myplugin']
myplugin: {
myvariable: false
}
});
```
--------------------------------
### Configure Custom Tone Options for Redactor AI
Source: https://imperavi.com/redactor/docs/tools/ai-tools
This example demonstrates how to define a custom set of writing tone options for the AI plugin. Only the tones specified in this array will be available to users.
```JavaScript
Redactor('#entry', {
plugins: ['ai'],
ai: {
tone: [
'Academic',
'Fluent',
'Professional'
],
text: {
url: '/path-to-server-side/',
endpoint: 'https://api.openai.com/v1/chat/completions',
model: 'gpt-4o',
stream: true
}
}
});
```
--------------------------------
### Redactor API: Set Element Selection Offset
Source: https://imperavi.com/redactor/docs/api/offset
Example demonstrating how to set the selection offset within a specific HTML element using the 'offset.set({ start, end }, element)' method. This is useful for manipulating selections in custom elements or content areas.
```JavaScript
let offset = this.app.create('offset');
offset.set({ start: 1, end: 10 }, element);
```
--------------------------------
### Initialize Redactor with a Custom Plugin
Source: https://imperavi.com/redactor/docs/guides/create-a-plugin
Demonstrates how to initialize the Redactor editor and enable a custom plugin by adding its name to the 'plugins' array in the configuration object passed to the Redactor constructor.
```JavaScript
Redactor('#entry', {
plugins: ['myplugin']
});
```
--------------------------------
### Replace All Redactor Layouts with 'set' Parameter
Source: https://imperavi.com/redactor/docs/settings/layout
This example shows how to completely replace the default Redactor layouts by using the 'set: true' parameter within the 'layouts' configuration. When 'set' is true, only the specified layouts will be available in the editor.
```JavaScript
Redactor('#entry', {
layouts: {
set: true,
"single": {
title: "## layout.single-column ##",
pattern: "100%"
},
"two-columns": {
title: "## layout.two-columns ##",
pattern: "50%|50%"
}
}
});
```
--------------------------------
### Redactor Statusbar API Reference
Source: https://imperavi.com/redactor/docs/api/statusbar
Comprehensive API documentation for the Redactor Statusbar component, detailing its methods for managing statusbar elements.
```APIDOC
Statusbar API:
getElement(): DomObject
Description: Accesses the Dom object of the statusbar element.
add(name: String, html: String, position?: String): void
Description: Adds an item with specified name and HTML to the statusbar.
Arguments:
name: The unique name for the item.
html: The HTML content for the item.
position: Optional. Specify 'end' to add an item to the right corner.
update(name: String, html: String, position?: String): void
Description: Updates or adds the item with specified name in the statusbar.
Arguments:
name: The unique name of the item to update or add.
html: The new HTML content for the item.
position: Optional. Specify 'end' to position the item at the right corner if added or updated.
get(name?: String): DomObject | false | DomObject[]
Description: Returns the wrapped Dom object of the specified item in the statusbar. If the item doesn't exist returns 'false'. Or return all items of the statusbar.
Arguments:
name: Optional. The name of the item to retrieve.
Returns: The wrapped Dom object of the specified item, 'false' if not found, or an array of all items if no name is provided.
remove(name: String): void
Description: Removes the specified item from the statusbar.
Arguments:
name: The name of the item to remove.
clear(): void
Description: Removes all items from the statusbar.
```
--------------------------------
### Redactor Placeholder API Reference
Source: https://imperavi.com/redactor/docs/api/placeholder
Defines the 'Placeholder' API component, specifically detailing the 'set' method, its arguments, and purpose.
```APIDOC
Placeholder:
set:
Arguments:
value: String
Description: Changes the placeholder text.
```
--------------------------------
### Connect Plugins to Redactor Editor
Source: https://imperavi.com/redactor/docs/settings/plugins
Demonstrates how to initialize the Redactor editor and connect one or more plugins using the `plugins` array setting. The `plugins` setting accepts an array of plugin names to be loaded when the editor starts. This setting is of type `Array` and defaults to `empty`.
```JavaScript
Redactor('#entry', {
plugins: ['myplugin']
});
```
```JavaScript
Redactor('#entry', {
plugins: ['myplugin', 'myplugin2', 'myplugin3']
});
```
--------------------------------
### Redactor Hotkeys API: add Method Reference
Source: https://imperavi.com/redactor/docs/api/hotkeys
Documents the `add` method of the Redactor hotkeys API, used to register keyboard shortcuts. It specifies the required arguments: 'keys' as a String for the shortcut combination and 'options' as an Object for configuration.
```APIDOC
add#
Arguments:
* keys `String`
* options `Object`
Adds a keyboard shortcut for the plugin method.
```
--------------------------------
### Configure Redactor Layouts with Custom Options
Source: https://imperavi.com/redactor/docs/settings/layout
This code demonstrates how to initialize Redactor and customize its 'layouts' setting by providing a subset of layout definitions. This allows for overriding or extending default layouts without replacing them entirely.
```JavaScript
Redactor('#entry', {
layouts: {
"single": {
title: "## layout.single-column ##",
pattern: "100%"
},
"two-columns": {
title: "## layout.two-columns ##",
pattern: "50%|50%"
}
}
});
```
--------------------------------
### Submit Redactor Content via HTML Form POST
Source: https://imperavi.com/redactor/docs/get-started/get-content
Provides an example of an HTML form containing a Redactor-initialized textarea. The content is automatically included when the form is submitted using the POST method to a server-side script.
```HTML
```
--------------------------------
### Redactor Image Instance Methods API Reference
Source: https://imperavi.com/redactor/docs/api/image
A comprehensive list of all available methods for the Redactor image instance, allowing developers to programmatically get and set various image properties such as alt text, source, ID, width, caption, URL, and target.
```APIDOC
Image Instance Methods:
getAlt(): string - Get the alt text of the image.
getId(): string - Get the ID of the image.
getSrc(): string - Get the source URL of the image.
getSrcset(): string - Get the srcset attribute of the image.
getWidth(): string - Get the width of the image.
getCaption(): string - Get the caption of the image.
getUrl(): string - Get the URL the image links to.
getTarget(): string - Get the target attribute of the image link.
setAlt(alt: string): void - Set the alt text of the image.
setId(id: string): void - Set the ID of the image.
setSrc(src: string): void - Set the source URL of the image.
setSrcset(srcset: string): void - Set the srcset attribute of the image.
setWidth(width: string): void - Set the width of the image.
setCaption(caption: string): void - Set the caption of the image.
setUrl(url: string): void - Set the URL the image links to.
setTarget(target: string): void - Set the target attribute of the image link.
```
--------------------------------
### Redactor Autosave JSON Error Response Example
Source: https://imperavi.com/redactor/docs/events/autosave
An example of the JSON structure returned by the server when an autosave request fails in Redactor. This format includes a boolean 'error' flag and a 'message' string describing the issue.
```JSON
{
"error": true,
"message": "Something went wrong..."
}
```
--------------------------------
### Initialize Redactor from Existing HTML Element
Source: https://imperavi.com/redactor/docs/settings/content
This snippet demonstrates the default way Redactor initializes by reading content directly from a
```
```JavaScript
Redactor('#entry');
```
--------------------------------
### Get or Set Value of Form Elements
Source: https://imperavi.com/redactor/docs/api/dom
Gets the current value of the first element in the collection (typically form elements), or sets the value for each element in the collection. Useful for input fields, textareas, and select elements.
```JavaScript
let $node = this.dom('#id');
let val = $node.val();
$node.val('value');
```
--------------------------------
### Get or Set Data Attributes of Dom Elements
Source: https://imperavi.com/redactor/docs/api/dom
Gets the value of a data attribute for the first element in the collection, or sets one or more data attributes for each element in the collection. Useful for storing custom data on elements.
```JavaScript
let $node = this.dom('#id');
let val = $node.data('key');
$node.data('key', 'value');
$node.data({ 'key': 'value', 'another-key': 'value' });
```
--------------------------------
### Redactor Editor Settings API Documentation
Source: https://imperavi.com/redactor/docs/settings/general
Comprehensive documentation for the Redactor editor's configuration options, detailing each setting's type, default value, and purpose.
```APIDOC
reloadmarker:
Type: Boolean
Default: true
Description: 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.
https:
Type: Boolean
Default: false
Description: This setting is set to all links https protocol created by pasting content.
nocontainer:
Type: Boolean
Default: false
Description: This setting disables the creation of a container around the area being edited at startup.
nostyle:
Type: Boolean
Default: false
Description: This setting disables the adding of editor styles. Therefore, content styles will be inherited from the page.
structure:
Type: Boolean
Default: false
Description: This setting enables the editor to show the structure of the document.
```
--------------------------------
### Redactor: Example JSON Error Response Format
Source: https://imperavi.com/redactor/docs/events/upload
This snippet illustrates the expected JSON structure for an error response returned by the server during an upload failure. It typically includes an `error` flag and a `message` detailing the issue.
```JSON
{
"error": true,
"message": "Something went wrong..."
}
```
--------------------------------
### Get or Set HTML Attributes of Dom Elements
Source: https://imperavi.com/redactor/docs/api/dom
Gets the value of an HTML attribute for the first element in the collection, or sets one or more attributes for each element in the collection. Supports single key-value pairs or an object of attributes.
```JavaScript
let $node = this.dom('#id');
let rel = $node.attr('rel');
$node.attr('rel', 'value');
$node.attr({ 'rel': 'value', 'another-attr': 'value' });
```
--------------------------------
### Get or Set CSS Properties of Dom Elements
Source: https://imperavi.com/redactor/docs/api/dom
Gets the computed style value of a CSS property for the first element in the collection, or sets one or more CSS properties for each element in the collection. Can accept a key-value pair or an object of properties.
```JavaScript
let $node = this.dom('#id');
let color = $node.css('color');
$node.css('color', 'red');
$node.css({ 'color': 'red', 'font-weight': 'bold' });
```
--------------------------------
### Redactor Progress API Overview
Source: https://imperavi.com/redactor/docs/api/progress
Reference documentation for the Redactor Progress API, detailing available methods to control the visibility of the progress bar.
```APIDOC
Progress API:
show(): Shows the progress bar.
hide(): Hides the progress bar.
```
--------------------------------
### Initialize Redactor with AI Plugin Configuration
Source: https://imperavi.com/redactor/docs/tools/ai-tools
This JavaScript snippet demonstrates how to initialize the Redactor editor and enable the AI plugin. It configures both text and image generation capabilities, specifying server-side URLs, OpenAI API endpoints, and models (gpt-4o for text, dall-e-3 for images). The 'stream' option is enabled for text generation, indicating a streaming response from the AI service.
```javascript
Redactor('#entry', {
plugins: ['ai'],
ai: {
text: {
url: '/path-to-server-side/',
endpoint: 'https://api.openai.com/v1/chat/completions',
model: 'gpt-4o',
stream: true
},
image: {
url: '/path-to-server-side/',
endpoint: 'https://api.openai.com/v1/images/generations',
model: 'dall-e-3'
}
}
});
```
--------------------------------
### Customize Redactor AI Plugin Translations
Source: https://imperavi.com/redactor/docs/tools/ai-tools
This JavaScript example demonstrates how to customize the language values for the Redactor AI plugin by providing a custom `translations` object during editor initialization. It shows an example of setting Swedish translations for AI-related UI elements.
```JavaScript
Redactor('#entry', {
plugins: ['ai'],
ai: {
text: {
url: '/path-to-server-side/',
endpoint: 'https://api.openai.com/v1/chat/completions',
model: 'gpt-4o',
stream: true
}
},
lang: 'sv',
translations: {
sv: {
"ai": {
"placeholder-image": "Beskriv bilden du vill generera.",
"placeholder-text": "Berätta vad du vill skriva.",
"send": "Skicka",
"stop": "Stoppa",
"discard": "Kassera",
"insert": "Infoga",
"prompt": "Uppmaning",
"image-style": "Bildstil",
"change-tone": "Ändra ton"
}
}
}
});
```
--------------------------------
### Set HTTP Method for Image Selection in Redactor
Source: https://imperavi.com/redactor/docs/settings/image
This setting defines the HTTP method (e.g., 'get' or 'post') used to request the script or object specified by the `image.select` setting. The default method is 'get', but it can be changed to 'post' for specific server configurations.
```JavaScript
Redactor('#entry', {
image: {
upload: '/image-uploader/',
select: '/images/images.json',
selectMethod: 'post'
}
});
```
--------------------------------
### Configure Redactor AI Plugin with Empty Prompt and Custom Items
Source: https://imperavi.com/redactor/docs/tools/ai-tools
This snippet demonstrates how to initialize the Redactor editor with the AI plugin, configuring it to send requests to a server-side endpoint. It shows how to define custom AI prompt items, including an "empty" prompt option, and other predefined prompts like "Turn prose to bullets" or "Improve it". It also illustrates how to pass additional data with the request.
```JavaScript
Redactor('#entry', {
plugins: ['ai'],
ai: {
text: {
url: '/path-to-server-side/',
endpoint: 'https://api.openai.com/v1/chat/completions',
model: 'gpt-4o',
stream: true,
data: {
id: 10,
elements: '#my-input-1, #my-input-2, #my-form'
},
items: {
empty: { title: 'Empty request', command: 'ai.set', params: { empty: true } },
turn: { title: 'Turn prose to bullets', command: 'ai.set', params: { prompt: 'Turn prose to bullets' } },
improve: { title: 'Improve it', command: 'ai.set', params: { prompt: 'Improve it' } },
simplify: { title: 'Simplify it', command: 'ai.set', params: { prompt: 'Simplify it' } },
fix: { title: 'Fix any mistakes', command: 'ai.set', params: { prompt: 'Fix any mistakes' } },
shorten: { title: 'Make it shorten', command: 'ai.set', params: { prompt: 'Make it shorten' } },
detailed: { title: 'Make it more detailed', command: 'ai.set', params: { prompt: 'Make it more detailed' } },
complete: { title: 'Complete sentence', command: 'ai.set', params: { prompt: 'Complete sentence' } },
tone: { title: 'Change tone', command: 'ai.popupTone' },
translate: { title: 'Translate', command: 'ai.popupTranslate' }
}
}
}
});
```
--------------------------------
### Redactor Editor API Overview
Source: https://imperavi.com/redactor/docs/api/editor
This section provides an overview of the Redactor Editor API, listing available methods and their parameters for managing editor content and state.
```APIDOC
Editor Class:
insertContent(params: Object)
params:
html: string - HTML content to insert.
caret: string (optional) - Cursor position ('start' or 'end'). Default is 'end'.
position: string (optional) - Insertion point ('top' or 'bottom'). Default is cursor position.
setEmpty()
setContent(params: Object)
params:
html: string - HTML content to set.
caret: string (optional) - Cursor position ('start' or 'end'). Default is 'end'.
setJson(data: JSON Object)
data: JSON Object - JSON data representing editor blocks. See more details on how to form blocks in JSON.
setFocus(caret: String)
caret: string - Cursor position ('start' or 'end').
setBlur()
```
--------------------------------
### Define CSS for custom Redactor formatItems
Source: https://imperavi.com/redactor/docs/settings/format
This CSS snippet provides an example of how to define styles for custom classes used within Redactor's `formatItems` configuration. Since editor styles are reset, external CSS is required to display the custom formatting in the content. This specific example sets text color to red and font-weight to bold for elements with the 'mystyle' class.
```css
.rx-content .mystyle {
color: red;
font-weight: bold;
}
```