Class TJSTinyMCE

Provides a reactive wrapper for Foundry TinyMCE editor support. Allows editing Foundry document data or directly from content prop. Automatic HTML enrichment occurs for the content when saved.

Props

There are no required props, but the following are available to set:

• content - Provides an initial content string; you can bind to content from a parent component to get reactive updates when content changes. Two-way binding.

• enrichedContent - Provides the enriched content via TextEditor.enrichHTML when content changes. You can bind to enrichedContent from a parent component to get reactive updates though it is not recommended to change enrichedContent externally. One-way binding.

• options - Defines the options object for this component and passed on to the Foundry TinyMCE support. Please review all the options defined below TJSTinyMCEOptions.

Notable options passed onto TinyMCE instance:

• options.mceConfig - [object] TinyMCE configuration object.

Events

There are five events fired when the editor is canceled, saved, and started.

• editor:cancel - Fired when editing is canceled by a user action or reactive response to document changes.

• editor:document:deleted - Fired when the edited document is deleted. Access the document from event.detail.document.

• editor:enrichedContent - Fired when content is enriched. Access enriched content from event.detail.enrichedContent.

• editor:save - Fired when editing is saved. Access the content from event.detail.content.

• editor:start - Fired when editing is started.

CSS Variables

The following CSS variables control the associated styles with the default values:

`.editor` HTMLDivElement:
---------------------------------
--tjs-editor-background - none
--tjs-editor-border - none
--tjs-editor-border-radius - 0
--tjs-editor-height - 100%
--tjs-editor-margin - 0
--tjs-editor-transition
--tjs-editor-width - 100%

`.editor` HTMLDivElement; properties available when activated:
---------------------------------
--tjs-editor-active-box-shadow, unset; Foundry default: 0 0 5px var(--color-shadow-primary)
--tjs-editor-active-outline - unset
--tjs-editor-active-overflow - unset; When inactive the editor overflow is auto; when active overflow is unset.

`.editor` HTMLDivElement; properties available when inactive, but manually focused:
---------------------------------
--tjs-editor-inactive-box-shadow-focus-visible - fallback: --tjs-default-box-shadow-focus-visible
--tjs-editor-inactive-outline-focus-visible - fallback: --tjs-default-outline-focus-visible; default: revert
--tjs-editor-inactive-transition-focus-visible - fallback: --tjs-default-transition-focus-visible

`.editor` HTMLDivElement; properties available when inactive, but hovered:
---------------------------------
--tjs-editor-inactive-cursor-hover - text
--tjs-editor-inactive-box-shadow-hover - unset
--tjs-editor-inactive-outline-hover - unset
--tjs-editor-inactive-user-select-hover - text

`.editor-content` HTMLDivElement; when editing - the content overflow is set to auto:
---------------------------------
--tjs-editor-content-color - #000
--tjs-editor-content-font-family - "Signika"
--tjs-editor-content-font-size - 10.5pt
--tjs-editor-content-line-height - 1.2
--tjs-editor-content-overflow - auto
--tjs-editor-content-padding - 0

`.editor-container` HTMLDivElement; when editing - removes default margins.
---------------------------------
--tjs-editor-container-margin - 0

.editor-edit; Defines the position of the edit button from top / right absolute positioning:
---------------------------------
--tjs-editor-edit-button-right - 5px
--tjs-editor-edit-button-top - 0

Various TinyMCE `tox` toolbar elements; Defines the toolbar / menu.
---------------------------------
--tjs-editor-menu-item-active-background - #dee0e2 - This targets the auxiliary TMCE menus.
--tjs-editor-toolbar-background - rgba(0, 0, 0, 0.1)
--tjs-editor-toolbar-border-radius - 6px
--tjs-editor-toolbar-button-background - none
--tjs-editor-toolbar-button-background-hover - var(--color-hover-bg, #f0f0e0))
--tjs-editor-toolbar-button-color - var(--color-text-dark-primary, #191813)
--tjs-editor-toolbar-button-disabled-color - rgba(34, 47, 62, .5)
--tjs-editor-toolbar-box-shadow - 0 2px 2px -2px rgb(34 47 62 / 10%), 0 8px 8px -4px rgb(34 47 62 / 7%)
--tjs-editor-toolbar-chevron-active-color - var(--color-text-dark-primary, #191813))
--tjs-editor-toolbar-chevron-inactive-color - var(--color-text-light-7, #888))
--tjs-editor-toolbar-padding - 0 2px
--tjs-editor-toolbar-separator-border - 1px solid var(--color-text-light-3, #ccc)
--tjs-editor-toolbar-select-background - var(--color-control-bg, #d9d8c8)
--tjs-editor-toolbar-width - 100%
Copy