ptcs-rte¶

Visual¶

Overview¶

ptcs-rte is a rich text editor. It takes a (possibly empty) HTML string as input and allows the user to edit it.

The editor supports:

fonts (family, size, weight, style)
underlined and strike-through text
subscript and superscript
text and background color
text alignment (left, center, right, justify)
text types (plain, various header levels, code block)
quoted content
indented text
tables
images
non-image data (inserted as OBJECT elements)
horizontal rules
links
undo / redo
search and replace

Usage Example¶

Basic Usage¶

<ptcs-rte
   text="<h2>Hello world!</h2><p><strong>This is a <em>Rich Text Editor</em>.</strong></p><p>Please edit the content...</p>"
   style="width: 400px; height: 300px;">
</ptcs-rte>

<ptcs-rte
   text="<h2>Hello world!</h2><p><strong>This is a <em>Rich Text Editor</em>.</strong></p><p>Please edit the content...</p>"
   show-tools="undo table link"
   style="width: 400px; height: 300px;">
</ptcs-rte>

Component API¶

Properties¶

Property	Type	Description	Default	Triggers a changed event?
allLabels	Object	Read-only property that returns all UI labels. See below
disabled	Boolean	Is the rich text editor disabled?	false
hideToolbar	Boolean	Hide the toolbar? User can still edit the text with hot-keys	false
label	String	Label / title of the editor	none
labels	Object	Object (set method) that assigns UI labels. See below	none
labelAlignment	String	Alignment for label. "left", "center", or "right"	"left"
labelVariant	String	Specify variant for the label	none, use default for label
selectedText	String	Read-only property that returns the selected text as plain text (not rich text)
showTools	String	Property that adds tools to the toolbar. See below	""
spellcheck	String	Assigns spellcheck attribute on editor: "true" or "false"	"false"
text	String	The rich text, as an HTML string.	""	Yes
viewOnly	Boolean	Show only the text, without editing capabilities.	false

Events¶

Name	Data	Description
text-updated		Triggered whenever the RTE text has changed. The event does not include the changed text, because it can be big and take time to generate.
text-changed	{ text }	Triggered when the RTE looses focus and the text has been updated. Text is in event.detail.value
ptcs-rte-detached		The RTE has been detached from the DOM

Methods¶

Name	Args	Description
getLabel	key	Retrieve a specific label. Part of the UI label support. See below.
getEditorValue	key	Get an editor value. See below.
findText	text	Enters "search and replace" mode. Searches for all occurrences of text in the editor content and highlights the first match. Returns the total number of matches
insertFile	{src, mime, alt, icon}	Insert a file with the specified src, mime type, and alt text. The icon field is a URL to an SVG icon that represents the file extension
setEditorValue	key, value	Set an editor value. See below.
replaceAllText	text	When in "search and replace" mode, replaces all occurrences of the searched text with the replacement text.
replaceText	text	When in "search and replace" mode, replaces the current match with the replacement text and moves to the next match.
runEditorCommand	key	Executes an editor command. See below
selectNextMatch		When in "search and replace" mode, moves the selection to the next occurrence of the searched text.
unfindText		Exits the "search and replace" mode.

The showTools property is a space separated list of options that adds tools to the toolbar.

'align' - add text alignment dropdown
'block' - add block type dropdown
'find' - add find and replace buttons
'indent' - add indent and outdent buttons
'list' - add list dropdown
'link' - add link button
'rule' - add horizontal rule button
'script' - add subscript and superscript buttons
'table' - add table menu
'undo' - add undo and redo buttons
'file' - add file upload button (upload images as <img> and other formats as <object>)

Note that some tools always available on the toolbar: - font family dropdown - font size dropdown - bold button - italic button - underline button - strike trough button - text color color-picker - background color color-picker - fullscreen button - info button

Editor Commands¶

An editor command applies an action to the current selection of the editor. The available commands are:

Name	Description
indent	Increase indentation. If currently inside a list, move current item to sub-list
outdent	Decrease indentation. If currently inside a list, move current item to parent list
blockquote	Quote current text block
rule	Insert a horizontal rule
undo	Undo last command
redo	Redo last command

Editor command can be triggered with rte.runEditorCommand(command)

Editor values¶

An editor value describes a state of the current selection in the editor. The available values are:

Name	Type	Description	Markup
fontFamily	String	The current font family	style="font-family: fontFamily;"
fontSize	String	The current font size	style="font-size: fontSize;"
bold	Boolean	Is bold active?	<strong>
italic	Boolean	Is italic active?	<em>
strike	Boolean	Is strike-through active?	<s>
subscript	Boolean	Is subscript active?	<sub>
superscript	Boolean	Is superscript active?	<sup>
block	String	Text type (plain, large-title, title, large-header, header, sub-header, code)	<p>, <h1> ... <h5>, <code>
color	String	The current text color	style="color: color"
background	String	The current background color	style="background-color: color;"
textAlign	String	The current text alignment	style="text-align: textAlign;"
indent	Boolean	Read-only property that is true if the current text block can be indented (has not reached maximum indentation)
outdent	Boolean	Read-only property that is true if the current text block can be outdented (has not reached minimum indentation)
list	String	Set list type (none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman)
link	Object	falsy: no link. {text, href}: link to href with the display text text
table	Object	falsy: no table. {rows, cols}: table with rows number of rows and cols number of columns
undo	Boolean	Read-only property that is true if the last operation can be undone
redo	Boolean	Read-only property that is true if the last operation can be redone

The editor values can be retrieved with getEditorValue(key) and assigned with setEditorValue(key, value).

UI labels¶

The Rich Text Editor uses a flexible labels system to provide customizable UI text for buttons, dialogs, tooltips, and other interface elements. This enables easy localization and branding.

Default Labels¶

All labels can be retrieved with the (read-only) property allLabels, which is a key-value object. Each key represents a label identifier, and the value is the string shown in the UI.

Example:

console.log(rte.allLabels);

Output:

{
   tool_bold: 'Bold',
   tool_italic: 'Italic',
   find_findText: 'Find what',
   find_replaceText: 'Replace with',
   // ...more labels
}

Customizing Labels¶

You can override any label by assigning a new value to the labels property. Assign the property to an object with the keys you want to override and their new values. Only the specified keys are overridden; all other labels remain at their default values.

rte.labels = { tool_bold: 'Fetstil', tool_italic: 'Kursiv', find_findText: 'Sök', find_replaceText: 'Ersätt' };

The method getLabel(labelId) returns the label string for the given label ID. If the label has been customized, returns the custom value; otherwise, returns the default.