Add Paragraph Formats to Editor Settings (#4861)

Co-authored-by: Luke Towers <github@luketowers.ca>
Co-authored-by: Ben Thomson <ben@abweb.com.au>
This commit is contained in:
Patrick Boivin 2020-07-16 05:54:21 -04:00 committed by GitHub
parent 3be6e26e84
commit 987dfa4eb7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 90 additions and 12 deletions

View File

@ -106,6 +106,7 @@ class RichEditor extends FormWidgetBase
$this->vars['imageStyles'] = EditorSetting::getConfiguredStyles('html_style_image');
$this->vars['linkStyles'] = EditorSetting::getConfiguredStyles('html_style_link');
$this->vars['paragraphStyles'] = EditorSetting::getConfiguredStyles('html_style_paragraph');
$this->vars['paragraphFormats'] = EditorSetting::getConfiguredFormats('html_paragraph_formats');
$this->vars['tableStyles'] = EditorSetting::getConfiguredStyles('html_style_table');
$this->vars['tableCellStyles'] = EditorSetting::getConfiguredStyles('html_style_table_cell');
}

View File

@ -50,6 +50,7 @@
imageStyles: null,
linkStyles: null,
paragraphStyles: null,
paragraphFormat: null,
tableStyles: null,
tableCellStyles: null,
aceVendorPath: '/',
@ -115,6 +116,17 @@
'oc-text-uppercase': 'Uppercase'
}
froalaOptions.paragraphFormat = this.options.paragraphFormat
? this.options.paragraphFormat
: {
'N': 'Normal',
'H1': 'Heading 1',
'H2': 'Heading 2',
'H3': 'Heading 3',
'H4': 'Heading 4',
'PRE': 'Code'
}
froalaOptions.tableStyles = this.options.tableStyles
? this.options.tableStyles
: {

View File

@ -19,6 +19,7 @@
<?php if (isset($imageStyles)): ?>data-image-styles="<?= e(json_encode($imageStyles)) ?>"<?php endif ?>
<?php if (isset($linkStyles)): ?>data-link-styles="<?= e(json_encode($linkStyles)) ?>"<?php endif ?>
<?php if (isset($paragraphStyles)): ?>data-paragraph-styles="<?= e(json_encode($paragraphStyles)) ?>"<?php endif ?>
<?php if (isset($paragraphFormats)): ?>data-paragraph-format="<?= e(json_encode($paragraphFormats)) ?>"<?php endif ?>
<?php if (isset($tableStyles)): ?>data-table-styles="<?= e(json_encode($tableStyles)) ?>"<?php endif ?>
<?php if (isset($tableCellStyles)): ?>data-table-cell-styles="<?= e(json_encode($tableCellStyles)) ?>"<?php endif ?>
data-links-handler="<?= $this->getEventHandler('onLoadPageLinksForm') ?>"

View File

@ -406,6 +406,7 @@ return [
'label' => 'Label',
'class_name' => 'Class name',
'markup_tags' => 'Markup Tags',
'markup_tag' => 'Markup Tag',
'allowed_empty_tags' => 'Allowed empty tags',
'allowed_empty_tags_comment' => 'The list of tags that are not removed when they have no content inside.',
'allowed_tags' => 'Allowed tags',
@ -416,6 +417,7 @@ return [
'remove_tags_comment' => 'The list of tags that are removed together with their content.',
'line_breaker_tags' => 'Line breaker tags',
'line_breaker_tags_comment' => 'The list of tags that are used to place a line breaker element between.',
'toolbar_options' => 'Toolbar Options',
'toolbar_buttons' => 'Toolbar Buttons',
'toolbar_buttons_comment' => 'The Toolbar Buttons to be displayed in the Rich Editor by default.',
'toolbar_buttons_preset' => 'Insert a preset toolbar button configuration:',
@ -424,6 +426,8 @@ return [
'minimal' => 'Minimal',
'full' => 'Full',
],
'paragraph_formats' => 'Paragraph Formats',
'paragraph_formats_comment' => 'The options that will appear in the Paragraph Format dropdown.',
],
'tooltips' => [
'preview_website' => 'Preview the website',

View File

@ -76,6 +76,15 @@ class EditorSetting extends Model
'oc-cell-thick-border' => 'Thick Border',
];
protected $defaultHtmlParagraphFormats = [
'N' => 'Normal',
'H1' => 'Heading 1',
'H2' => 'Heading 2',
'H3' => 'Heading 3',
'H4' => 'Heading 4',
'PRE' => 'Code',
];
/**
* Editor toolbar presets for Froala.
*/
@ -113,6 +122,15 @@ class EditorSetting extends Model
$this->html_style_paragraph = $this->makeStylesForTable($this->defaultHtmlStyleParagraph);
$this->html_style_table = $this->makeStylesForTable($this->defaultHtmlStyleTable);
$this->html_style_table_cell = $this->makeStylesForTable($this->defaultHtmlStyleTableCell);
$this->html_paragraph_formats = $this->makeFormatsForTable($this->defaultHtmlParagraphFormats);
}
public function afterFetch()
{
if (!isset($this->value['html_paragraph_formats'])) {
$this->html_paragraph_formats = $this->makeFormatsForTable($this->defaultHtmlParagraphFormats);
$this->save();
}
}
public function afterSave()
@ -129,11 +147,48 @@ class EditorSetting extends Model
});
}
protected function makeFormatsForTable($arr)
{
$count = 0;
return array_build($arr, function ($key, $value) use (&$count) {
return [$count++, ['format_label' => $value, 'format_tag' => $key]];
});
}
/**
* Same as getConfigured but uses special style structure.
* Same as getConfigured but uses a special structure for styles.
* @return mixed
*/
public static function getConfiguredStyles($key, $default = null)
{
return static::getConfiguredArray($key, $default, function ($key, $value) {
if (array_has($value, ['class_name', 'class_label'])) {
return [
array_get($value, 'class_name'),
array_get($value, 'class_label')
];
}
});
}
/**
* Same as getConfigured but uses a special structure for paragraph formats.
* @return mixed
*/
public static function getConfiguredFormats($key, $default = null)
{
return static::getConfiguredArray($key, $default, function ($key, $value) {
if (array_has($value, ['format_tag', 'format_label'])) {
return [
array_get($value, 'format_tag'),
array_get($value, 'format_label')
];
}
});
}
protected static function getConfiguredArray($key, $default = null, $callback = null)
{
$instance = static::instance();
@ -141,15 +196,8 @@ class EditorSetting extends Model
$defaultValue = $instance->getDefaultValue($key);
if (is_array($value)) {
$value = array_filter(array_build($value, function ($key, $value) {
if (array_has($value, ['class_name', 'class_label'])) {
return [
array_get($value, 'class_name'),
array_get($value, 'class_label')
];
}
}));
if (is_array($value) && is_callable($callback)) {
$value = array_filter(array_build($value, $callback));
}
return $value != $defaultValue ? $value : $default;

View File

@ -106,16 +106,28 @@ tabs:
size: small
span: auto
html_paragraph_formats:
label: backend::lang.editor.paragraph_formats
comment: backend::lang.editor.paragraph_formats_comment
tab: backend::lang.editor.toolbar_options
type: datatable
span: right
columns:
format_tag:
title: backend::lang.editor.markup_tag
format_label:
title: backend::lang.editor.label
html_toolbar_buttons:
label: backend::lang.editor.toolbar_buttons
comment: backend::lang.editor.toolbar_buttons_comment
tab: backend::lang.editor.toolbar_buttons
tab: backend::lang.editor.toolbar_options
type: textarea
span: left
_html_toolbar_buttons_presets:
label: backend::lang.editor.toolbar_buttons_preset
tab: backend::lang.editor.toolbar_buttons
tab: backend::lang.editor.toolbar_options
type: partial
path: ~/modules/backend/models/editorsetting/_toolbar_presets.htm
span: left