eLabSDK2.UI.TextEditor

Hierarchy

default

↳ TextEditor

Methods

addAction

Static addAction(action): void

Add a custom action button to the CKEditor rich text editor toolbar.

This dynamically adds a new button to the CKEditor toolbar used throughout the application
for rich text editing (e.g., in experiment sections, protocols, notes). The button can
perform any custom action including inserting text, formatting content, opening dialogs,
or triggering external operations. This leverages CKEditor's plugin architecture to
seamlessly integrate custom functionality. For more details on CKEditor plugins, see:
https://ckeditor.com/docs/ckeditor5/latest/framework/architecture/plugins.html

Parameters

Name	Type	Description
`action`	`TextEditorAction`	{ id: string, label: string, icon: string, visible: boolean, callback: (config: ButtonConfig, editor: Editor) => void }

Returns

void

Example

// Add button to insert experiment reference
eLabSDK2.UI.TextEditor.addAction({
  id: 'insert-experiment-ref',
  label: 'Insert Experiment Reference',
  icon: '<svg viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16z"/></svg>',
  visible: true,
  callback: (config, editor) => {
    // Insert experiment link into editor
    editor.model.change((writer) => {
      const experimentId = prompt('Enter experiment ID:');
      if (experimentId) {
        const link = writer.createText(`Experiment #${experimentId}`, {
          linkHref: `/experiments/${experimentId}`
        });
        editor.model.insertContent(link);
      }
    });
  }
});

Example

// Add button to insert current date/time
eLabSDK2.UI.TextEditor.addAction({
  id: 'insert-datetime',
  label: 'Insert Date & Time',
  icon: '<svg viewBox="0 0 20 20"><rect width="18" height="18" x="1" y="1"/></svg>',
  visible: true,
  callback: (config, editor) => {
    const dateFormat = eLabSDK2.System.User.getDateTimeFormat();
    const currentDateTime = moment().format(dateFormat);

    editor.model.change((writer) => {
      const dateText = writer.createText(currentDateTime);
      editor.model.insertContent(dateText);
    });
  }
});

Example

// Add button to insert template text
eLabSDK2.UI.TextEditor.addAction({
  id: 'insert-procedure-template',
  label: 'Insert Procedure Template',
  icon: '<svg viewBox="0 0 20 20"><path d="M2 3h16v2H2V3zm0 4h16v2H2V7zm0 4h16v2H2v-2z"/></svg>',
  visible: true,
  callback: (config, editor) => {
    const template = `
      <h2>Procedure</h2>
      <ol>
        <li>Step 1: Prepare materials</li>
        <li>Step 2: Perform experiment</li>
        <li>Step 3: Record observations</li>
      </ol>
      <h2>Results</h2>
      <p>[Document results here]</p>
    `;

    const viewFragment = editor.data.processor.toView(template);
    const modelFragment = editor.data.toModel(viewFragment);
    editor.model.insertContent(modelFragment);
  }
});