Skip to content

Commit ee4a7b4

Browse files
bobdenotterbobdenotter
authored
Merge pull request #25 from bolt/add-clips-and-more-settings
Add Clips and more settings
2 parents d783fc3 + 1d80857 commit ee4a7b4

File tree

5 files changed

+164
-69
lines changed

5 files changed

+164
-69
lines changed

‎assets/redactor/redactor-backend-extras.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/* Default Styles and overrides */
2+
.redactor-source, .redactor-styles {
3+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
4+
}
5+
6+
.redactor-styles img {
7+
max-width: 75%;
8+
}
9+
10+
.redactor-styles blockquote {
11+
background-color: #F5F5F5;
12+
border-left: 5px solid #dbdbdb;
13+
padding: 1.25em 1.5em;
14+
font-style: italic;
15+
color: #31363A;
16+
}
17+
18+
.redactor-styles blockquote p {
19+
margin: 0;
20+
}
21+
22+
/* See: https://github.com/bolt/redactor/issues/3 */
23+
.redactor-air, .redactor-toolbar {
24+
z-index: 40;
25+
}
26+
27+
.redactor-air, .redactor-toolbar a {
28+
text-decoration: none !important;
29+
}
30+
31+
/* Clips */
32+
.callout-clip {
33+
border: 1px solid #999;
34+
background: #E8E8E8;
35+
padding: 0.5rem;
36+
margin: 1rem 0;
37+
}
38+
39+
.callout-clip p {
40+
font-weight: bold;
41+
}

‎config/config.yaml

+79-32
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,83 @@
44
# parameters to the `$R('#content', { … })` call.
55
# See vendor/bolt/redactor/src/RedactorConfig.php::getDefaults for the default values. The values
66
# below will be merged or appended with those values.
7+
78
default:
8-
# All options for buttons: html, format, bold, italic, deleted, lists, link, file, line, redo,
9-
# undo, underline, ol, ul, indent, outdent, sup, sub
10-
buttons: [ format, bold, italic, lists, link, html, image ]
11-
12-
# See https://imperavi.com/redactor/plugins/ for available plugins
13-
# Common items include video, widget, counter, clips, imagemanager, definedlinks
14-
plugins: [ fullscreen, table, video, imagemanager, definedlinks]
15-
16-
# Set this to false to hide the button to toggle showing the HTML source of the field. Setting it
17-
# to plain `true` will override Redactor using the CodeMirror component, and it will show a plain
18-
# source code editor instead.
19-
# source: false
20-
21-
# By default, pressing the Enter key will start a new `<p>` paragraph. Set `breakline` to false
22-
# to insert a `<br>` tag instead.
23-
breakline: false
24-
25-
# Settings for images
26-
# Note: The current editor can only upload / insert images if they are granted
27-
# the 'upload' and 'list_files:files' permissions in `permissions.yaml`.
28-
image:
29-
thumbnail: 1000×1000×max
30-
imageResizable: false
31-
imagePosition: true
32-
33-
# The tags to show in the 'Formatting' drop-down menu. Note: Block-level tags only!
34-
# Use the `inlinestyles` plugin for inline tags
35-
formatting: ['p', 'blockquote', 'pre', 'h2', 'h3', 'h4', 'h5']
36-
37-
# If you have added custom plugins, add them to the mapping below.
38-
# plugins:
39-
# myplugin: ['/assets/myplugin/myplugin.min.js', '/assets/myplugin/myplugin.min.css']
9+
# All options for buttons: html, format, bold, italic, deleted, lists, link, file, line, redo,
10+
# undo, underline, ol, ul, indent, outdent, sup, sub
11+
buttons: [ format, bold, italic, lists, link, html, image ]
12+
13+
# See https://imperavi.com/redactor/plugins/ for available plugins
14+
# Common items include video, widget, counter, clips, imagemanager, definedlinks
15+
plugins: [ fullscreen, table, video, imagemanager, definedlinks, clips]
16+
17+
# Set this to false to hide the button to toggle showing the HTML source of the field. Setting it
18+
# to plain `true` will override Redactor using the CodeMirror component, and it will show a plain
19+
# source code editor instead.
20+
# source: false
21+
22+
# By default, pressing the Enter key will start a new `<p>` paragraph. Set `breakline` to false
23+
# to insert a `<br>` tag instead.
24+
breakline: false
25+
26+
# Settings for images
27+
# Note: The current editor can only upload / insert images if they are granted
28+
# the 'upload' and 'list_files:files' permissions in `permissions.yaml`.
29+
image:
30+
thumbnail: 1000×1000×max
31+
imageResizable: false
32+
imagePosition: true
33+
34+
# The tags to show in the 'Formatting' drop-down menu. Note: Block-level tags only!
35+
# Use the `inlinestyles` plugin for inline tags
36+
formatting: ['p', 'blockquote', 'pre', 'h2', 'h3', 'h4', 'h5']
37+
38+
clips:
39+
- ['Lorem ipsum...', '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Respondent extrema primis, media utrisque, omnia omnibus. Sedulo, inquam, faciam. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Duo Reges: constructio interrete. Si longus, levis; Bonum integritas corporis: misera debilitas.</p>']
40+
- ['Callout (with list)', "<div class='callout-clip'><p>This is an example of the 'Callout clip'</p><ul><li>Item one</li><li>Item two</li><li>Item three</li></ul></div>"]
41+
42+
# Extra CSS and/or JS files to include in the backend. They can be sourced from the (provided) `/assets/` folder, or from the current theme
43+
includes:
44+
- 'assets/redactor/redactor-backend-extras.css'
45+
# - '%theme%/redactor-backend-extras.css'
46+
47+
# This setting allows to set minimum height for Redactor
48+
minHeight: 200px
49+
50+
# This setting allows to set maximum height for Redactor
51+
maxHeight: 700px
52+
53+
# This settings introduces visual indicators for HTML tags h1-h6 and div, helping users understand the structure of the document.
54+
structure: false
55+
56+
# This setting removes all new lines between tags in the Redactor source code
57+
removeNewLines: true
58+
59+
# This setting removes the script tag in the HTML source.
60+
removeScript: true
61+
62+
# To prevent Redactor from removing HTML comments, set this to false.
63+
removeComments: false
64+
65+
# This setting will remove all tags and formatting from pasted text, excluding links and images.
66+
pastePlainText: false
67+
68+
# Whenever you need to exclude images from the content that users can paste, this setting is here for you.
69+
pasteImages: false
70+
71+
# Set this to false, and all links will be pasted as plain text.
72+
pasteLinks: false
73+
74+
# This setting allows to turn off a browser spell checking for Redactor.
75+
spellcheck: true
76+
77+
# Whenever you need to control which block tags your users can paste, use this setting
78+
# pasteBlockTags: ['blockquote', 'p']
79+
80+
# Whenever you need to control which inline tags your users can paste, use this setting.
81+
# pasteInlineTags: ['a', 'br', 'strong', 'ins', 'code', 'del']
82+
83+
# If you have added custom plugins, place them in `/assets/redactor/plugins/`, add them to the mapping below.
84+
# plugins:
85+
# myplugin: ['myplugin/myplugin.min.js', '/myplugin/myplugin.min.css']
86+

‎src/RedactorConfig.php

+2-1
Original file line numberDiff line numberDiff line change
@@ -112,14 +112,15 @@ public function getDefaults()
112112

113113
'minHeight' => '200px',
114114
'maxHeight' => '700px',
115-
'structure' => true,
115+
'structure' => false,
116116
'pasteClean' => true,
117117
'source' => [
118118
'codemirror' => [
119119
'lineNumbers' => true,
120120
],
121121
],
122122
'buttonsTextLabeled' => false,
123+
'includes' => [],
123124
];
124125

125126
if (! $this->security->isGranted('upload')) {

‎src/TwigExtension.php

+39-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
namespace Bolt\Redactor;
66

77
use Bolt\Common\Json;
8+
use Bolt\Configuration\Config;
9+
use Psr\Container\ContainerInterface;
10+
use Symfony\Component\DependencyInjection\Container;
811
use Twig\Extension\AbstractExtension;
912
use Twig\TwigFunction;
1013
use Webmozart\PathUtil\Path;
@@ -14,9 +17,17 @@ class TwigExtension extends AbstractExtension
1417
/** @var RedactorConfig */
1518
private $redactorConfig;
1619

17-
public function __construct(RedactorConfig $redactorConfig)
20+
/** @var Config */
21+
private $boltConfig;
22+
23+
/** @var Container */
24+
private $container;
25+
26+
public function __construct(RedactorConfig $redactorConfig, Config $boltConfig, ContainerInterface $container)
1827
{
1928
$this->redactorConfig = $redactorConfig;
29+
$this->boltConfig = $boltConfig;
30+
$this->container = $container;
2031
}
2132

2233
public function getFunctions(): array
@@ -40,6 +51,7 @@ public function redactorSettings(): string
4051

4152
public function redactorIncludes(): string
4253
{
54+
// First, the includes needed for the various activated plugins
4355
$used = $this->redactorConfig->getConfig()['plugins'];
4456
$plugins = collect($this->redactorConfig->getPlugins());
4557

@@ -61,6 +73,32 @@ public function redactorIncludes(): string
6173
}
6274
}
6375

76+
// Next, if there are extra inludes configured, we add them here
77+
$includes = $this->redactorConfig->getConfig()['includes'];
78+
79+
foreach ($includes as $item) {
80+
81+
$item = $this->makePath($item);
82+
83+
if (Path::getExtension($item) === 'css') {
84+
$output .= sprintf('<link rel="stylesheet" href="%s">', $item);
85+
}
86+
if (Path::getExtension($item) === 'js') {
87+
$output .= sprintf('<script src="%s"></script>', $item);
88+
}
89+
$output .= "\n";
90+
}
91+
6492
return $output;
6593
}
94+
95+
private function makePath(string $item): string
96+
{
97+
$path = $this->boltConfig->getPath($item, false);
98+
$publicFolder = $this->container->getParameter('kernel.project_dir') . '/' . $this->container->getParameter('bolt.public_folder');
99+
100+
$path = '/' . Path::makeRelative($path, $publicFolder);
101+
102+
return $path;
103+
}
66104
}

‎templates/injector.html.twig

+3-35
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<link rel="stylesheet" href="{{ asset('assets/redactor/redactor.min.css', 'public') }}">
33
{{ redactor_includes() }}
44
<script>
5-
65
$R.options = {
76
callbacks: {
87
image: {
@@ -19,49 +18,18 @@
1918
}
2019
}
2120
};
22-
21+
2322
function initRedactors() {
2423
$('.redactor-field').removeClass('d-none');
2524
$R('.redactor-field', {{ redactor_settings() }});
2625
}
27-
26+
2827
$(document).on('DOMNodeInserted', function(e) {
2928
if ( $(e.target).hasClass('collection-item') ) {
3029
initRedactors();
3130
}
3231
});
33-
34-
initRedactors();
3532
33+
initRedactors();
3634
</script>
37-
<style>
38-
.redactor-source, .redactor-styles {
39-
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
40-
}
41-
42-
.redactor-styles img {
43-
max-width: 75%;
44-
}
45-
46-
.redactor-styles blockquote {
47-
background-color: #F5F5F5;
48-
border-left: 5px solid #dbdbdb;
49-
padding: 1.25em 1.5em;
50-
font-style: italic;
51-
color: #31363A;
52-
}
53-
54-
.redactor-styles blockquote p {
55-
margin: 0;
56-
}
57-
58-
{# See: https://github.com/bolt/redactor/issues/3 #}
59-
.redactor-air, .redactor-toolbar {
60-
z-index: 40;
61-
}
62-
63-
.redactor-air, .redactor-toolbar a {
64-
text-decoration: none !important;
65-
}
66-
</style>
6735

0 commit comments

Comments
 (0)