How to include <abbr> Abbreviate tag in TinyMCE content

Rhythmyx How To's
1

An abbreviate HTML markdown can be easily rendered by content authors using TinyMCE’s textpattern plugin.
For example the user can include <abbr> tag for WWW(World Wide Web) like below by using few keys to press.
<abbr title=“World Wide Web”>WWW</abbr>
Steps to configure and use:
To configure textpattern plugin in TinyMCE config file:

  1. Include the textpattern plugin under plugins section of the TinyMCE config file.
    “plugins”: [
    “advlist autolink lists link charmap print preview hr anchor pagebreak”,
    “searchreplace wordcount visualblocks visualchars code fullscreen”,
    “insertdatetime media nonbreaking save table contextmenu directionality”,
    “emoticons template paste textcolor textpattern”,
    “noneditable rxinline”
    ],
  2. Add formats for the Acronym like:
    “formats”: {
    “WHO”: { “inline”: “abbr”, “attributes”: { “title”: “World Health Organization”}},
    “WWW”: { “inline”: “abbr”, “attributes”: { “title”: “World Wide Web”}
    }}
  3. Add texpattern key configuration like:
    “textpattern_patterns”: [
    {“start”: “*1”, “end”: “*1”, “format”: “WHO”},
    {“start”: “*2”, “end”: “*2”, “format”: “WWW”}
    ]
    Note: Every start pattern should match the same end pattern. Also each acronym pattern should have unique start and end pattern.

To use the configured acronym in the TinyMCE editor:
The user must enclose the word(string) to abbreviate with the start and end pattern of the configured abbreviation and followed by a space character.

For example to abbreviate WWW from the above mentioned configurations, the user would type *2WWW*2 and a space character.

Sample TinyMCE config file content with textpattern configuration:
[
{
“config_css”: “…/rx_resources/tinymce/tinymce1.css”,
“plugins”: [
“advlist autolink lists link charmap print preview hr anchor pagebreak”,
“searchreplace wordcount visualblocks visualchars code fullscreen”,
“insertdatetime media nonbreaking save table contextmenu directionality”,
“emoticons template paste textcolor textpattern”,
“noneditable rxinline”
],
“formats”: {
“WHO”: { “inline”: “abbr”, “attributes”: { “title”: “World Health Organization”}},
“WWW”: { “inline”: “abbr”, “attributes”: { “title”: “World Wide Web”}
}}
“textpattern_patterns”: [
{“start”: “*1”, “end”: “*1”, “format”: “WHO”},
{“start”: “*2”, “end”: “*2”, “format”: “WWW”}
],
“relative_urls”: false,
“remove_script_host” : false
}
]

Reference: https://www.tinymce.com/docs/plugins/textpattern/

1 Like