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 Collapse all API reference
TinyMCE settings are built from several layers. Later layers win:
- Built-in defaults from
defaults.json. - Module-level defaults from
defaultsFileanddefaultsJSON. - Per-field
settingsFileandsettingsJSON. - Field/UI settings such as
toolbar,plugins,features,inlineMode,toggles, andheadlines. - Runtime settings applied in
renderReady(), such as disabling pasted data-images when no image field is available.
JSON override settings support prefixes:
| Prefix | Behavior |
|---|---|
| none | Replace 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.
TinyMCE Settings
| Property | Type | Description |
|---|---|---|
plugins | string | Space-separated TinyMCE plugin names. |
toolbar | string | Space-separated toolbar tools; | separates groups. |
contextmenu | string | Right-click context menu tools. |
removed_menuitems | string | Menubar items to hide. |
invalid_styles | string|array | Inline styles to disallow. |
menubar | string | Top-level menubar menus. |
height | int | Editor height in pixels. |
external_plugins | array | TinyMCE external plugin map. |
Field/Inputfield Settings
| Property | Type | Default | Description |
|---|---|---|---|
inlineMode | int | 0 | 0 classic editor, 1 inline variable height, 2 inline fixed height. |
lazyMode | int | 1 | 0 load immediately, 1 lazy when visible, 2 lazy when clicked. |
toggles | array | [] | Markup cleanup toggles using the toggle* constants. |
features | array | common features | Enabled editor features; see below. |
headlines | array | h1 to h6 | Allowed heading tags for block/style formats. |
settingsFile | string | '' | Root-relative URL to per-field JSON settings. |
settingsField | string | '' | Another TinyMCE field to inherit settings from. |
settingsJSON | string | '' | Per-field JSON override string. |
styleFormatsCSS | string | '' | CSS parsed into style_formats and content_style. |
extPlugins | array | [] | External plugin URLs selected for this field. |
Module Settings
| Property | Type | Default | Description |
|---|---|---|---|
skin | string | oxide | TinyMCE UI skin. |
skin_url | string | '' | Custom skin URL when skin=custom. |
content_css | string | wire | Built-in content CSS name, or custom. |
content_css_url | string | '' | Custom content CSS URL. |
extPluginOpts | string | '' | Newline-separated external plugin .js URLs. |
defaultsFile | string | '' | Root-relative JSON defaults file. |
defaultsJSON | string | '' | Module-level JSON defaults. |
optionals | array | ['settingsJSON'] | Settings configurable per-field rather than globally. |
debugMode | bool|int | false | Enables verbose JavaScript logging. |
extraCSS | string | '' | CSS appended to editor content_style. |
pasteFilter | string | default | Paste-filter whitelist. |
imageFields | array | [] | Image fields allowed for drag-and-drop uploads. |
lang_<name> | string | auto | TinyMCE language pack code for a ProcessWire language. |
Runtime Helpers
| Property | Type | Description |
|---|---|---|
configName | string | JavaScript settings key under ProcessWire.config.Inputfield. |
readonly | bool | Read-only state, set during render-value mode. |
initialized | bool | True after init() has run. |
settings | Inputfield | Defaults and render settings helper. |
configs | Inputfield | Field/module configuration helper. |
tools | Inputfield | JSON, purifier, image-field, link, and paste-filter helper. |
formats | Inputfield | Style format and invalid-style parser helper. |
| Constant | Description |
|---|---|
mceVersion | Bundled TinyMCE version, currently 6.8.2. |
toggleCleanDiv | Convert/remove div markup during save cleanup. |
toggleCleanP | Remove empty paragraph tags. |
toggleCleanNbsp | Convert to regular spaces. |
toggleRemoveStyles | Remove all style attributes. |
defaultPasteFilter | Default paste-filter whitelist string. |
The features array is queried with useFeature($name).
| Feature | Meaning |
|---|---|
toolbar | Show toolbar buttons. |
menubar | Show top menubar. |
statusbar | Show bottom statusbar. |
stickybars | Use sticky toolbar/menubar. |
spellcheck | Enable browser spellcheck. |
purifier | Run HTML Purifier during save/render workflows. |
document | Use document-style content CSS. |
imgUpload | Enable image drag/drop upload when an image field is available. |
imgResize | Allow image resize handles to generate variations. |
pasteFilter | Filter pasted markup through the whitelist. |
inline | Special query name; true when inlineMode > 0. |
if($f->useFeature('purifier')) {
// HTML Purifier is enabled for this editor.
}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.
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();- Set a textarea field's
inputfieldClasstoInputfieldfor normal field usage.Tiny M C E - The editor requires
MarkupHTMLPurifier; ProcessWire declares this module as a requirement. toolbarvalues containing commas are ignored because they look like legacy CKEditor toolbar syntax.invalid_stylessupports global styles likecolorand tag-specific styles likea=background|background-colorortable|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 theextPluginsfield setting. - The bundled TinyMCE directory is
tinymce-6.8.2/.
Source files: wire/modules/Inputfield/Inputfield
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 Inputfield class also inherits all the methods and properties of: InputfieldTextarea, InputfieldText, Inputfield, WireData and Wire.
Common
Properties
| Name | Return | Summary | |
|---|---|---|---|
| Inputfield | string | Name of configuration set to use DEFAULT: blank | |
| Inputfield | string | Basename of content CSS file to use or "custom" to use custom URL DEFAULT: wire | |
| Inputfield | string | Applies only if $content_css has value "custom" | |
| Inputfield | string | Space-separated string of tools to show in context menu | |
| Inputfield | bool int | Makes Inputfield DEFAULT: false | |
| Inputfield | string | Location of optional defaults.json file that merges with defaults.json (URL relative to PW root URL) | |
| Inputfield | string | JSON that merges with the defaults.json for all instances | |
| Inputfield | string | Newline separated URL paths (relative to PW root) of extra plugin .js files | |
| Inputfield | array | Additional plugins to enable for this field (URL paths from customPluginOptions) | |
| Inputfield | array | URLs of external plugins, this is also a TinyMCE setting | |
| Inputfield | string | Extra CSS for editor, applies to all editors (appended to TinyMCE content_style setting) | |
| Inputfield | array | General features: toolbar, menubar, statusbar, stickybars, spellcheck, purifier, imgUpload, imgResize, pasteFilter | |
| Inputfield | array | Allowed headline types | |
| Inputfield | int | Height of editor in pixels | |
| Inputfield | array | Names of fields allowed for drag-drop in images | |
| Inputfield | bool | Is the editor initialized? This is a read-only property. DEFAULT: false | |
| Inputfield | int | Use inline mode? 0=Regular editor, 1=Inline editor, 2=Fixed height inline editor | |
| Inputfield | string | Space-separated string of invalid inline styles | |
| Inputfield | int | Use lazy-loading mode? 0=Off, 1=Lazy, 2=Extra lazy | |
| Inputfield | string | Space-separated list of top-level menubar items | |
| Inputfield | array | Names of optional settings that can be configured per-field | |
| Inputfield | string | Rule string of elements and attributes allowed during filtered paste | |
| Inputfield | string | Space-separated string of plugins to enable | |
| Inputfield | bool | Are we in read-only mode? Automatically set during renderValue mode. This is a read-only property. DEFAULT: false | |
| Inputfield | string | Space-separated string of tools to remove from menubar | |
| Inputfield | string | Alternate field to inherit settings from rather than configure settings with this instance. | |
| Inputfield | string | Location of optional custom-settings.json settings file (URL relative to PW root URL) | |
| Inputfield | string | JSON with custom settings that override the defaults | |
| Inputfield | string | Skin to use DEFAULT: oxide | |
| Inputfield | string | URL to skin | |
| Inputfield | string | Style formats as CSS to parse and apply to style_formats and content_style | |
| Inputfield | array | Markup toggles, see self::toggle* constants | |
| Inputfield | string | Space-separated string of tools to show in toolbar |
Additional methods and properties
In addition to the methods and properties above, Inputfield
API reference based on ProcessWire core version 3.0.269