Rich text editor
Examples
Exporting
Setting initial content
Importing
Properties
Events
Methods
Parts
Dependencies

Rich Text Editor

<mo-rich-text-editor> | MORichTextEditor

Since 2.11

experimental

The rich text editor allows users to format text using a variety of options.

Rich text editor

The rich text editor component provides a user-friendly interface with essential formatting tools for easy text customization. It seamlessly integrates into applications, offering a responsive and versatile solution for sophisticated text editing.

<mo-rich-text-editor></mo-rich-text-editor>

Examples

Exporting

You can export the data from the rich text editor either as JSON or HTML.

Export as

JSON

<mo-rich-text-editor id="export-to-json"></mo-rich-text-editor>
<mo-divider></mo-divider>
<div class="exports">
  <span>Export as</span>
  <div class="switch-copy">
    <mo-switch class="switch" label="HTML">
      <mo-icon slot="prefix" name="data-object"></mo-icon>
      <mo-icon slot="suffix" name="html"></mo-icon>
      <p class="switch-text">JSON</p>
    </mo-switch>
    <mo-copy-button id="html-cb" copy-label="Copy HTML" from="html-ta.value"></mo-copy-button>
    <mo-copy-button id="json-cb" copy-label="Copy JSON" from="json-pre"></mo-copy-button>
  </div>
</div>
<pre id="json-pre" class="json-output"></pre>
<mo-textarea id="html-ta" readonly class="html-output"></mo-textarea>

<script>
  const pre = document.querySelector('.json-output');
  const textarea = document.querySelector('.html-output');
  const editor = document.querySelector('#export-to-json');
  const switcher = document.querySelector('.switch');
  const switcherText = document.querySelector('.switch-text');
  const jsonCb = document.querySelector('#json-cb');
  const htmlCb = document.querySelector('#html-cb');
  let currentType = 'JSON';
  /** Set initial value to <pre> */
  customElements.whenDefined('mo-rich-text-editor').then(() => {
    setTimeout(() => {
      pre.innerHTML = JSON.stringify(editor.editor.getJSON(), null, ' ');
    }, 500);
  });
  editor.addEventListener('mo-change', e => {
    const editorRef = e.detail;
    if (currentType === 'HTML') {
      textarea.value = editorRef.getHTML();
    } else {
      pre.innerHTML = JSON.stringify(editorRef.getJSON(), null, ' ');
    }
  });
  switcher.addEventListener('mo-change', e => {
    if (e.target.checked) {
      switcherText.textContent = 'HTML';
      pre.style.display = 'none';
      textarea.style.display = 'block';
      htmlCb.style.display = 'block';
      jsonCb.style.display = 'none';
      currentType = 'HTML';
      textarea.value = editor.editor.getHTML();
    } else {
      switcherText.textContent = 'JSON';
      textarea.style.display = 'none';
      htmlCb.style.display = 'none';
      jsonCb.style.display = 'block';
      pre.style.display = 'block';
      currentType = 'JSON';
    }
  });
</script>

<style>
  .json-output {
    max-height: 20rem;
    overflow: scroll;
  }
  .switch-copy {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .exports {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .switch {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .html-output {
    display: none;
  }
  #html-cb {
    display: none;
  }
</style>

Setting initial content

Use the content attribute to set the initial content of the editor, or to update the content programmatically. Note that the text content inside the component can be localized using the lang attribute.

<mo-rich-text-editor lang="fi" class="rte" content="<p>Hei maailma!</p>"></mo-rich-text-editor>
<mo-divider></mo-divider>
<mo-textarea label="Muokkaa HTML arvoa tässä" value="<p>Hei maailma!</p>" class="initial-content"></mo-textarea>

<script>
  const ta = document.querySelector('.initial-content');
  const rte = document.querySelector('.rte');
  ta.addEventListener('mo-input', e => {
    rte.content = e.target.value;
  });
</script>

Editing the content programmatically is generally a bad idea. This just shows an example of the fact that it can be done, not that it should be.

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler

React

Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/rich-text-editor/rich-text-editor.js';

To import this component as a React component:

import MORichTextEditor from '@metsooutotec/modes-web-components/dist/react/rich-text-editor/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/rich-text-editor/rich-text-editor.js"></script>

Properties

Name	Description	Type	Default
`editor`	Reference to the TipTap editor.	`Editor \| undefined`	`undefined`
`content`	Initial content of the editor, in HTML format.	`string \| undefined`	`undefined`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`mo-change`	`onMoChange`	Fired when the content of the editor changes.	-

Learn more about events.

Methods

Name	Description	Arguments
`closeDropdowns()`	manually close other dropdowns when color picker is opened	`e: CustomEvent`

Learn more about methods.

Parts

Name	Description
`base`	The component’s internal wrapper.
`inputElement`	The contenteditable input field.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

Ask Rocky (Beta)

Rich text editor

Examples

Exporting

Setting initial content

Importing

Properties

Events

Methods

Parts

Dependencies