AI Tools

ai.create#

Returns the prompt message before sending the request to the server. This way you can modify the prompt and send the editor an already modified one. This event necessarily requires the prompt to be returned by setting it back to an event using event.set.

Redactor('#entry', {
    plugins: ['ai'],
    ai: {
        text: {
            url: '/path-to-server-side/',
            endpoint: 'https://api.openai.com/v1/chat/completions',
            model: 'gpt-4o',
            stream: true
        }
    },
    subscribe: {
        'ai.create': function(event) {
            let prompt = event.get('prompt');

            ...

            event.set('prompt', prompt);
        }
    }
});

ai.before.send#

Arguments:

• xhr Object
  • XMLHttpRequest object

Occurs before sending the AI request to the server.

This event has event.stop method.

Redactor('#entry', {
    plugins: ['ai'],
    ai: {
        text: {
            url: '/path-to-server-side/',
            endpoint: 'https://api.openai.com/v1/chat/completions',
            model: 'gpt-4o',
            stream: true
        }
    },
    subscribe: {
        'ai.before.send': function(event) {
            let xhr = event.get('xhr');
            xhr.setRequestHeader('X-CSRF-Token', 'your-token-value');
        }
    }
});

ai.complete#

Occurs when a request with results is received from the server or when stream is done. Returns prompt and response from the server.

Redactor('#entry', {
    plugins: ['ai'],
    ai: {
        text: {
            url: '/path-to-server-side/',
            endpoint: 'https://api.openai.com/v1/chat/completions',
            model: 'gpt-4o',
            stream: true
        }
    },
    subscribe: {
        'ai.complete': function(event) {
            let prompt = event.get('prompt');
            let response = event.get('response');
        }
    }
});

ai.before.insert#

Occurs before a response from AI is inserted into the editor content. Returns the request as HTML. This event necessarily requires the html to be returned by setting it back to an event using event.set.

    Redactor('#entry', {
        plugins: ['ai'],
        ai: {
            text: {
                url: '/path-to-server-side/',
                endpoint: 'https://api.openai.com/v1/chat/completions',
                model: 'gpt-4o',
                stream: true
            }
        },
        subscribe: {
            'ai.before.insert': function(event) {
                let html = event.get('html');

                ... some actions ...

                // set result
                event.set('html', html);
            }
        }
    });
    

ai.insert#

Occurs when a response from AI is inserted into the editor content. Returns the set of inserted DOM nodes.

Redactor('#entry', {
    plugins: ['ai'],
    ai: {
        text: {
            url: '/path-to-server-side/',
            endpoint: 'https://api.openai.com/v1/chat/completions',
            model: 'gpt-4o',
            stream: true
        }
    },
    subscribe: {
        'ai.insert': function(event) {
            let nodes = event.get('nodes');
            nodes.each(function($node) {
                console.log($node);
            });
        }
    }
});

ai.discard#

Occurs when the Discard button is pressed in an AI request.

Redactor('#entry', {
    plugins: ['ai'],
    ai: {
        text: {
            url: '/path-to-server-side/',
            endpoint: 'https://api.openai.com/v1/chat/completions',
            model: 'gpt-4o',
            stream: true
        }
    },
    subscribe: {
        'ai.discard': function() {
            ...
        }
    }
});

ai.stop#

Occurs when the Stop button is pressed in an AI request. Works if the request to AI was made as a stream. Returns prompt and response from the server.

Redactor('#entry', {
    plugins: ['ai'],
    ai: {
        text: {
            url: '/path-to-server-side/',
            endpoint: 'https://api.openai.com/v1/chat/completions',
            model: 'gpt-4o',
            stream: true
        }
    },
    subscribe: {
        'ai.stop': function(event) {
            let prompt = event.get('prompt');
            let response = event.get('response');
        }
    }
});

ai.error#

The error event occurs in two cases.

First, when an AI request or server returned an error. In this case, the event returns an object with data about the error.

Second, if you have specially generated a response in the server script as JSON, of this kind:

{
    "error": true,
    "message": "Something went wrong..."
}

This is useful, for example, if you are building AI query limits for users and want to show that the limit has been exhausted.

In all cases, the easiest way to get the response object is to use event.dump and see what data it contains.

Redactor('#entry', {
    plugins: ['ai'],
    ai: {
        text: {
            url: '/path-to-server-side/',
            endpoint: 'https://api.openai.com/v1/chat/completions',
            model: 'gpt-4o',
            stream: true
        }
    },
    subscribe: {
        'ai.error': function(event) {
            let response = event.dump();
            console.log(response);
        }
    }
});

ai.before.save#

Arguments:

• xhr Object
  • XMLHttpRequest object
• data Object
  • Object with parameters sent to the server.

Occurs before sending image to the server-side.

This event has event.stop method.

Redactor('#entry', {
    plugins: ['ai'],
    ai: {
        image: {
            save: '/save-image-api-url/',
            url: '/prompt-path-to-server-side/',
            endpoint: 'https://api.openai.com/v1/images/generations',
            model: 'dall-e-3',
            data: {
                id: 11,
                str: 'test'
            }
        }
    },
    subscribe: {
        'ai.before.save': function(event) {
            let data = event.get('data');
            let xhr = event.get('xhr');
            xhr.setRequestHeader('X-CSRF-Token', 'your-token-value');
            console.log(data);
        }
    }
});

ai.save#

Arguments:

• response Object
  • Object with JSON from the server side.

Occurs when an image successfully sent to the server-side.

Redactor('#entry', {
    plugins: ['ai'],
    ai: {
        image: {
            save: '/save-image-api-url/',
            url: '/prompt-path-to-server-side/',
            endpoint: 'https://api.openai.com/v1/images/generations',
            model: 'dall-e-3',
            data: {
                id: 11,
                str: 'test'
            }
        }
    },
    subscribe: {
        'ai.save': function(event) {
            let response = event.get('response');
            console.log(response);
        }
    }
});