1388 lines
No EOL
60 KiB
PHP
1388 lines
No EOL
60 KiB
PHP
<?php namespace ProcessWire;
|
||
|
||
/**
|
||
* InputfieldTinyMCEConfigHelper
|
||
*
|
||
* Helper for managing configuration settings in TinyMCE
|
||
*
|
||
* ProcessWire 3.x, Copyright 2023 by Ryan Cramer
|
||
* https://processwire.com
|
||
*
|
||
*/
|
||
class InputfieldTinyMCEConfigs extends InputfieldTinyMCEClass {
|
||
|
||
/**
|
||
* TinyMCE toolbar options
|
||
*
|
||
* Each item in one of the following formats
|
||
* - name=Label
|
||
* - name:required_plugin=Label
|
||
* - name:required_plugin#plugin_anchor=Label
|
||
*
|
||
* Labels adapted from those at https://www.tiny.cloud/docs/tinymce/6/
|
||
*
|
||
* @var string[]
|
||
*
|
||
*/
|
||
protected $mceToolbars = array(
|
||
'aligncenter=Center aligns the current block or image',
|
||
'alignjustify=Full aligns the current block or image',
|
||
'alignleft=Left aligns the current block or image',
|
||
'alignnone=Removes the alignment of the current block or image',
|
||
'alignright=Right alignsOutdents the current list item or block element the current block or image',
|
||
'anchor:anchor#anchor-plugin=Creates/Edits anchor elements',
|
||
'backcolor=Applies background color to selection',
|
||
'blockquote=Applies block quote format to the current block level element',
|
||
'blocks=Dropdown list with block formats to apply to selection',
|
||
'bold=Applies the bold format to the current selection',
|
||
'bullist:list#lists-plugin=Formats the current selection as a bullet list',
|
||
'cancel:save#save-plugin=Cancels/Resets the editor contents to its initial state',
|
||
'code:code#code-plugin=Opens the code dialog',
|
||
'codesample:codesample#code-sample-plugin=Inserts code snippets with syntax highlighting',
|
||
'charmap:charmap=Inserts custom characters into the editor',
|
||
'copy=Copies the current selection into clipboard',
|
||
'cut=Cuts the current selection into clipboard',
|
||
'emoticons:emoticons#emoticons-plugin=Opens the Emojis dialog',
|
||
'fontfamily=Dropdown list with font families to apply to selection',
|
||
'fontsize=Dropdown list with font sizes to apply to selection',
|
||
'forecolor=Applies foreground/text color to selection',
|
||
'fullscreen:fullscreen#full-screen-plugin=Toggles fullscreen mode',
|
||
'h1=Changes current line to the "Heading 1" style',
|
||
'h2=Changes current line to the "Heading 2" style',
|
||
'h3=Changes current line to the "Heading 3" style',
|
||
'h4=Changes current line to the "Heading 4" style',
|
||
'h5=Changes current line to the "Heading 5" style',
|
||
'h6=Changes current line to the "Heading 6" style',
|
||
'help:help#help-plugin=Opens the help dialog',
|
||
'hr=Inserts a horizontal rule into the editor',
|
||
'image:image#image-plugin=Creates/Edits images within the editor [use “pwimage” instead when possible]',
|
||
'indent=Indents the current list item or block element',
|
||
'insertdatetime:insertdatetime#insert-datetime-plugin=Insert date/time',
|
||
'italic=Applies the italic format to the current selection',
|
||
'language=Dropdown list with languages to apply to the selection. This button requires the content_langs option.',
|
||
'lineheight=Dropdown list with line heights to apply to selection',
|
||
'link:link#link-plugin=Creates/Edits links within the editor [use “pwlink” instead when possible]',
|
||
'ltr:directionality#directionality-plugin=Sets the directionality of contents to ltr',
|
||
'media:media#media-plugin=Creates/Edits embedded media elements',
|
||
'nonbreaking:nonbreaking#nonbreaking-space-plugin=Inserts a nonbreaking space into the editor',
|
||
'numlist:list#lists-plugin=Formats the current selection as a numbered list',
|
||
'outdent=Outdents the current list item or block element',
|
||
'openlink:link=Opens the selected link in a new tab',
|
||
//'pagebreak:pagebreak#page-break-plugin=Inserts a pagebreak into the editor',
|
||
'paste=Pastes the current clipboard into the editor',
|
||
'pastetext=Toggles plain text pasting mode on/off. When in plain text mode, all rich content is converted into plain text',
|
||
'preview:preview#preview-plugin=Previews the current editor contents',
|
||
'print=Prints the current editor contents',
|
||
'pwimage:pwimage=Image (ProcessWire)',
|
||
'pwlink:pwlink=Link (ProcessWire)',
|
||
'quickimage:quickbars#quick-toolbars-plugin=Inserts an image from the local machine',
|
||
'quicklink:quickbars#quick-toolbars-plugin=Inserts a link in a quicker way',
|
||
'quicktable:quickbars#quick-toolbars-plugin=Inserts a table 2x2',
|
||
'redo=Redo the last undone operation',
|
||
'remove=Removes (deletes) the selected content or the content before the cursor position',
|
||
'removeformat=Remove formatting from selection',
|
||
//'restoredraft:autosave=Restores to the latest auto saved draft',
|
||
'rtl:directionality#directionality-plugin=Sets the directionality of contents to rtl',
|
||
//'save:save#save-plugin=Saves the current editor contents to a form or ajax call',
|
||
'searchreplace:searchreplace#search-and-replace-plugin=Searches and/or Replaces contents within the editor',
|
||
'selectall=Select all',
|
||
'strikethrough=Strikethrough ',
|
||
'styles=Dropdown list with styles to apply to selection',
|
||
'subscript=Applies subscript format to the current selection',
|
||
'superscript=Applies superscript format to the current selection',
|
||
'table:table#table-plugin=Creates/Edits table elements',
|
||
'template:template#template-plugin=Inserts templates into the editor',
|
||
'underline=Applies the underline format to the current selection',
|
||
'undo=Undo the last operation',
|
||
'unlink:link=Removes links from the current selection',
|
||
'visualaid=Show invisible elements',
|
||
'visualblocks:visualblocks#visual-blocks-plugin=Toggles the visibility of block elements',
|
||
'visualchars:visualchars#visual-characters-plugin=Toggles the visibility of non breaking character elements',
|
||
'wordcount:wordcount#word-count-plugin=Opens a word count dialog showing word and character counts',
|
||
);
|
||
|
||
/**
|
||
* TinyMCE plugin names and descriptions
|
||
*
|
||
* Descriptions adapted from those at https://www.tiny.cloud/docs/tinymce/6/
|
||
*
|
||
* @var string[]
|
||
*
|
||
*/
|
||
protected $mcePlugins = array(
|
||
'advlist' =>
|
||
'Extends the bullist and numlist toolbar controls by adding CSS list-style-type styled number formats and bullet types to the controls. ' .
|
||
'The Lists (lists) plugin must be activated for the advlist plugin to work.',
|
||
'anchor' =>
|
||
'Adds an anchor/bookmark button to the toolbar that inserts an anchor at the editor’s cursor insertion point.',
|
||
'autolink' =>
|
||
'Automatically creates hyperlinks when a user types a valid, complete URL. For example www.example.com is converted to http://www.example.com. ' .
|
||
'Note that this option won’t convert incomplete URLs. For example example.com would remain as unlinked text and URLs must include www to be automatically converted.',
|
||
'autoresize' =>
|
||
'Automatically resizes the editor to the content inside it. ' .
|
||
'It is typically used to prevent the editor from expanding infinitely as a user types into the editable area.',
|
||
// 'autosave' => '',
|
||
'charmap' =>
|
||
'Adds a dialog to the editor with a map of special unicode characters, which cannot be added directly from the keyboard. ' .
|
||
'The dialog can be invoked via a toolbar button - charmap - or a dedicated menu item added as Insert > Special character.',
|
||
'code' =>
|
||
'Adds a toolbar button that allows a user to edit the HTML code hidden by the WYSIWYG view. ' .
|
||
'It also adds the menu item Source code under the Tools menu.',
|
||
'codesample' =>
|
||
'Lets a user insert and embed syntax color highlighted code snippets into the editable area. ' .
|
||
'It also adds a button to the toolbar which on click will open a dialog box to accept raw code input. ', // NOTE: prism.js required
|
||
'directionality' =>
|
||
'Adds directionality controls to the toolbar, enabling TinyMCE to better handle languages written from right to left. ' .
|
||
'It also adds a toolbar button for each of its values, ltr for left-to-right text and rtl for right-to-left text.',
|
||
'emoticons' =>
|
||
'Adds a dialog to the editor that lets users insert emoji into TinyMCE’s editable area. ' .
|
||
'The dialog can be invoked via a toolbar button - emoticons - or a dedicated menu item added as Insert > Emojis... ' .
|
||
'The emoticons plugin provides an autocompleter for adding emoji without using the toolbar button or menu item. ' .
|
||
'Adding a colon “:”, followed by at least two characters will open a popup collection showing matching emoji.',
|
||
'fullscreen' =>
|
||
'Adds full screen editing capabilities to TinyMCE. ' .
|
||
'When the toolbar button is pressed the editable area will fill the browser’s viewport. ' .
|
||
'The plugin adds a toolbar button and a menu item Fullscreen under the View menu. ' .
|
||
'Full screen mode can be toggled using Cmd+Shift+F on Mac or Ctrl+Shift+F on Windows or Linux.',
|
||
'help' =>
|
||
'Adds a button and/or menu item that opens a dialog showing two tabs: ' .
|
||
'1) Handy shortcuts that explains some nice-to-know keyboard shortcuts; ' .
|
||
'2) List that shows which plugins that have been installed, with links to the doc pages when available.',
|
||
'image' =>
|
||
'Enables the user to insert an image into TinyMCE’s editable area. ' .
|
||
'Also adds a toolbar button and an Insert/edit image menu item under the Insert menu.',
|
||
/*
|
||
'importcss' =>
|
||
'Adds the ability to automatically import CSS classes from the CSS file specified in the content_css configuration setting.',
|
||
*/
|
||
'insertdatetime' =>
|
||
'Provides a toolbar control and menu item Insert date/time (under the Insert menu) ' .
|
||
'that lets a user easily insert the current date and/or time into the editable area at the cursor insertion point.',
|
||
'link' =>
|
||
'Allows a user to link external resources such as website URLs, to selected text in their document.',
|
||
'lists' =>
|
||
'Allows you to add numbered and bulleted lists to TinyMCE. ' .
|
||
'To enable advanced lists (e.g. alpha numbered lists, square bullets) you should also enable the Advanced List (advlist) plugin. ' .
|
||
'Also normalizes list behavior between browsers. Enable it if you have problems with consistency making lists.',
|
||
'media' =>
|
||
'Provides users with the ability to add HTML5 video and audio elements to the editable area. ' .
|
||
'It also adds the Insert/edit video menu item under the Insert menu and adds an Insert/edit video toolbar button.',
|
||
'nonbreaking' =>
|
||
'Adds a button for inserting nonbreaking space entities [code] [/code] at the current caret location (cursor insert point). ' .
|
||
'It also adds a menu item Nonbreaking space under the Insert menu dropdown and a toolbar button.',
|
||
/*
|
||
'pagebreak' =>
|
||
'This plugin adds page break support and enables a user to insert page breaks in the editable area. ' .
|
||
'This is useful where a CMS uses a special separator to break content into pages. ' .
|
||
'It also adds a toolbar button and a menu item Page break under the Insert menu dropdown.',
|
||
*/
|
||
'preview' =>
|
||
'Adds a preview button to the toolbar. ' .
|
||
'Pressing the button opens a dialog box showing the current content in a preview mode. ' .
|
||
'It also adds a menu item Preview under the File and View menu dropdowns.',
|
||
'pwimage' =>
|
||
'ProcessWire image plugin, required for inserting and editing images within TinyMCE and the ProcessWire environment. ' .
|
||
'Makes the pwimage toolbar option available. Requires the page editor.',
|
||
'pwlink' =>
|
||
'ProcessWire link plugin, required for inserting and editing links within TinyMCE and the ProcessWire environment. ' .
|
||
'We recommend also enabling the TinyMCE “link” plugin and using “pwlink” and “unlink” in your toolbar.',
|
||
'quickbars' =>
|
||
'Adds three context toolbars: ' .
|
||
'1) quick selection, shown when text is selected, providing formatting buttons such as bold, italic, and link; ' .
|
||
'2) quick insert, shown when a new line is added, providing buttons for inserting objects such as tables and images; ' .
|
||
'3) quick image, shown when an image or figure is selected, providing image formatting buttons such as alignment options. ' .
|
||
'Also makes 3 toolbar buttons available: quicklink, quickimage, quicktable.',
|
||
/*
|
||
'save '=>
|
||
'This plugin adds a save button to the TinyMCE toolbar, which will submit the form that the editor is within.',
|
||
*/
|
||
'searchreplace' =>
|
||
'Adds search/replace dialogs to TinyMCE. ' .
|
||
'It also adds a toolbar button and the menu item Find and replace under the Edit menu dropdown.',
|
||
'table' =>
|
||
'Adds table management functionality to TinyMCE, including dialogs, context menus, context toolbars, menu items, and toolbar buttons.',
|
||
'template' =>
|
||
'Adds support for custom templates. ' .
|
||
'It also adds a menu item Insert template under the Insert menu and a toolbar button.',
|
||
'visualblocks' =>
|
||
'Allows a user to see block level elements in the editable area. ' .
|
||
'It is similar to WYSIWYG hidden character functionality, but at block level. ' .
|
||
'It also adds a toolbar button and a menu item Show blocks under the View menu dropdown.',
|
||
'visualchars' =>
|
||
'Adds the ability to see invisible characters like [code] [/code] displayed in the editable area. ' .
|
||
'It also adds a toolbar control and a menu item Show invisible characters under the View menu.',
|
||
'wordcount' =>
|
||
'Adds the functionality for counting words to the TinyMCE editor by placing a counter on the right edge of the status bar. ' .
|
||
'Clicking Word Count in the status bar switches between counting words and characters. ' .
|
||
'A dialog box with both word and character counts can be opened using the menu item situated in the Tools drop-down, or the toolbar button.',
|
||
);
|
||
|
||
/**
|
||
* Get shared text label
|
||
*
|
||
* @param string $name
|
||
* @return string
|
||
*
|
||
*/
|
||
public function label($name) {
|
||
switch($name) {
|
||
case 'example': return $this->_('Example:') . ' ';
|
||
case 'default': return $this->_('Default:') . ' ';
|
||
case 'useDefault': return $this->_('Specify `default` to use the default value.');
|
||
case 'custom': return $this->_('custom');
|
||
case 'text': return $this->_('text');
|
||
case 'file': return $this->_('file');
|
||
case 'tinymce': return $this->_('TinyMCE');
|
||
case 'more': return $this->_('More');
|
||
case 'details': return $this->_('Details');
|
||
}
|
||
return $name;
|
||
}
|
||
|
||
/**
|
||
* Get TinyMCE toolbar names and details
|
||
*
|
||
* Returns array of arrays or array of strings
|
||
*
|
||
* @param bool $splitToArray Specify false to return array of strings
|
||
* @return array|string[]
|
||
*
|
||
*/
|
||
public function getMceToolbars($splitToArray = true) {
|
||
if(!$splitToArray) return $this->mceToolbars;
|
||
$detailsUrl = 'https://www.tiny.cloud/docs/tinymce/6/available-toolbar-buttons/';
|
||
$coreLinkId = '#the-core-toolbar-buttons';
|
||
$a = array();
|
||
foreach($this->mceToolbars as $item) {
|
||
$plugin = '';
|
||
if(strpos($item, '=')) {
|
||
list($name, $label) = explode('=', $item, 2);
|
||
} else {
|
||
$name = $item;
|
||
$label = $name;
|
||
}
|
||
if(strpos($name, '#')) {
|
||
list($name, $url) = explode('#', $name, 2);
|
||
$url = $detailsUrl . '#' . $url;
|
||
} else {
|
||
$url = $detailsUrl . $coreLinkId;
|
||
}
|
||
if(strpos($name, ':')) {
|
||
list($name, $plugin) = explode(':', $name, 2);
|
||
}
|
||
|
||
$a[$name] = array(
|
||
'name' => $name,
|
||
'label' => $label,
|
||
'plugin' => $plugin,
|
||
'url' => $url,
|
||
);
|
||
}
|
||
return $a;
|
||
}
|
||
|
||
/**
|
||
* Get skin options (array of name => label)
|
||
*
|
||
* @return string[]
|
||
*
|
||
*/
|
||
public function getSkinOptions() {
|
||
$skins = array(
|
||
'tinymce-5' => 'five',
|
||
'tinymce-5-dark' => 'five-dark',
|
||
);
|
||
$path = $this->inputfield->mcePath() . 'skins/ui/';
|
||
foreach(new \DirectoryIterator($path) as $dir) {
|
||
if(!$dir->isDir() || $dir->isDot()) continue;
|
||
$name = $dir->getBasename();
|
||
if(!isset($skins[$name])) $skins[$name] = $name;
|
||
}
|
||
return $skins;
|
||
}
|
||
|
||
/**
|
||
* Get content_css options (array of name=label)
|
||
* @return string[]
|
||
*
|
||
*/
|
||
public function getContentCssOptions() {
|
||
$path = $this->wire()->config->paths($this->inputfield) . 'content_css/';
|
||
$options = array(
|
||
'wire' => 'wire',
|
||
'wire-dark' => 'wire-dark',
|
||
);
|
||
foreach(new \DirectoryIterator($path) as $file) {
|
||
if($file->isDir() || $file->isDot()) continue;
|
||
if($file->getExtension() !== 'css') continue;
|
||
$name = $file->getBasename('.css');
|
||
if(!isset($options[$name])) $options[$name] = $name;
|
||
}
|
||
return $options;
|
||
}
|
||
|
||
/**
|
||
* Get features options
|
||
*
|
||
* @return array[]
|
||
*
|
||
*/
|
||
public function getFeaturesOptions() {
|
||
return array(
|
||
'toolbar' => array(
|
||
'label' => $this->_('Toolbar'),
|
||
'description' =>
|
||
$this->_('Enables the toolbar of icons that provide access most of the rich text editing tools.')
|
||
),
|
||
'menubar' => array(
|
||
'label' => $this->_('Menubar'),
|
||
'description' =>
|
||
$this->_('Enables a separate menubar with drop down menus and text labels, and appears above the toolbar.') . ' ' .
|
||
$this->_('This can optionally be used in addition to, or instead of, the toolbar.')
|
||
),
|
||
/*
|
||
'statusbar' => array(
|
||
'label' => $this->_('Statusbar'),
|
||
'description' =>
|
||
$this->_('The status bar appears at the bottom of the editor and shows the current element, clickable parents and editor resize control.') . ' ' .
|
||
$this->_('It also shows a word count when the wordcount plugin is enabled.') . ' ' .
|
||
$this->_('Required for regular editor, optional for inline editor.')
|
||
),
|
||
*/
|
||
'stickybars' => array(
|
||
'label' => $this->_('Stickybars'),
|
||
'description' =>
|
||
$this->_('Docks the toolbar and menubar to the top of the screen when scrolling until the editor is no longer visible.')
|
||
),
|
||
'spellcheck' => array(
|
||
'label' => $this->_('Spellcheck'),
|
||
'description' =>
|
||
$this->_('The browser spellcheck feature underlines (in red) misspelled or unrecognized words as you type.')
|
||
),
|
||
'purifier' => array(
|
||
'label' => $this->_('Purifier'),
|
||
'description' =>
|
||
sprintf($this->_('Purifies input HTML/markup with [htmlpurifier](%s).'), 'https://github.com/ezyang/htmlpurifier/blob/master/README.md') . ' ' .
|
||
$this->_('Helps to prevent saving potentially dangerous HTML and avoid XSS exploits.') . ' ' .
|
||
$this->_('Though does increase potential to interfere with some intended markup.') . ' ' .
|
||
$this->_('Enabling this is strongly recommended unless all current and future users are trusted explicitly.') . ' ' .
|
||
$this->_('Disable at your own risk.')
|
||
),
|
||
'document' => array(
|
||
'label' => $this->_('Document'),
|
||
'description' =>
|
||
$this->_('Override the editor default content style to use the document content style.') . ' ' .
|
||
$this->_('This looks like a sheet of paper, similar to how it might appear in a word processor.')
|
||
),
|
||
'imgUpload' => array(
|
||
'label' => $this->_('ImgUpload'),
|
||
'description' =>
|
||
$this->_('Enables images to be uploaded automatically by dragging and dropping them into the editor.') . ' ' .
|
||
$this->_('Requires that the page being edited has an images field on it.')
|
||
),
|
||
'imgResize' => array(
|
||
'label' => $this->_('Resize'),
|
||
'description' =>
|
||
$this->_('Creates optimized image files automatically when images are resized by dragging their resize handles.') . ' ' .
|
||
$this->_('If not enabled, images can still be resized by dragging their resize handles, but new image files are not generated.') . ' ' .
|
||
$this->_('You can also use the pop-up image dialog to create image sizes and crops either way.')
|
||
),
|
||
'pasteFilter' => array(
|
||
'label' => $this->_('Pastefilter'),
|
||
'description' =>
|
||
$this->_('Reduces most pasted content to its basic semantic HTML to avoid messy tags and attributes from ending up in the editor due to a paste operation.') . ' ' .
|
||
$this->_('Allowed elements and attributes are configurable in the InputfieldTinyMCE module settings.') . ' ' .
|
||
$this->_('Pastefilter is only applied to content copied externally, from outside the TinyMCE field.')
|
||
|
||
),
|
||
);
|
||
|
||
}
|
||
|
||
/**
|
||
* Get field configuration
|
||
*
|
||
* @param InputfieldWrapper $inputfields
|
||
* @return InputfieldFieldset
|
||
*
|
||
*/
|
||
public function getConfigInputfields(InputfieldWrapper $inputfields) {
|
||
|
||
$config = $this->wire()->config;
|
||
$modules = $this->wire()->modules;
|
||
|
||
$defaults = $this->settings()->getDefaults();
|
||
$defaultLabel = $this->label('default');
|
||
$exampleLabel = $this->label('example');
|
||
$isPost = $this->wire()->input->requestMethod('POST');
|
||
$settingsFields = $this->getOtherTinyMCEFields();
|
||
$configurable = $this->inputfield->configurable();
|
||
$field = $this->inputfield->hasField;
|
||
$inContext = $field && ($field->flags & Field::flagFieldgroupContext);
|
||
|
||
/** @var InputfieldFieldset $fieldset */
|
||
$fieldset = $modules->get('InputfieldFieldset');
|
||
$fieldset->attr('name', '_tinymce');
|
||
$fieldset->label = $this->_('TinyMCE editor settings');
|
||
$fieldset->icon = 'keyboard-o';
|
||
$fieldset->themeOffset = 1;
|
||
$inputfields->prepend($fieldset);
|
||
|
||
if(count($settingsFields) || !$configurable) {
|
||
$f = $fieldset->InputfieldSelect;
|
||
$f->attr('name', 'settingsField');
|
||
$f->label = $this->_('Field to inherit TinyMCE settings from');
|
||
$f->icon = 'cube';
|
||
$f->themeOffset = 1;
|
||
$fieldset->add($f);
|
||
if(count($settingsFields)) {
|
||
$f->description = $this->_('If you select a field here, we will use the settings from the selected field rather than those configured here.');
|
||
$f->notes = $this->_('After changing your selection please Save before making more changes, as it will modify what fields appear below this.');
|
||
$f->addOption('', $this->_('None (configure this field here)'));
|
||
$f->collapsed = Inputfield::collapsedBlank;
|
||
foreach($settingsFields as $field) {
|
||
/** @var Field $field */
|
||
$f->addOption($field->name, $field->getLabel() . " ($field->name)");
|
||
}
|
||
$value = $this->inputfield->settingsField;
|
||
$f->val($value);
|
||
if($value) return $fieldset;
|
||
} else {
|
||
$f->description =
|
||
$this->_('This field requires an existing TinyMCE field to use the settings from, and there are currently no other TinyMCE fields.') . ' ' .
|
||
$this->_('Please create a ProcessWire field of type “textarea”, select TinyMCE as the Inputfield type, and configure it.') . ' ' .
|
||
$this->_('Then return here to select that field to use for this field’s settings.');
|
||
$f->icon = 'warning';
|
||
$f->addOption('', $this->_('None available'));
|
||
}
|
||
if(!$configurable) {
|
||
$f->notes = trim("$f->notes " . $this->_('If no selection is made, the default settings will be used.'));
|
||
}
|
||
}
|
||
|
||
if(!$configurable) return $fieldset;
|
||
|
||
$inlineLabel = $this->_('Inline editor');
|
||
$regularLabel = $this->_('Normal editor');
|
||
|
||
$f = $fieldset->InputfieldRadios;
|
||
$f->attr('name', 'inlineMode');
|
||
$f->label = $this->_('Editor mode');
|
||
$f->icon = 'map-signs';
|
||
$f->addOption(0, $regularLabel . ' [span.detail] ' . $this->_('(flexible height, user resizable)') . ' [/span]');
|
||
$f->addOption(1, $inlineLabel . ' [span.detail] ' . $this->_('(variable height that matches content)') . ' [/span]');
|
||
$f->addOption(2, $inlineLabel . ' [span.detail] ' . $this->_('(fixed height that uses height setting)') . ' [/span]');
|
||
$f->attr('value', (int) $this->inputfield->inlineMode);
|
||
$f->description =
|
||
$this->_('When the inline editor is used, the editor will not be loaded (or have its toolbar visible) until you click in the text.') . ' ' .
|
||
$this->_('When the normal editor is used, you can optionally select a lazy loading option below.') . ' ' .
|
||
$this->_('The normal editor includes a status bar and resize handle while the inline editor does not.');
|
||
$f->themeOffset = 1;
|
||
$f->columnWidth = 70;
|
||
$fieldset->add($f);
|
||
|
||
$f = $fieldset->InputfieldInteger;
|
||
$f->attr('name', 'height');
|
||
$f->label = $this->_('Editor height');
|
||
$f->description = $this->_('Enter the initial editor height in pixels.');
|
||
$f->val($this->inputfield->height);
|
||
$f->columnWidth = 30;
|
||
$f->icon = 'arrows-v';
|
||
if(!$inContext) $f->showIf = 'inlineMode!=1';
|
||
$f->inputType = 'number';
|
||
$f->appendMarkup = " <span class='detail'>px</span>";
|
||
$fieldset->add($f);
|
||
|
||
$f = $fieldset->InputfieldRadios;
|
||
$f->attr('name', 'lazyMode');
|
||
$f->label = $this->_('When to load and initialize the normal editor?');
|
||
$f->description = $this->_('Using lazy loading can significantly improve performance, especially when there are multiple editors on the same page.');
|
||
$f->icon = 'clock-o';
|
||
$offLabel = '[span.detail] (' . $this->_('lazy loading off') . ') [/span]';
|
||
$f->addOption(0, $this->_('Load editor when the page loads') . " $offLabel");
|
||
$f->addOption(1, $this->_('Load editor when it becomes visible'));
|
||
$f->addOption(2, $this->_('Load editor when it is clicked'));
|
||
$f->val((int) $this->inputfield->lazyMode);
|
||
$f->showIf = 'inlineMode=0';
|
||
$f->themeOffset = 1;
|
||
$fieldset->add($f);
|
||
|
||
$f = $fieldset->InputfieldCheckboxes;
|
||
$f->attr('name', 'features');
|
||
$f->label = $this->_('Features');
|
||
$f->icon = 'toggle-on';
|
||
$f->table = true;
|
||
$f->textFormat = Inputfield::textFormatBasic;
|
||
$f->themeOffset = 1;
|
||
foreach($this->getFeaturesOptions() as $name => $info) {
|
||
$f->addOption($name, "**$info[label]** | $info[description]");
|
||
}
|
||
$f->val($this->inputfield->features);
|
||
$fieldset->add($f);
|
||
|
||
/*
|
||
$f = $fieldset->InputfieldTextarea;
|
||
$f->attr('name', 'toolbar');
|
||
$f->label = $this->_('Toolbar');
|
||
$f->description =
|
||
$this->_('Enter the names of tools to use in the toolbar, each separated by a space.') . ' ' .
|
||
$this->_('For a separator between tools use a “|” pipe character.');
|
||
$f->showIf = 'features=toolbar';
|
||
$f->icon = 'wrench';
|
||
$f->val($this->inputfield->toolbar);
|
||
$f->textFormat = Inputfield::textFormatMarkdown;
|
||
$f->rows = 3;
|
||
$f->themeOffset = 1;
|
||
$notes = array();
|
||
$mceToolbars = $this->getMceToolbars(true);
|
||
$toolsByPlugin = array();
|
||
foreach($mceToolbars as $name => $item) {
|
||
$label = $item['label'];
|
||
if($item['plugin']) {
|
||
$label .= " (" . sprintf($this->_('requires “%s” plugin'), $item['plugin']) . ')';
|
||
if(!isset($toolsByPlugin[$item['plugin']])) $toolsByPlugin[$item['plugin']] = array();
|
||
$toolsByPlugin[$item['plugin']][] = $name;
|
||
}
|
||
$label = htmlspecialchars($label, ENT_QUOTES, 'UTF-8');
|
||
$notes[] = "<a class='pw-tooltip' href='$item[url]' target='_blank' rel='nofollow noopener' title='$label'>$name</a>";
|
||
}
|
||
$f->notes =
|
||
'<span class="detail">' . $this->_('Toolbar options:') . '</span><br />' . implode(', ', $notes) . '<br /><br />' .
|
||
'<span class="detail">' . $this->_('Default toolbar:') . '</span><br />' . "$defaults[toolbar]";
|
||
$fieldset->add($f);
|
||
*/
|
||
|
||
$f = $fieldset->InputfieldTextTags;
|
||
$f->attr('name', 'toolbar');
|
||
$f->label = $this->_('Toolbar');
|
||
$f->description =
|
||
$this->_('Select or type the names of tools to use in the editor toolbar.') . ' ' .
|
||
$this->_('When adding new tools note that some tools require you to enable plugins further in these settings.') . ' ' .
|
||
$this->_('Hover (or click) the linked tool names at the bottom of this field for more details on each tool, including any required plugins.');
|
||
if(!$inContext) $f->showIf = 'features=toolbar';
|
||
$f->icon = 'wrench';
|
||
$f->textFormat = Inputfield::textFormatMarkdown;
|
||
$f->allowUserTags = true;
|
||
$f->themeOffset = 1;
|
||
$notes = array();
|
||
$mceToolbars = $this->getMceToolbars(true);
|
||
$toolsByPlugin = array();
|
||
foreach($mceToolbars as $name => $item) {
|
||
$label = $item['label'];
|
||
$f->addTag($name);
|
||
if($item['plugin']) {
|
||
$label .= " (" . sprintf($this->_('requires “%s” plugin'), $item['plugin']) . ')';
|
||
if(!isset($toolsByPlugin[$item['plugin']])) $toolsByPlugin[$item['plugin']] = array();
|
||
$toolsByPlugin[$item['plugin']][] = $name;
|
||
}
|
||
$label = htmlspecialchars($label, ENT_QUOTES, 'UTF-8');
|
||
$notes[] = "<a class='pw-tooltip' href='$item[url]' target='_blank' rel='nofollow noopener' title='$label'>$name</a>";
|
||
}
|
||
$f->val($this->inputfield->toolbar);
|
||
$f->notes =
|
||
'<span class="detail">' . $this->_('Toolbar details:') . '</span><br />' . implode(', ', $notes) . '<br /><br />' .
|
||
'<span class="detail">' . $this->_('Default toolbar:') . '</span><br />' . "$defaults[toolbar]";
|
||
$fieldset->add($f);
|
||
|
||
|
||
$f = $fieldset->InputfieldCheckboxes;
|
||
$f->attr('name', 'plugins');
|
||
$f->label = $this->_('Plugins');
|
||
$f->description = $this->_('Select the plugins you want to enable. Many plugins enable specific tools that you can add to your toolbar above.');
|
||
$f->icon = 'plug';
|
||
$f->table = true;
|
||
$f->thead =
|
||
$this->_('Plugin') . '|' .
|
||
$this->_('Description') . '|' .
|
||
$this->_('Tools');
|
||
$f->textFormat = Inputfield::textFormatBasic;
|
||
$f->themeOffset = 1;
|
||
$moreLabel = strtoupper($this->_('MORE'));
|
||
if($this->inputfield->hasFieldtype) {
|
||
$notes = array(
|
||
'image' => 'For page editing in ProcessWire, you should use the “pwimage” plugin instead (and leave this unchecked).',
|
||
'link' => 'We also recommend enabling the “pwlink” plugin as well (both checked).',
|
||
'pwlink' => 'Should be combined with the “link” plugin.',
|
||
);
|
||
} else {
|
||
$notes = array(
|
||
'pwlink' => 'Recommended only for ProcessWire admin environment use.',
|
||
'pwimage' => 'For use in ProcessWire’s page editor only. Use the regular “image” plugin for other cases.',
|
||
);
|
||
}
|
||
$notes['fullscreen'] = 'Applies to Regular editor mode only, does NOT appear in INLINE mode.';
|
||
foreach($this->mcePlugins as $name => $description) {
|
||
$description = htmlspecialchars($description, ENT_QUOTES, 'UTF-8');
|
||
$more = "[small] [$moreLabel](https://www.tiny.cloud/docs/tinymce/6/$name/) [/small]";
|
||
$note = isset($notes[$name]) ? '[br][span.detail]NOTE: ' . $notes[$name] . '[/span]': '';
|
||
$toolbars = ' ';
|
||
if(isset($toolsByPlugin[$name])) $toolbars = '[span.notes]' . implode('[br]', $toolsByPlugin[$name]) . '[/span]';
|
||
if(strpos($name, 'pw') === 0) $more = '';
|
||
$f->addOption($name, "**$name**|$description $more $note|$toolbars");
|
||
}
|
||
$f->val(explode(' ', $this->inputfield->plugins));
|
||
$f->notes = $defaultLabel . $defaults['plugins'];
|
||
$fieldset->add($f);
|
||
|
||
/*
|
||
$f = $inputfields->getChildByName('rows');
|
||
if($f) {
|
||
$f->getParent()->remove($f);
|
||
$f->description .= ' ' . $this->_('This is what determines the initial height of the editor.');
|
||
$fieldset->add($f);
|
||
}
|
||
*/
|
||
|
||
// external plugins
|
||
$opts = trim((string) $this->inputfield->extPluginOpts);
|
||
$opts = strlen($opts) ? explode("\n", $opts) : array();
|
||
$f = $fieldset->InputfieldCheckboxes;
|
||
$f->attr('name', 'extPlugins');
|
||
$f->label = $this->_('External plugins to enable');
|
||
$f->description = $this->_('External plugins can be added from this module’s settings and then enabled for this field here.');
|
||
$f->icon = 'plug';
|
||
if(count($opts)) {
|
||
foreach($opts as $file) {
|
||
$file = trim("$file");
|
||
$f->addOption($file, basename($file, '.js'));
|
||
}
|
||
$f->val($this->inputfield->extPlugins);
|
||
} else {
|
||
$f->addOption('none', $this->_('There are currently no external plugins to enable'), array('disabled' => 'disabled'));
|
||
}
|
||
$f->collapsed = count($opts) ? Inputfield::collapsedNo : Inputfield::collapsedBlank;
|
||
$fieldset->add($f);
|
||
|
||
$optionals = $this->inputfield->optionals;
|
||
if(in_array('headlines', $optionals)) {
|
||
$fieldset->add($this->configHeadlines());
|
||
}
|
||
if(in_array('contextmenu', $optionals)) {
|
||
$fieldset->add($this->configContextmenu($defaults['contextmenu']));
|
||
}
|
||
if(in_array('menubar', $optionals)) {
|
||
$f = $this->configMenubar($defaults['menubar']);
|
||
if(!$inContext) $f->showIf = 'features=menubar';
|
||
$fieldset->add($f);
|
||
}
|
||
if(in_array('removed_menuitems', $optionals)) {
|
||
$f = $this->configRemovedMenuitems($defaults['removed_menuitems']);
|
||
if(!$inContext) $f->showIf = 'features=menubar';
|
||
$fieldset->add($f);
|
||
}
|
||
if(in_array('styleFormatsCSS', $optionals)) {
|
||
$fieldset->add($this->configStyleFormatsCSS());
|
||
}
|
||
if(in_array('invalid_styles', $optionals)) {
|
||
$fieldset->add($this->configInvalidStyles($defaults['invalid_styles']));
|
||
}
|
||
if(in_array('imageFields', $optionals)) {
|
||
$f = $this->configImageFields();
|
||
if(!$inContext) $f->showIf = 'features=imgUpload';
|
||
$fieldset->add($f);
|
||
}
|
||
|
||
// identify which settings are being modified by "add_" or "replace_" module settings
|
||
$addDefaults = $this->settings()->getAddDefaults();
|
||
if(count($addDefaults)) {
|
||
foreach($fieldset->children() as $f) {
|
||
$key = $f->name;
|
||
if($key === 'headlines') $key = 'block_formats';
|
||
if($key === 'inlineMode') $key = 'inline';
|
||
if(isset($addDefaults['replace_' . $key])) {
|
||
$warning = wireIconMarkup('warning') . ' ' . $this->_('Warning: this setting is being overridden by a module JSON setting.') ;
|
||
$f->prependMarkup .= "<p class='ui-state-error-text'>$warning</p>";
|
||
}
|
||
if(isset($addDefaults['add_' . $key]) || isset($addDefaults['append_' . $key])) {
|
||
$f->appendMarkup = trim("$f->appendMarkup\n" .
|
||
"<p><span class='notes'>" . wireIconMarkup('info-circle') . ' ' .
|
||
$this->_('This setting is currently being appended to by a module JSON setting.') .
|
||
'</span></p>'
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
$f = $fieldset->InputfieldCheckboxes;
|
||
$f->attr('name', 'toggles');
|
||
$f->label = $this->_('Markup toggles');
|
||
$f->description = $this->_('Controls adjustments made to markup during input processing.');
|
||
$f->icon = 'html5';
|
||
$f->addOption(InputfieldTinyMCE::toggleCleanDiv, $this->_('Convert `<div>` tags to `<p>` tags on save?'));
|
||
$f->addOption(InputfieldTinyMCE::toggleCleanP, $this->_('Remove empty `<p>` tags on save?'));
|
||
$f->addOption(InputfieldTinyMCE::toggleCleanNbsp, $this->_('Remove non-breaking spaces on save?'));
|
||
$f->attr('value', $this->inputfield->toggles);
|
||
$f->collapsed = Inputfield::collapsedYes;
|
||
$f->themeOffset = 1;
|
||
$fieldset->add($f);
|
||
|
||
if(in_array('settingsJSON', $optionals)) {
|
||
$fs = $fieldset->InputfieldFieldset;
|
||
$fs->attr('name', '_settingsJSON');
|
||
$fs->label = $this->_('Custom settings JSON');
|
||
$fs->icon = 'code';
|
||
$fs->themeColor = 'secondary';
|
||
$fs->themeOffset = 1;
|
||
$fieldset->add($fs);
|
||
|
||
$f1 = $fieldset->InputfieldTextarea;
|
||
$f1->attr('name', 'settingsJSON');
|
||
$f1->label = $this->_('JSON text');
|
||
$f1->icon = 'terminal';
|
||
$f1->description = $this->_('Enter JSON of any additional custom settings you’d like to add that are not indicated in the settings above.');
|
||
$f1->collapsed = Inputfield::collapsedBlank;
|
||
$f1->notes = $exampleLabel . '`{ "invalid_styles": "color font-size font-family line-height" }`';
|
||
$value = $this->inputfield->settingsJSON;
|
||
$f1->val($value);
|
||
if($value && !$isPost) {
|
||
$this->tools()->jsonDecode($value, $f1->label); // test decode
|
||
}
|
||
$fs->add($f1);
|
||
|
||
$f2 = $fieldset->InputfieldURL;
|
||
$f2->attr('name', 'settingsFile');
|
||
$f2->label = 'JSON file';
|
||
$f2->icon = 'file-code-o';
|
||
$f2->description =
|
||
$this->_('Enter the path to a custom settings JSON file relative to the ProcessWire installation root directory.') . ' ' .
|
||
$this->_('Use this to specify custom settings beyond those supported above.');
|
||
$f2->attr('placeholder', '/dir/to/custom-settings.json');
|
||
$exampleUrl = $config->urls($this->inputfield) . 'defaults.json';
|
||
$f2->notes =
|
||
sprintf($this->_('See an example settings JSON file here: [defaults.json](%s).'), $exampleUrl);
|
||
$f2->collapsed = Inputfield::collapsedBlank;
|
||
$value = $this->inputfield->settingsFile;
|
||
$f2->val($value);
|
||
if($value && !$isPost) {
|
||
$value = $config->paths->root . ltrim($value, '/');
|
||
$this->tools()->jsonDecodeFile($value, $f2->label); // test decode
|
||
}
|
||
$fs->add($f2);
|
||
|
||
if(!$f1->val() && !$f2->val()) $fs->collapsed = Inputfield::collapsedYes;
|
||
}
|
||
|
||
return $fieldset;
|
||
}
|
||
|
||
/**
|
||
* Module configuration
|
||
*
|
||
* @param InputfieldWrapper $inputfields
|
||
*
|
||
*/
|
||
public function getModuleConfigInputfields(InputfieldWrapper $inputfields) {
|
||
|
||
$languages = $this->wire()->languages;
|
||
$config = $this->wire()->config;
|
||
$relativeLabel = $this->_('URL should be relative to ProcessWire installation root.');
|
||
$exampleLabel = $this->label('example');
|
||
$customLabel = $this->label('custom');
|
||
$isPost = $this->wire()->input->requestMethod('POST');
|
||
|
||
$fieldset = $inputfields->InputfieldFieldset;
|
||
$fieldset->label = $this->_('TinyMCE');
|
||
$fieldset->icon = 'keyboard-o';
|
||
$fieldset->attr('name', '_tinymce');
|
||
$inputfields->add($fieldset);
|
||
|
||
$label = $this->_('UI style/skin');
|
||
$icon = 'paint-brush';
|
||
$f = $inputfields->InputfieldRadios;
|
||
$f->attr('name', 'skin');
|
||
$f->label = $label;
|
||
$f->description = $this->_('Select the style to use for the toolbar, menubar, statusbar, etc.');
|
||
$f->notes = $this->_('Not all UI and content style combinations necessarily work well together, so test.');
|
||
$f->optionColumns = 1;
|
||
$f->addOptions($this->getSkinOptions());
|
||
$f->addOption('custom', $customLabel);
|
||
$f->val($this->inputfield->skin);
|
||
$f->icon = $icon;
|
||
//$f->themeOffset = 1;
|
||
$fieldset->add($f);
|
||
|
||
$f = $inputfields->InputfieldURL;
|
||
$f->attr('name', 'skin_url');
|
||
$f->label = "$label ($customLabel)";
|
||
$f->description =
|
||
$this->_('Enter a URL/path to a directory containing your custom skin.') . ' ' .
|
||
$this->_('This is the directory containing a `skin.css` file and other css files.') . ' ' .
|
||
$relativeLabel;
|
||
$f->placeholder = $exampleLabel . '/site/templates/myskin/';
|
||
$f->notes = sprintf($this->_('You can use the [TinyMCE 5 skin tool](%s) which also works with TinyMCE 6.'), 'https://skin.tiny.cloud/t5/');
|
||
$f->val($this->inputfield->skin_url);
|
||
$f->showIf = 'skin=custom';
|
||
$f->icon = $icon;
|
||
//$f->themeOffset = 1;
|
||
$fieldset->add($f);
|
||
|
||
$label = $this->_('Content style');
|
||
$icon = 'css3';
|
||
$f = $inputfields->InputfieldRadios;
|
||
$f->attr('name', 'content_css');
|
||
$f->label = $label;
|
||
$f->description = $this->_('Select the style to use for the editor text/markup that you edit.');
|
||
$f->addOptions($this->getContentCssOptions());
|
||
$f->addOption('custom', $customLabel);
|
||
$f->optionColumns = 1;
|
||
$f->val($this->inputfield->content_css);
|
||
$f->icon = $icon;
|
||
//$f->themeOffset = 1;
|
||
$fieldset->add($f);
|
||
|
||
$f = $inputfields->InputfieldURL;
|
||
$f->attr('name', 'content_css_url');
|
||
$f->label = "$label ($customLabel)";
|
||
$f->description = $this->_('Enter a URL/path to a custom content CSS file.') . ' ' . $relativeLabel;
|
||
$examplesUrl = 'https://github.com/ryancramerdesign/InputfieldTinyMCE/tree/master/content_css';
|
||
$f->notes = sprintf(
|
||
$this->_('Examples can be found in %s.'),
|
||
"[" . $config->urls($this->inputfield) . "content_css/]($examplesUrl)"
|
||
);
|
||
$f->val($this->inputfield->content_css_url);
|
||
$f->showIf = 'content_css=custom';
|
||
$f->attr('placeholder', $exampleLabel . '/site/templates/styles/mycontent.css');
|
||
$f->icon = $icon;
|
||
$fieldset->add($f);
|
||
|
||
$f = $inputfields->InputfieldTextarea;
|
||
$f->attr('name', 'extPluginOpts');
|
||
$f->label = $this->_('External plugin files');
|
||
$f->icon = 'plug';
|
||
$f->rows = 3;
|
||
$f->description =
|
||
$this->_('Use this for making custom/external plugins available to your TinyMCE fields.') . ' ' .
|
||
$this->_('Enter newline-separated URLs to .js files relative to the ProcessWire installation root.') . ' ' .
|
||
$this->_('Once plugins are populated here, you will also have to enable them for any fields where you want them.');
|
||
$f->detail =
|
||
$this->_('Adding or removing plugin from the API:') . "\n" .
|
||
'`' .
|
||
'$tinymce = $modules->get("InputfieldTinyMCE");' . "\n" .
|
||
'$tinymce->addPlugin("/site/modules/MyModule/myplugin.js");' . "\n" .
|
||
'$tinymce->removePlugin("/site/modules/MyModule/myplugin.js");' .
|
||
'`' . "\n" .
|
||
$this->_('Call addPlugin() once at install and removePlugin() once at uninstall.');
|
||
$f->placeholder = "/site/templates/tinymce-plugins/hello-world.js\n/site/modules/SomeModule/some-plugin.js";
|
||
$f->val($this->inputfield->extPluginOpts);
|
||
$f->collapsed = Inputfield::collapsedBlank;
|
||
$f->themeOffset = 1;
|
||
$fieldset->add($f);
|
||
|
||
$defaults = $this->settings()->getOriginalDefaults();
|
||
$optionals = array(
|
||
$this->configHeadlines(),
|
||
$this->configContextmenu($defaults['contextmenu']),
|
||
$this->configMenubar($defaults['menubar']),
|
||
$this->configRemovedMenuitems($defaults['removed_menuitems']),
|
||
$this->configStyleFormatsCSS(),
|
||
$this->configInvalidStyles($defaults['invalid_styles']),
|
||
$this->configImageFields(),
|
||
);
|
||
$f = $inputfields->InputfieldCheckboxes;
|
||
$f->attr('name', 'optionals');
|
||
$f->label = $this->_('Optional settings configurable per-field');
|
||
$f->icon = 'sliders';
|
||
$f->table = true;
|
||
$f->description =
|
||
$this->_('Check boxes for additional settings you would like to be configurable individually for *every single TinyMCE field.*') . ' ' .
|
||
$this->_('Settings NOT checked are configurable here instead (on this screen), and their values apply to all TinyMCE fields.');
|
||
$f->notes =
|
||
$this->_('After changing your selections here you should save as it will hide or reveal additional fields below this.');
|
||
foreach($optionals as $inputfield) {
|
||
$f->addOption($inputfield->name, "**$inputfield->label**|" . $inputfield->getSetting('summary|description'));
|
||
}
|
||
// settingsJSON does not have a dedicated configurable here (since we already have defaultsJSON)
|
||
$f->addOption('settingsJSON',
|
||
'**' . $this->_('Custom JSON settings') . '**|' .
|
||
$this->_('Enables you to add custom settings for each field with a JSON file or string.')
|
||
);
|
||
$f->val($this->inputfield->optionals);
|
||
$f->themeOffset = 1;
|
||
$fieldset->add($f);
|
||
foreach($optionals as $f) {
|
||
$f->showIf = "optionals!=$f->name";
|
||
$fieldset->add($f);
|
||
}
|
||
|
||
$f = $inputfields->InputfieldTextarea;
|
||
$f->attr('name', 'extraCSS');
|
||
$f->val($this->inputfield->extraCSS);
|
||
$f->label = $this->_('Extra CSS styles');
|
||
$f->description =
|
||
$this->_('Enter any additional CSS styles you want to apply in all editors.') . ' ' .
|
||
$this->_('This simply adds extra CSS to the editor. It does not define selectable styles in the toolbar/menubar.');
|
||
$f->icon = 'css3';
|
||
$f->collapsed = Inputfield::collapsedBlank;
|
||
$fieldset->add($f);
|
||
|
||
$f = $inputfields->InputfieldTextarea;
|
||
$f->attr('name', 'pasteFilter');
|
||
$value = $this->inputfield->pasteFilter;
|
||
if(empty($value)) $value = 'default';
|
||
$f->val($value);
|
||
$f->icon = 'paste';
|
||
$f->label = $this->_('Pastefilter whitelist');
|
||
$f->attr('rows', 3);
|
||
$f->description =
|
||
$this->_('Comma-separated string of rules to define a whitelist of tags (and optionally attributes) to keep during a paste operation.') . ' ' .
|
||
$this->_('This setting is used when the “Pastefilter” feature is selected for a given field, and the user pastes in formatted text.') . ' ' .
|
||
$this->_('Enter the string `default` to use the default paste filter configuration. Enter string `text` to paste as plain text.') . ' ' .
|
||
$this->_('Or specify multiple comma-separated rules like the following.') . "\n\n" .
|
||
$this->_('Specify `tag` to allow tag without attributes, `tag[attribute]` to allow tag with attribute, `tag[attribute1|attribute2|etc]` to allow tag with multiple attributes.') . ' ' .
|
||
$this->_('Specify `tag[attribute=value]` to allow tag having attribute with specific value, or `tag[attribute=a|b|c]` to allow tag with attribute having any one of multiple values.') . ' ' .
|
||
$this->_('Specify `foo=bar` to replace tag `foo` with tag `bar`, i.e. `b=strong` and `i=em` are common examples.');
|
||
$f->detail = '**' . $this->_('Default pastefilter whitelist:') . "**\n" . str_replace(',', ', ', InputfieldTinyMCE::defaultPasteFilter);
|
||
$f->collapsed = $value === 'default' ? Inputfield::collapsedYes : Inputfield::collapsedNo;
|
||
$f->themeOffset = 1;
|
||
$fieldset->add($f);
|
||
|
||
$exampleUrl = $config->urls($this->inputfield) . 'defaults.json';
|
||
$defaultsDetail =
|
||
$this->label('example') . ' `{ "style_formats_autohide": true }`' . "\n" .
|
||
$this->_('If you want to force a setting to override a field setting, prefix it with “replace_”, i.e. `{ "replace_toolbar": "styles bold italic" }`.') . "\n" .
|
||
$this->_('If you want to append to an existing field setting, prefix the setting name with “add_”, i.e. `{ "add_toolbar": "undo redo" }`') . "\n" .
|
||
sprintf(
|
||
$this->_('See the [TinyMCE docs](%s) for detail on all settings, keeping in mind that you can also use the “replace_” or “add_” prefixes.'),
|
||
'https://www.tiny.cloud/docs/tinymce/6/'
|
||
) . "\n" .
|
||
sprintf($this->_('See the default JSON file here: [defaults.json](%s).'), $exampleUrl);
|
||
$label = $this->_('Default setting overrides JSON');
|
||
$f = $inputfields->InputfieldTextarea;
|
||
$f->attr('name', 'defaultsJSON');
|
||
$f->label = "$label " . $this->label('text');
|
||
$f->icon = 'terminal';
|
||
$f->description = $this->_('Enter JSON of any default settings you’d like to override from the module defaults.');
|
||
$f->collapsed = Inputfield::collapsedBlank;
|
||
$f->detail = $defaultsDetail;
|
||
$value = $this->inputfield->defaultsJSON;
|
||
$f->val($value);
|
||
if($value && !$isPost) $this->tools()->jsonDecode($value, 'defaultsJSON'); // test decode
|
||
$f->themeOffset = 1;
|
||
$fieldset->add($f);
|
||
|
||
$f = $inputfields->InputfieldURL;
|
||
$f->attr('name', 'defaultsFile');
|
||
$f->label = "$label " . $this->label('file');
|
||
$f->icon = 'file-code-o';
|
||
$f->description = $this->_('Enter the path to a custom defaults JSON file relative to the ProcessWire installation root directory.');
|
||
$f->attr('placeholder', '/dir/to/defaults.json');
|
||
$f->detail = $defaultsDetail;
|
||
$f->collapsed = Inputfield::collapsedBlank;
|
||
$value = $this->inputfield->defaultsFile;
|
||
$f->val($value);
|
||
if($value && !$isPost) $this->tools()->jsonDecodeFile($config->paths->root . $value, 'defaultsFile'); // test decode
|
||
$f->themeOffset = 1;
|
||
$fieldset->add($f);
|
||
|
||
if($languages) {
|
||
$fieldset = $inputfields->InputfieldFieldset;
|
||
$fieldset->attr('name', '_langPacks');
|
||
$fieldset->label = $this->_('TinyMCE language translations');
|
||
$fieldset->description = $this->_('Select translation pack to use for each language.');
|
||
$fieldset->icon = 'globe';
|
||
$fieldset->themeOffset = 1;
|
||
$inputfields->add($fieldset);
|
||
$langPacks = array('en_US' => 'en_US');
|
||
foreach(new \DirectoryIterator(__DIR__ . '/langs/') as $file) {
|
||
if($file->isDot() || $file->isDir()) continue;
|
||
$name = $file->getBasename('.js');
|
||
$langPacks[$name] = $name;
|
||
}
|
||
ksort($langPacks);
|
||
foreach($languages as $language) {
|
||
$langName = $language->name;
|
||
$name = "lang_$langName";
|
||
$value = $this->inputfield->get($name);
|
||
if($value === null) {
|
||
$languages->setLanguage($language);
|
||
$value = $this->settings()->getLanguagePackCode();
|
||
$languages->unsetLanguage();
|
||
}
|
||
$f = $inputfields->InputfieldSelect;
|
||
$f->attr('name', "lang_$language->name");
|
||
$f->label = $language->get('title|name');
|
||
$f->addOptions($langPacks);
|
||
$f->val($value);
|
||
$f->icon = 'language';
|
||
$fieldset->add($f);
|
||
}
|
||
}
|
||
|
||
$f = $inputfields->InputfieldToggle;
|
||
$f->attr('name', 'debugMode');
|
||
$f->label = $this->_('Debug mode?');
|
||
$f->description = $this->_('When enabled InputfieldTinyMCE.js will use verbose console.log() messages for debugging or development.');
|
||
$f->val((bool) $this->inputfield->debugMode);
|
||
$f->collapsed = $f->val() ? false : true;
|
||
$f->icon = 'bug';
|
||
$inputfields->add($f);
|
||
}
|
||
|
||
/**
|
||
* Get other textarea fields that are using TinyMCE
|
||
*
|
||
* @return array
|
||
*
|
||
*/
|
||
public function getOtherTinyMCEFields() {
|
||
$hasField = $this->inputfield->hasField;
|
||
$className = $this->inputfield->className();
|
||
$dependentFields = array();
|
||
$a = array();
|
||
foreach($this->wire()->fields->findByType('FieldtypeTextarea') as $field) {
|
||
if($field->get('inputfieldClass') === $className) {
|
||
if($hasField && $hasField->name === $field->name) continue;
|
||
if($field->get('settingsField')) {
|
||
if($hasField && $field->get('settingsField') === $hasField->name) {
|
||
$dependentFields[] = $field;
|
||
}
|
||
continue;
|
||
}
|
||
$a[$field->name] = $field;
|
||
}
|
||
}
|
||
if(count($dependentFields)) {
|
||
// other fields are depending on this one, so this one cannot depend on another
|
||
$a = array();
|
||
}
|
||
return $a;
|
||
}
|
||
|
||
/**
|
||
* @return InputfieldTextarea
|
||
*
|
||
*/
|
||
protected function configStyleFormatsCSS() {
|
||
/** @var InputfieldTextarea $f */
|
||
$f = $this->wire()->modules->get('InputfieldTextarea');
|
||
$f->attr('name', 'styleFormatsCSS');
|
||
$f->label = $this->_('Custom style formats CSS');
|
||
$f->description =
|
||
$this->_('This enables you to add additional items to the “Styles” toolbar dropdown as CSS classes.') . ' ' .
|
||
$this->_('Optionally prefix with `#Headings`, `#Blocks`, `#Inline`, `#Align`, or your own `#Id` to add to a Styles dropdown submenu.') . ' ' .
|
||
$this->_('You can use a CSS comment to provide the menu label, i.e. `/\* Red Text \*/`.') . ' ' .
|
||
$this->_('You can omit the class (and optionally styles) if you just want to make the element available in your Styles dropdown, i.e. `ins {}`.') . ' ' .
|
||
$this->_('You can specify any styles in UPPERCASE to also force them into inline styles in the markup, i.e. `span.alert { COLOR: red; }`.') . ' ' .
|
||
$this->_('To remove all items having same parent (such as all in “Align”) enter `#Align { display:none }`.') . ' ' .
|
||
$this->_('Or to remove just “Align > Center” (for example) enter `#Align (Center) { display:none }`.');
|
||
$f->set('summary', $this->_('Use CSS classes to create custom styles to add to the “Styles” dropdown.'));
|
||
$value = $this->inputfield->styleFormatsCSS;
|
||
$f->val($value);
|
||
$f->notes = $this->label('example') . "\n" .
|
||
"`#Inline span.red-text { color: red; } /\* Red Text \*/`\n" .
|
||
"`#Blocks p.outline { padding: 20px; border: 1px dotted #ccc; } /\* Outline paragraph \*/`\n" .
|
||
"`img.border { border: 1px solid #ccc; padding: 2px; } /\* Image with border \*/`\n" .
|
||
"`#Hello ins {} /\* Insert text \*/`\n" .
|
||
"`#Hello del { text-decoration: line-through; } /\* Delete text \*/`\n" .
|
||
"`#Hello span.alert { BACKGROUND: red; COLOR: white; } /\* Alert text \*/`\n" .
|
||
"`#Headings (Heading 1) { display: none }`";
|
||
$f->detail =
|
||
$this->_('Note that this is only for the editor.') . ' ' .
|
||
$this->_('You will likely want to add similar CSS classes (without the #IDs) to your front-end site stylesheet, unless forcing inline styles.');
|
||
$f->themeOffset = 1;
|
||
$f->icon = 'css3';
|
||
$f->collapsed = Inputfield::collapsedBlank;
|
||
$rows = substr_count($value, "\n") + 2;
|
||
if($rows > $f->attr('rows')) $f->attr('rows', $rows);
|
||
return $f;
|
||
}
|
||
|
||
protected function configInvalidStyles($defaultValue) {
|
||
|
||
if(is_array($defaultValue)) {
|
||
$defaultValue = $this->formats()->invalidStylesArrayToStr($defaultValue);
|
||
}
|
||
|
||
/** @var InputfieldTextarea $f */
|
||
$f = $this->wire()->modules->get('InputfieldTextarea');
|
||
$f->attr('name', 'invalid_styles');
|
||
$f->attr('rows', 3);
|
||
$f->label = $this->_('Invalid styles');
|
||
$format1 = "`tag=style1|style2|style3`";
|
||
$format2 = "`tag1|tag2|tag3=style`";
|
||
$f->description =
|
||
$this->_('Space, newline or comma separated list of inline styles that should be disallowed in markup style attributes.') . ' ' .
|
||
$this->_('Each style is disabled for all elements.') . ' ' .
|
||
sprintf($this->_('To disable styles for specific elements/tags use the format %s or %s.'), $format1, $format2) . ' ' .
|
||
$this->label('useDefault');
|
||
$f->set('summary', $this->_('Specify which inline styles are disallowed from appearing in markup (i.e. line-height, font-size, etc.).'));
|
||
$f->notes =
|
||
$this->label('default') . " `$defaultValue`" . "\n" .
|
||
$this->label('example') . " `float, font-family, a=color|background-color, table|tr|td=height`";
|
||
$f->detail = $this->_('Use of are commas or newlines is optional.');
|
||
|
||
$value = $this->inputfield->invalid_styles;
|
||
if(is_array($value)) $value = $this->formats()->invalidStylesArrayToStr($value);
|
||
if($value === $defaultValue) $value = 'default';
|
||
$f->val($value);
|
||
if(empty($value) || $value === 'default') $f->collapsed = Inputfield::collapsedYes;
|
||
$f->themeOffset = 1;
|
||
$f->icon = 'eye-slash';
|
||
$rows = substr_count($value, "\n") + 2;
|
||
if($rows > $f->attr('rows')) $f->attr('rows', $rows);
|
||
return $f;
|
||
}
|
||
|
||
protected function configMenubar($defaultValue) {
|
||
/** @var InputfieldText $f */
|
||
$f = $this->wire()->modules->get('InputfieldText');
|
||
$f->attr('name', 'menubar');
|
||
$f->label = $this->_('Menubar dropdowns');
|
||
$f->icon = 'toggle-down';
|
||
$f->set('summary', $this->_('Specify which tools should appear in the menubar dropdowns.'));
|
||
$f->description =
|
||
$this->_('The top level dropdown items to display in the menubar.') . ' ' .
|
||
$this->label('useDefault') . ' ' .
|
||
'[' . $this->label('details') . '](https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#menubar)';
|
||
$value = $this->inputfield->menubar;
|
||
if($value === $defaultValue) $value = 'default';
|
||
$f->val($value);
|
||
$f->notes = $this->label('default') . "`$defaultValue`";
|
||
if($value === 'default' || empty($value)) $f->collapsed = Inputfield::collapsedYes;
|
||
$f->themeOffset = 1;
|
||
return $f;
|
||
}
|
||
|
||
protected function configRemovedMenuitems($defaultValue) {
|
||
/** @var InputfieldText $f */
|
||
$f = $this->wire()->modules->get('InputfieldText');
|
||
$f->attr('name', 'removed_menuitems');
|
||
$f->label = $this->_('Tools to remove from the menubar');
|
||
$f->icon = 'wrench';
|
||
$f->set('summary', $this->_('Specify which tools should be removed from the menubar (when used).'));
|
||
$f->description =
|
||
$this->_('The menubar is built according to module default settings and installed plugins.') . ' ' .
|
||
$this->_('If there are tools you do not want showing in the menubar enter their names here.') . ' ' .
|
||
$this->label('useDefault');
|
||
$f->notes = $this->label('default') . "`$defaultValue`";
|
||
$value = $this->inputfield->removed_menuitems;
|
||
if($value === $defaultValue) $value = 'default';
|
||
$f->val($value);
|
||
if($value === 'default' || empty($value)) $f->collapsed = Inputfield::collapsedYes;
|
||
$f->themeOffset = 1;
|
||
return $f;
|
||
}
|
||
|
||
protected function configContextmenu($defaultValue) {
|
||
/** @var InputfieldText $f */
|
||
$f = $this->wire()->modules->get('InputfieldText');
|
||
$f->attr('name', 'contextmenu');
|
||
$f->label = $this->_('Context menu tools');
|
||
$f->icon = 'sticky-note';
|
||
$f->set('summary', $this->_('Specify which tools should appear in a context menu when you right-click an element.'));
|
||
$f->description =
|
||
$this->_('Tools to show in the context menu that appears when right-clicking an element.') . ' ' .
|
||
$this->_('Only the tools relevant to the element will be shown on right-click.') . ' ' .
|
||
$this->label('useDefault');
|
||
$value = $this->inputfield->contextmenu;
|
||
if($value === $defaultValue) $value = 'default';
|
||
$f->val($value);
|
||
$f->notes = $this->label('default') . "`$defaultValue`";
|
||
if($value === 'default' || empty($value)) $f->collapsed = Inputfield::collapsedYes;
|
||
$f->themeOffset = 1;
|
||
return $f;
|
||
}
|
||
|
||
protected function configHeadlines() {
|
||
/** @var InputfieldCheckboxes $f */
|
||
$f = $this->wire()->modules->get('InputfieldCheckboxes');
|
||
$f->attr('name', 'headlines');
|
||
$f->label = $this->_('Headline options');
|
||
$f->description = $this->_('Select which headlines should be available in the “blocks” and/or “styles” dropdowns.');
|
||
$f->icon = 'university';
|
||
for($n = 1; $n <= 6; $n++) {
|
||
$f->addOption("h$n");
|
||
}
|
||
$f->val($this->inputfield->headlines);
|
||
$f->optionColumns = 1;
|
||
$f->themeOffset = 1;
|
||
return $f;
|
||
}
|
||
|
||
protected function configImageFields() {
|
||
/** @var InputfieldAsmSelect $f */
|
||
$f = $this->wire()->modules->get('InputfieldAsmSelect');
|
||
$f->attr('name', 'imageFields');
|
||
$f->label = $this->_('Image fields for ImgUpload');
|
||
$f->description =
|
||
$this->_('Select which image fields are supported (for uploads) when an image is dragged into the editor.');
|
||
$f->notes =
|
||
$this->_('If no fields are selected then an available images field will be automatically chosen at runtime.') . ' ' .
|
||
$this->_('If the option labeled “None” is selected, then the feature will be disabled.') . ' ' .
|
||
$this->_('If multiple image fields match on a given page, the order of the selections above applies.');
|
||
$f->icon = 'picture-o';
|
||
$imageFields = $this->inputfield->imageFields;
|
||
if(!is_array($imageFields)) $imageFields = array();
|
||
if(in_array('x', $imageFields) && count($imageFields) > 1) $imageFields = array('x');
|
||
$f->addOption('x', $this->_('None'));
|
||
foreach($this->wire()->fields->findByType('FieldtypeImage') as $field) {
|
||
if(((int) $field->get('maxFiles')) === 1) continue;
|
||
$f->addOption($field->name);
|
||
}
|
||
$f->attr('value', $imageFields);
|
||
$f->collapsed = Inputfield::collapsedBlank;
|
||
$f->themeOffset = 1;
|
||
return $f;
|
||
}
|
||
|
||
/**
|
||
* Add an external plugin .js file
|
||
*
|
||
* @param string $file File must be .js file relative to PW installation root, i.e. /site/templates/mce/myplugin.js
|
||
* @throws WireException
|
||
*
|
||
*/
|
||
public function addPlugin($file) {
|
||
$basename = basename($file);
|
||
$ext = pathinfo($basename, PATHINFO_EXTENSION);
|
||
if($ext !== 'js') throw new WireException("Plugin file does not end in .js ($basename)");
|
||
$pathname = $this->wire()->config->paths->root . ltrim($file, '/');
|
||
if(!is_file($pathname)) throw new WireException("File $pathname does not exist");
|
||
$modules = $this->wire()->modules;
|
||
$data = $modules->getModuleConfigData($this->inputfield);
|
||
$value = isset($data['extPluginOpts']) ? $data['extPluginOpts'] : '';
|
||
$data['extPluginOpts'] = trim("$value\n$file");
|
||
$this->inputfield->set('extPluginOpts', $data['extPluginOpts']);
|
||
$modules->saveModuleConfigData($this->inputfield, $data);
|
||
}
|
||
|
||
/**
|
||
* Remove an external plugin .js file
|
||
*
|
||
* @param string $file File must be .js file relative to PW installation root, i.e. /site/templates/mce/myplugin.js
|
||
* @return bool
|
||
*
|
||
*/
|
||
public function removePlugin($file) {
|
||
$modules = $this->wire()->modules;
|
||
$data = $modules->getModuleConfigData($this->inputfield);
|
||
$file = trim($file);
|
||
if(empty($data['extPluginOpts'])) return false;
|
||
$value = explode("\n", $data['extPluginOpts']);
|
||
$updated = false;
|
||
foreach($value as $k => $v) {
|
||
if(trim($v) !== $file) continue;
|
||
unset($value[$k]);
|
||
$updated = true;
|
||
}
|
||
$data['extPluginOpts'] = count($value) ? implode("\n", $value) : '';
|
||
if($updated) {
|
||
$modules->saveModuleConfigData($this->inputfield, $data);
|
||
$this->inputfield->extPluginOpts = $data['extPluginOpts'];
|
||
}
|
||
return $updated;
|
||
}
|
||
|
||
/**
|
||
* Convert CKE toolbar to MCE (future use)
|
||
*
|
||
* @param string $value
|
||
* @return string
|
||
*
|
||
*/
|
||
public function ckeToMceToolbar($value) {
|
||
$value = str_replace(array("\n", ","), array(" - ", " "), $value);
|
||
while(strpos($value, ' ') !== false) $value = str_replace(' ', ' ', $value);
|
||
$tools = array();
|
||
foreach(explode(' ', $value) as $tool) {
|
||
if(isset($this->ckeToMceToolbars[$tool])) {
|
||
$tools[$tool] = $this->ckeToMceToolbars[$tool];
|
||
}
|
||
}
|
||
$value = implode(' ', $tools);
|
||
return $value;
|
||
}
|
||
|
||
/**
|
||
* Translates CKE to MCE toolbar names (not currently used)
|
||
*
|
||
* @var string[]
|
||
*
|
||
*/
|
||
protected $ckeToMceToolbars = array(
|
||
// CKE => MCE
|
||
'About' => 'help',
|
||
'Anchor' => 'anchor',
|
||
'Blockquote' => 'blockquote',
|
||
'Bold' => 'bold',
|
||
'BulletedList' => 'bullist',
|
||
'Copy' => 'copy',
|
||
'CopyFormatting' => '',
|
||
'CreateDiv' => '',
|
||
'Cut' => 'cut',
|
||
'Find' => 'searchreplace',
|
||
'Flash' => '',
|
||
'Format' => 'styles',
|
||
'HorizontalRule' => 'hr',
|
||
'Iframe' => 'pageembed',
|
||
'Image' => 'image',
|
||
'Indent' => 'indent',
|
||
'Italic' => 'italic',
|
||
'JustifyBlock' => 'alignjustify',
|
||
'JustifyCenter' => 'aligncenter',
|
||
'JustifyLeft' => 'alignleft',
|
||
'JustifyRight' => 'alignright',
|
||
'Language' => 'language',
|
||
'Link' => 'link',
|
||
'Maximize' => 'fullscreen',
|
||
'NewPage' => 'newdocument',
|
||
'NumberedList' => 'numlist',
|
||
'Outdent' => 'outdent',
|
||
'PageBreak' => 'pagebreak',
|
||
'Paste' => 'paste',
|
||
'PasteFromWord' => '',
|
||
'PasteText' => 'pastetext',
|
||
'Preview' => 'preview',
|
||
'Print' => 'print',
|
||
'PWImage' => 'pwimage',
|
||
'PWLink' => 'pwlink',
|
||
'Redo' => 'redo',
|
||
'RemoveFormat' => 'removeformat',
|
||
'Replace' => '',
|
||
'Save' => 'save',
|
||
'Scayt' => '', // set browser_spellcheck
|
||
'SelectAll' => 'selectall',
|
||
'ShowBlocks' => 'visualblocks',
|
||
'Smiley' => 'emoticons',
|
||
'Source' => 'code',
|
||
'Sourcedialog' => 'code',
|
||
'SpecialChar' => 'charmap',
|
||
'SpellChecker' => '',
|
||
'Strike' => 'strikethrough',
|
||
'Styles' => '',
|
||
'Subscript' => 'subscript',
|
||
'Superscript' => 'superscript',
|
||
'Table' => 'table',
|
||
'Templates' => 'template',
|
||
'Underline' => 'underline',
|
||
'Undo' => 'undo',
|
||
'Unlink' => 'unlink',
|
||
'-' => '|',
|
||
'#' => ' ',
|
||
);
|
||
|
||
/**
|
||
* CKE setting names (not currently used, for future auto-conversion to MCE)
|
||
*
|
||
* @var string[]
|
||
*
|
||
*/
|
||
protected $ckeSettingNames = array(
|
||
'assetPageID',
|
||
'contentsCss',
|
||
'contentsInlineCss',
|
||
'customOptions',
|
||
'extraAllowedContent',
|
||
'extraPlugins',
|
||
'formatTags',
|
||
'imageFields',
|
||
'inlineMode',
|
||
'removePlugins',
|
||
'stylesSet',
|
||
'toggles',
|
||
'toolbar',
|
||
'useACF',
|
||
'usePurifier',
|
||
);
|
||
|
||
} |