Skip to content

tinymceai.adoc

Latest commit

 

History

History
143 lines (111 loc) · 5.07 KB

tinymceai.adoc

File metadata and controls

143 lines (111 loc) · 5.07 KB

TinyMCE AI Plugin

The TinyMCE AI plugin integrates AI-assisted authoring with rich-text editing. Users can interact through Actions, Reviews, or Conversations that can use relevant context from multiple sources.

Interactive example

liveDemo::tinymceai[]

Basic setup

To set up the TinyMCE AI plugin in {productname}:

  • add tinymceai to the plugins option in the editor configuration;

  • configure the tinymceai_token_provider option to provide authentication tokens (must return { token: string }). During a {cloudname} trial, the demo identity service can supply JWTs so a custom token endpoint is not required;

  • when the toolbar option is omitted or left at the default, the Silver theme toolbar already includes the AI toolbar buttons once the plugin is enabled: tinymceai-chat Chat icon, tinymceai-quickactions Quick Actions icon, and tinymceai-review Review icon. When a custom toolbar string is set, add those button ids to the string explicitly.

Minimal setup

The following configuration enables the plugin and token provider and relies on the default toolbar, which includes the AI buttons. If the toolbar option is set to a custom string, add tinymceai-chat, tinymceai-quickactions, and tinymceai-review to that string.

tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  plugins: 'tinymceai',
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

Complete setup example

The following example sets a custom toolbar string. To use the default toolbar instead (which already includes the AI buttons), omit the toolbar option.

tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  content_id: 'document-123',
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  },
  tinymceai_default_model: 'agent-1',
  tinymceai_allow_model_selection: true,
  tinymceai_chat_fetch_sources: async () => [
    {
      label: 'My Documents',
      sources: [
        { id: 'doc-1', label: 'Document 1', type: 'file' },
        { id: 'url-1', label: 'Web Page', type: 'web-resource' }
      ]
    }
  ],
  tinymceai_chat_fetch_source: async (id) => {
    const res = await fetch(`/api/documents/\$\{id\}`);
    const blob = await res.blob();
    const filename = `\$\{id\}.pdf`;
    return { type: 'file', file: new File([blob], filename, { type: blob.type }) };
  },
  tinymceai_quickactions_custom: [
    { title: 'Explain like I am five', prompt: 'Explain the following text in simple terms.', type: 'chat' }
  ]
});

Sidebars

The chat and review interfaces open as sidebars. From the toolbar or menu, clicking tinymceai-chat Chat icon opens the chat sidebar; clicking again minimizes it (chat history is preserved). Clicking tinymceai-review Review icon opens the review sidebar.

To toggle sidebars programmatically, use the core ToggleSidebar command:

editor.execCommand('ToggleSidebar', false, 'tinymceai-chat');
editor.execCommand('ToggleSidebar', false, 'tinymceai-review');

Keyboard shortcuts

The following keyboard shortcuts are available for the AI sidebars:

Action Windows macOS

Open or Close the AI Chat sidebar

Ctrl+J

Cmd+J

To show the chat sidebar on load:

tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  sidebar_show: 'tinymceai-chat',
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

Commands

The TinyMCE AI plugin provides the following {productname} commands.