Commit c53a5ade authored by Carsten  Rose's avatar Carsten Rose
Browse files

UsersManual/index.rst: update documentation for editor. FE types cleanup.

AbstractBuildForm.html: more default configs for the editor. Setting size of the editor.
richttexteditor.html: third RTE to show min/max_height.
parent 1f2dd9dd
......@@ -609,8 +609,8 @@ Class: Native
|class | enum('native', 'action', | Details below. |
| | 'container') | |
+---------------+-----------------------------+---------------------------------------------------------------------------------------------------+
|type | enum('checkbox', 'date', 'time', 'datetime', 'dateJQW', 'datetimeJQW', 'extra', 'gridJQW', 'text', 'note', 'password', |
| | 'radio', 'select', 'subrecord', 'textarea', 'timeJQW', 'upload', 'fieldset', 'pill', 'beforeLoad', 'beforeSave', |
|type | enum('checkbox', 'date', 'time', 'datetime', 'dateJQW', 'datetimeJQW', 'extra', 'gridJQW', 'text', 'editor', 'note', |
| | 'password', 'radio', 'select', 'subrecord', 'upload', 'fieldset', 'pill', 'beforeLoad', 'beforeSave', |
| | 'beforeInsert', 'beforeUpdate', 'beforeDelete', 'afterLoad', 'afterSave', 'afterInsert', 'afterUpdate', 'afterDelete', |
| | 'sendmail') |
+---------------+-----------------------------+---------------------------------------------------------------------------------------------------+
......@@ -666,85 +666,83 @@ Class: Native
+---------------+-----------------------------+---------------------------------------------------------------------------------------------------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
| Attribute | checkbox | dateJQW | datetimeJQW | gridJQW | extra | input | note | password | radio | select | subrecord | textarea | timeJQW | upload |
+==================+==========+=========+=============+==========+========+=======+======+==========+=======+========+===========+==========+=========+========+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| Attribute | checkbox | dateJQW | datetimeJQW | gridJQW | extra | text | note | password | radio | select | subrecord | timeJQW | upload | editor |
+==================+==========+=========+=============+==========+========+=======+======+==========+=======+========+===========+=========+========+========+
|id |Internal id |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
|formId |Form |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
|containerId |Assign the Formelement to user defined fieldSet or pill |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
|enabled |Formelement is active or not |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
|name |Name of a column of the primary table. Formelements with a corresponding table will be saved automatically. |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
|label |Label shown to the user. |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
|mode |show, readonly, required, lock, disable. |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
|class |native |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
|type | checkbox | dateJQW | datetimeJQW | gridJQW | extra | input | note | password | radio | select | subrecord | textarea | timeJQW | upload |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
|checkType | | - | - | | | - | | - | | | | - | - | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
|checkPattern | | - | - | | | - | | - | | | | - | - | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|formId |Form | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|containerId |Assign the Formelement to user defined fieldSet or pill | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|enabled |Formelement is active or not | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|name |Name of a column of the primary table. Formelements with a corresponding table will be saved automatically. | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|label |Label shown to the user. | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|mode |show, readonly, required, lock, disable. | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|class |native | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|type | checkbox | dateJQW | datetimeJQW | gridJQW | extra | text | note | password | radio | select | subrecord | timeJQW | upload | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|checkType | | - | - | | | - | | - | | | | - | | - |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|checkPattern | | - | - | | | - | | - | | | | - | | - |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|onChange | - | - | - | | | - | | - | - | - | | - | - | - |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|ord | - | - | - | - | - | - | - | - | - | - | - | - | - | - |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|tabindex | - | - | - | - | - | - | - | - | - | - | - | - | - | - |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
|size | - | | | | | - | | - | - | - 2 | | - 1 | - | - ? |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|size | - | | | | | - | | - | - | - 2 | | - | - ? | - |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|maxLength | 1 | | | | | - | | - | - 1 | | | | | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|note | - | - | - | | | - | - | - | - | - | - | - | - | - |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
|tooltip | - | - | - | | | - | | - | - | - | | - | - | - |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|tooltip | - | - | - | | | - | | - | - | - | | - | - | ? |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|placeholder | | - | - | | | - | | | | | | - | - | - |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|clientJs | | - | - | - | | - | | - | - | - | | - | - | - |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|value | - | - | - | - | - | - | - | - | - | - | | - | - | - |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|sql1 |? |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
|sql2 |? |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
|Additional attributes in Field 'parameter'. Typically in key=value format. |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
| type | checkbox | dateJQW | datetimeJQW | gridJQW | extra | input | note | password | radio | select | subrecord | textarea | timeJQW | upload |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
|Additional attributes in Field 'parameter'. Typically in key=value format. | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| type | checkbox | dateJQW | datetimeJQW | gridJQW | extra | text | note | password | radio | select | subrecord | timeJQW | upload | editor |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| accept |? |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
| alt |? |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
| autocomplete | | - | - | | | - | | | | | | - | - | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| alt |? | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| autocomplete | | - | - | | | - | | | | | | - | | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| autofocus | - | - | - | | | - | | - | - | - | | - | - | - |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| checkBoxMode | - | - | | | | | | | | | | | | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| checked | - | | | | | - | | | - | | | | | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| unchecked | - | | | | | - | | | - | | | | | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| label2 | - | | | | | | | | - | | | | | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| itemList | - | | | | | | | | - | - | | | | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| emptyItemAtStart | | | | | | | | | | - | | | | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| emptyItemAtEnd | | | | | | | | | | - | | | | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| emptyHide | | | | | | | | | | - | | | | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
| accept | | | | | | | | | | | | | | - 3 |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+----------+---------+--------+
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
| accept | | | | | | | | | | | | | - 3 | |
+------------------+----------+---------+-------------+----------+--------+-------+------+----------+-------+--------+-----------+---------+--------+--------+
* 1: A line break created every <size> elements. Easy way to make checkboxes or radio vertical instead of horizontal.
* 2: Any number >1 makes the 'select' input 'multiple' ready.
......@@ -798,27 +796,27 @@ Checkboxes can be rendered in mode:
Type: date
^^^^^^^^^^
* Range datetime: '1000-01-01' to '9999-12-31' or '0000-00-00'. (http://dev.mysql.com/doc/refman/5.5/en/datetime.html)
* Optional:
* Range datetime: '1000-01-01' to '9999-12-31' or '0000-00-00'. (http://dev.mysql.com/doc/refman/5.5/en/datetime.html)
* Optional:
* *dateFormat*: ; yyyy-mm-dd | dd.mm.yyyy
Type: datetime
^^^^^^^^^^^^^^
* Range datetime: '1000-01-01 00:00:00' to '9999-12-31 23:59:59' or '0000-00-00 00:00:00'. (http://dev.mysql.com/doc/refman/5.5/en/datetime.html)
* Optional:
* Range datetime: '1000-01-01 00:00:00' to '9999-12-31 23:59:59' or '0000-00-00 00:00:00'. (http://dev.mysql.com/doc/refman/5.5/en/datetime.html)
* Optional:
* *dateFormat*: ; yyyy-mm-dd | dd.mm.yyyy
* *showSeconds*: 0|1 - shows the seconds. Independent if the user specifies seconds, they are displayed '1' or not '0'.
* *showZero*: 0|1 - For an empty timestamp, With '0' nothing is displayed. With '1' the string '0000-00-00 00:00:00' is displayed.
Type: extra
^^^^^^^^^^^
* Element is not shown in the browser.
* The element can be used to define / precalculate values for a column, which do not already exist as a native FormElement.
* The element is build /computed on form load.
* Element is not shown in the browser.
* The element can be used to define / precalculate values for a column, which do not already exist as a native FormElement.
* The element is build /computed on form load.
Type: input
^^^^^^^^^^^
Type: text
^^^^^^^^^^
* General input for text and number.
* size:
......@@ -826,6 +824,33 @@ Type: input
* <number>: width of input element in characters. Lineheight = 1.
* <cols>,<rows>: input element = textarea, width=<cols>, height=<rows>
Type: editor
^^^^^^^^^^^^
* TinyMCE (www.tinymce.com, community edition) is used as the QFQ Rich Text Editor.
* The content will be saved as HTML inside the database.
* All configuration and plugins will be configured via the 'parameter' field. Just prepend the word 'editor-' in front
of each TinyMCE keyword. Check options under https://www.tinymce.com/docs/configure/,
https://www.tinymce.com/docs/plugins/, https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
* Bars:
* Top: *menubar* - by default hidden.
* Top: *toolbar* - by default visible.
* Bottom: *statusbar* - by default hidden. Exception: min_height *and* max_height are given via size parameter.
* The default setting is::
editor-plugins='code link searchreplace table textcolor textpattern visualchars'
editor-toolbar='code searchreplace undo redo | styleselect link table | fontselect fontsizeselect |
bullist numlist outdent indent | forecolor backcolor bold italic'
editor-menubar=false
editor-statusbar=false
* size:
* <min_height>,<max_height>: in pixels, including top and bottom bars.
Type: note
^^^^^^^^^^
......
......@@ -2029,23 +2029,44 @@ abstract class AbstractBuildForm {
* @return array
*/
private function setEditorConfig(array $formElement, $htmlFormElementId) {
$flagMaxHeight = false;
// plugins
if (!isset($formElement[FE_EDITOR_PREFIX . 'plugins'])) {
$formElement[FE_EDITOR_PREFIX . 'plugins'] = 'code link searchreplace table textcolor textpattern visualchars';
}
// toolbar: https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
if (!isset($formElement[FE_EDITOR_PREFIX . 'toolbar'])) {
$formElement[FE_EDITOR_PREFIX . 'toolbar'] = 'code link searchreplace table forecolor backcolor visualchars';
$formElement[FE_EDITOR_PREFIX . 'toolbar'] = 'code searchreplace undo redo | ' .
'styleselect link table | fontselect fontsizeselect | ' .
'bullist numlist outdent indent | forecolor backcolor bold italic';
}
// menubar
if (!isset($formElement[FE_EDITOR_PREFIX . 'menubar'])) {
$formElement[FE_EDITOR_PREFIX . 'menubar'] = 'false';
}
// autofocus
if (isset($formElement['autofocus']) && $formElement['autofocus'] == 'yes') {
$formElement[FE_EDITOR_PREFIX . 'auto_focus'] = $htmlFormElementId;
}
// Check for min_height, max_height
$minMax = explode(',', $formElement['size'], 2);
if (isset($minMax[0]) && ctype_digit($minMax[0]) && !isset($formElement[FE_EDITOR_PREFIX . 'min_height'])) {
$formElement[FE_EDITOR_PREFIX . 'min_height'] = $minMax[0];
}
if (isset($minMax[1]) && ctype_digit($minMax[1]) && !isset($formElement[FE_EDITOR_PREFIX . 'max_height'])) {
$formElement[FE_EDITOR_PREFIX . 'max_height'] = $minMax[1];
$flagMaxHeight = true;
}
// Disable the element path within the status bar at the bottom of the editor.
$formElement[FE_EDITOR_PREFIX . 'elementpath'] = 'false';
// statusbar: disable if not user defined and if no max_height is given.
if (!$flagMaxHeight && !isset($formElement[FE_EDITOR_PREFIX . 'statusbar'])) {
$formElement[FE_EDITOR_PREFIX . 'statusbar'] = 'false';
}
return $formElement;
}
......@@ -2074,7 +2095,11 @@ abstract class AbstractBuildForm {
throw new UserFormException("Empty '" . $prefix . "*' keyname: '" . $keyName . "'", ERROR_INVALID_EDITOR_PROPERTY_NAME);
}
if ($value != '') {
// $value might be boolean false, which should be used! Do not compare with ''.
if (isset($value)) {
// real boolean are important for TinyMCE config 'statusbar', 'menubar', ...
if ($value === 'false') $value = false;
if ($value === 'true') $value = true;
$settings[$keyName] = $value;
}
}
......
......@@ -68,12 +68,24 @@
<div class="form-group">
<div class="col-md-2">
<label for="text:2" class="control-label">Rich Text Editor (plugins, autofocus)</label>
<label for="text:2" class="control-label">Rich Text Editor (plugins, autofocus, no statusbar)</label>
</div>
<div class="col-md-6">
<textarea id="text:2" class="qfq-tinymce" name="rte"
data-config="{ &quot;plugins&quot;: &quot;advlist autolink link image lists charmap print preview&quot;, &quot;auto_focus&quot;: &quot;text:2&quot;}">Input
data-config="{ &quot;plugins&quot;: &quot;advlist autolink link image lists charmap print preview&quot;, &quot;auto_focus&quot;: &quot;text:2&quot;, &quot;statusbar&quot;: false }">Input
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="text:3" class="control-label">Rich Text Editor (min_height, max_height)</label>
</div>
<div class="col-md-6">
<textarea id="text:3" class="qfq-tinymce" name="rte"
data-config="{ &quot;min_height&quot;: &quot;200&quot;, &quot;max_height&quot;: &quot;400&quot; }">Input
</textarea>
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment