InputfieldTinyMCE

TinyMCE 6 rich text editor Inputfield for FieldtypeTextarea fields

It extends InputfieldTextarea, renders either a classic <textarea> editor or an inline editor, and exposes ProcessWire-specific integration for HTML Purifier, image uploads, links, style formats, paste filtering, and module/field configuration layers.

$f = $modules->get('InputfieldTinyMCE');
$f->attr('name', 'body');
$f->label = 'Body';
$f->toolbar = 'styles bold italic bullist numlist link';
$form->add($f);

For shared Inputfield behavior such as labels, attributes, rendering, processing, errors, collapsed states, and visibility selectors, see Inputfield. For textarea-specific behavior, see InputfieldTextarea.

Expand all      API reference

Configuration Layers

TinyMCE settings are built from several layers. Later layers win:

  1. Built-in defaults from defaults.json.
  2. Module-level defaults from defaultsFile and defaultsJSON.
  3. Per-field settingsFile and settingsJSON.
  4. Field/UI settings such as toolbar, plugins, features, inlineMode, toggles, and headlines.
  5. Runtime settings applied in renderReady(), such as disabling pasted data-images when no image field is available.

JSON override settings support prefixes:

PrefixBehavior
noneReplace the upstream setting.
replace_Explicitly replace the upstream setting.
add_Merge/append to the upstream setting.
append_Alias of add_.
$f->settingsJSON = json_encode([
    'replace_toolbar' => 'styles bold italic',
    'add_plugins' => 'wordcount',
]);

The string value default means "use the upstream default" for settings that support it.

Properties

TinyMCE Settings

PropertyTypeDescription
pluginsstringSpace-separated TinyMCE plugin names.
toolbarstringSpace-separated toolbar tools; | separates groups.
contextmenustringRight-click context menu tools.
removed_menuitemsstringMenubar items to hide.
invalid_stylesstring|arrayInline styles to disallow.
menubarstringTop-level menubar menus.
heightintEditor height in pixels.
external_pluginsarrayTinyMCE external plugin map.

Field/Inputfield Settings

PropertyTypeDefaultDescription
inlineModeint00 classic editor, 1 inline variable height, 2 inline fixed height.
lazyModeint10 load immediately, 1 lazy when visible, 2 lazy when clicked.
togglesarray[]Markup cleanup toggles using the toggle* constants.
featuresarraycommon featuresEnabled editor features; see below.
headlinesarrayh1 to h6Allowed heading tags for block/style formats.
settingsFilestring''Root-relative URL to per-field JSON settings.
settingsFieldstring''Another TinyMCE field to inherit settings from.
settingsJSONstring''Per-field JSON override string.
styleFormatsCSSstring''CSS parsed into style_formats and content_style.
extPluginsarray[]External plugin URLs selected for this field.

Module Settings

PropertyTypeDefaultDescription
skinstringoxideTinyMCE UI skin.
skin_urlstring''Custom skin URL when skin=custom.
content_cssstringwireBuilt-in content CSS name, or custom.
content_css_urlstring''Custom content CSS URL.
extPluginOptsstring''Newline-separated external plugin .js URLs.
defaultsFilestring''Root-relative JSON defaults file.
defaultsJSONstring''Module-level JSON defaults.
optionalsarray['settingsJSON']Settings configurable per-field rather than globally.
debugModebool|intfalseEnables verbose JavaScript logging.
extraCSSstring''CSS appended to editor content_style.
pasteFilterstringdefaultPaste-filter whitelist.
imageFieldsarray[]Image fields allowed for drag-and-drop uploads.
lang_<name>stringautoTinyMCE language pack code for a ProcessWire language.

Runtime Helpers

PropertyTypeDescription
configNamestringJavaScript settings key under ProcessWire.config.InputfieldTinyMCE.settings.
readonlyboolRead-only state, set during render-value mode.
initializedboolTrue after init() has run.
settingsInputfieldTinyMCESettingsDefaults and render settings helper.
configsInputfieldTinyMCEConfigsField/module configuration helper.
toolsInputfieldTinyMCEToolsJSON, purifier, image-field, link, and paste-filter helper.
formatsInputfieldTinyMCEFormatsStyle format and invalid-style parser helper.
Constants
ConstantDescription
mceVersionBundled TinyMCE version, currently 6.8.2.
toggleCleanDivConvert/remove div markup during save cleanup.
toggleCleanPRemove empty paragraph tags.
toggleCleanNbspConvert &nbsp; to regular spaces.
toggleRemoveStylesRemove all style attributes.
defaultPasteFilterDefault paste-filter whitelist string.
Features

The features array is queried with useFeature($name).

FeatureMeaning
toolbarShow toolbar buttons.
menubarShow top menubar.
statusbarShow bottom statusbar.
stickybarsUse sticky toolbar/menubar.
spellcheckEnable browser spellcheck.
purifierRun HTML Purifier during save/render workflows.
documentUse document-style content CSS.
imgUploadEnable image drag/drop upload when an image field is available.
imgResizeAllow image resize handles to generate variations.
pasteFilterFilter pasted markup through the whitelist.
inlineSpecial query name; true when inlineMode > 0.
if($f->useFeature('purifier')) {
    // HTML Purifier is enabled for this editor.
}
Methods

useFeature($name)

Return whether a named feature is enabled. Passing inline checks inlineMode > 0.

mcePath($getUrl = false)

Return the disk path to the bundled TinyMCE directory, or its URL when $getUrl is true.

$path = $f->mcePath();
$url = $f->mcePath(true);

setConfigName($name) / getConfigName()

Set or get the JavaScript settings key for this instance.

$f->setConfigName('body_compact');
echo $f->getConfigName();

configurable($set = null)

Get or set whether this field is independently configurable. A non-configurable field inherits settings from settingsField.

getSettingNames($types)

Return setting names for one or more setting groups: tinymce, field, module, or optionals.

$names = $f->getSettingNames('tinymce field');

Throws WireException for unknown groups.

addPlugin($file) / removePlugin($file)

Add or remove an external plugin .js file in module configuration. $file is relative to the ProcessWire root, such as /site/templates/mce/plugin.js. addPlugin() requires the file to exist.

getDirectionality()

Return ltr or rtl. The value is translatable with context language-direction.

renderReady($parent = null, $renderValueMode = false)

Load TinyMCE assets once per request, compute runtime settings, set configName, detect usable image fields, and prepare JavaScript settings.

render()

Render the editor. Classic mode renders a textarea plus init script. Inline mode renders a contenteditable div when HTML Purifier is available.

renderValue()

Render a sanitized non-editable value outside ProcessPageEdit, or defer to normal render behavior while ProcessPageEdit is rendering value mode.

processInput(WireInputData $input)

Process submitted markup, purify it when enabled, restore inline-mode field names after processing, and track value changes.

Helper Methods

The helper objects are public for advanced use, but most sites should use the Inputfield properties and methods above.

Useful examples:

$defaults = $f->settings->getDefaults();
$parsed = $f->formats->invalidStylesStrToArray('color a=background|border');
$cssUrl = $f->settings->getContentCssUrl();
Notes
  • Set a textarea field's inputfieldClass to InputfieldTinyMCE for normal field usage.
  • The editor requires MarkupHTMLPurifier; ProcessWire declares this module as a requirement.
  • toolbar values containing commas are ignored because they look like legacy CKEditor toolbar syntax.
  • invalid_styles supports global styles like color and tag-specific styles like a=background|background-color or table|td=height.
  • Image upload integration requires a real page editing context and an available multi-image FieldtypeImage field.
  • External plugins configured with addPlugin() are stored in module config; selecting them for one field uses the extPlugins field setting.
  • The bundled TinyMCE directory is tinymce-6.8.2/.

Source files: wire/modules/Inputfield/InputfieldTinyMCE/InputfieldTinyMCE.module.php and companion helper files in the same directory.

API reference: methods, properties, hooks

TinyMCE 6.x, Copyright (c) 2023 Ephox Corporation DBA Tiny Technologies, Inc. https://www.tiny.cloud/docs/tinymce/6/


Click any linked item for full usage details and examples. Hookable methods are indicated with the icon. In addition to those shown below, the InputfieldTinyMCE class also inherits all the methods and properties of: InputfieldTextarea, InputfieldText, Inputfield, WireData and Wire.

Show class?     Show args?       Only hookable?    

Common

NameReturnSummary 
InputfieldTinyMCE::addPlugin(string $file)
None

Add an external plugin .js file

 
InputfieldTinyMCE::configurable()
bool

Get or set configurable state

 
InputfieldTinyMCE::get($key)
array mixed string null

Get

 
InputfieldTinyMCE::getConfigInputfields()
InputfieldWrapper

Get Inputfield configuration settings

InputfieldTinyMCE::getConfigName()
string

Get configuration name used to store settings in ProcessWire.config JS

 
InputfieldTinyMCE::getDirectionality()
string

Get directionality, either 'ltr' or 'rtl'

 
InputfieldTinyMCE::getExtraStyles()
string

Get styles to add in <head>

 
InputfieldTinyMCE::getModuleConfigInputfields(InputfieldWrapper $inputfields)
None
InputfieldTinyMCE::getSettingNames($types)
string

Get all configurable setting names

 
InputfieldTinyMCE::helper(string $name)
InputfieldTinyMCEClass

Get helper

 
InputfieldTinyMCE::mcePath()
string

Return path or URL to TinyMCE files

 
InputfieldTinyMCE::processInput(WireInputData $input)
$this

Process input

InputfieldTinyMCE::removePlugin(string $file)
bool

Remove an external plugin .js file

 
InputfieldTinyMCE::render()
string

Render Inputfield

InputfieldTinyMCE::renderReady()
bool

Render ready

 
InputfieldTinyMCE::renderValue()
string

Render non-editable value

InputfieldTinyMCE::set($key, $value)
self

Set

 
InputfieldTinyMCE::setConfigName(string $configName)
$this

Set configuration name used to store settings in ProcessWire.config JS

 
InputfieldTinyMCE::useFeature(string $name)
bool

Use the named feature?

 

Properties

NameReturnSummary 
InputfieldTinyMCE::configName string Name of configuration set to use
DEFAULT: blank
 
InputfieldTinyMCE::content_css string Basename of content CSS file to use or "custom" to use custom URL
DEFAULT: wire
 
InputfieldTinyMCE::content_css_url string Applies only if $content_css has value "custom" 
InputfieldTinyMCE::contextmenu string Space-separated string of tools to show in context menu 
InputfieldTinyMCE::debugMode bool int Makes InputfieldTinyMCE.js use verbose console.log() messages
DEFAULT: false
 
InputfieldTinyMCE::defaultsFile string Location of optional defaults.json file that merges with defaults.json (URL relative to PW root URL) 
InputfieldTinyMCE::defaultsJSON string JSON that merges with the defaults.json for all instances 
InputfieldTinyMCE::extPluginOpts string Newline separated URL paths (relative to PW root) of extra plugin .js files 
InputfieldTinyMCE::extPlugins array Additional plugins to enable for this field (URL paths from customPluginOptions)  
InputfieldTinyMCE::external_plugins array URLs of external plugins, this is also a TinyMCE setting 
InputfieldTinyMCE::extraCSS string Extra CSS for editor, applies to all editors (appended to TinyMCE content_style setting) 
InputfieldTinyMCE::features array General features: toolbar, menubar, statusbar, stickybars, spellcheck, purifier, imgUpload, imgResize, pasteFilter 
InputfieldTinyMCE::headlines array Allowed headline types 
InputfieldTinyMCE::height int Height of editor in pixels 
InputfieldTinyMCE::imageFields array Names of fields allowed for drag-drop in images 
InputfieldTinyMCE::initialized bool Is the editor initialized? This is a read-only property.
DEFAULT: false
 
InputfieldTinyMCE::inlineMode int Use inline mode? 0=Regular editor, 1=Inline editor, 2=Fixed height inline editor 
InputfieldTinyMCE::invalid_styles string Space-separated string of invalid inline styles 
InputfieldTinyMCE::lazyMode int Use lazy-loading mode? 0=Off, 1=Lazy, 2=Extra lazy 
InputfieldTinyMCE::menubar string Space-separated list of top-level menubar items 
InputfieldTinyMCE::optionals array Names of optional settings that can be configured per-field 
InputfieldTinyMCE::pasteFilter string Rule string of elements and attributes allowed during filtered paste 
InputfieldTinyMCE::plugins string Space-separated string of plugins to enable 
InputfieldTinyMCE::readonly bool Are we in read-only mode? Automatically set during renderValue mode. This is a read-only property.
DEFAULT: false
 
InputfieldTinyMCE::removed_menuitems string Space-separated string of tools to remove from menubar 
InputfieldTinyMCE::settingsField string Alternate field to inherit settings from rather than configure settings with this instance. 
InputfieldTinyMCE::settingsFile string Location of optional custom-settings.json settings file (URL relative to PW root URL) 
InputfieldTinyMCE::settingsJSON string JSON with custom settings that override the defaults 
InputfieldTinyMCE::skin string Skin to use
DEFAULT: oxide
 
InputfieldTinyMCE::skin_url string URL to skin 
InputfieldTinyMCE::styleFormatsCSS string Style formats as CSS to parse and apply to style_formats and content_style 
InputfieldTinyMCE::toggles array Markup toggles, see self::toggle* constants 
InputfieldTinyMCE::toolbar string Space-separated string of tools to show in toolbar 

Additional methods and properties

In addition to the methods and properties above, InputfieldTinyMCE also inherits the methods and properties of these classes:

API reference based on ProcessWire core version 3.0.269