Skip to content

Commit f8c04f3

Browse files
jissereitsmajissereitsma
committed
Basic editor functionality
1 parent 0007c84 commit f8c04f3

7 files changed

Lines changed: 184 additions & 0 deletions

File tree

‎Form/Field/FieldType/Editor.php‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<?php declare(strict_types=1);
2+
3+
namespace Loki\AdminComponents\Form\Field\FieldType;
4+
5+
use Loki\AdminComponents\Form\Field\FieldTypeInterface;
6+
7+
class Editor implements FieldTypeInterface
8+
{
9+
public function getTemplate(): string
10+
{
11+
return 'Loki_AdminComponents::form/field_type/editor.phtml';
12+
}
13+
}

‎ViewModel/Form/Field/Editor.php‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<?php declare(strict_types=1);
2+
3+
namespace Loki\AdminComponents\ViewModel\Form\Field;
4+
5+
use Magento\Framework\View\Element\Block\ArgumentInterface;
6+
7+
class Editor implements ArgumentInterface
8+
{
9+
public function __construct(
10+
private array $toolbar = [],
11+
private array $plugins = []
12+
) {
13+
}
14+
15+
public function getToolbar(): array
16+
{
17+
return $this->toolbar;
18+
}
19+
20+
public function getToolbarAsString(): string
21+
{
22+
$toolbar = [];
23+
foreach ($this->getToolbar() as $toolbarGroup) {
24+
if (is_array($toolbarGroup) && !empty($toolbarGroup)) {
25+
$toolbarGroup = implode(' ', $toolbarGroup);
26+
}
27+
28+
if (false === is_string($toolbarGroup)) {
29+
continue;
30+
}
31+
32+
$toolbar[] = $toolbarGroup;
33+
}
34+
35+
return implode(' | ', $toolbar);
36+
37+
}
38+
39+
public function getPlugins(): array
40+
{
41+
$plugins = [];
42+
foreach ($this->plugins as $plugin) {
43+
if (is_string($plugin)) {
44+
$plugins[] = $plugin;
45+
}
46+
}
47+
48+
return $plugins;
49+
}
50+
51+
public function getPluginsAsJson(): string
52+
{
53+
return json_encode(array_values($this->getPlugins()));
54+
}
55+
56+
public function getContentStyle(): string
57+
{
58+
return 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }';
59+
}
60+
}

‎etc/adminhtml/di.xml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,37 @@
77
<type name="Magento\Framework\View\Element\Template">
88
<plugin name="Loki_AdminComponents::addCspInlineScripts" type="Loki\AdminComponents\Plugin\AddCspInlineScripts"/>
99
</type>
10+
11+
<type name="Loki\AdminComponents\ViewModel\Form\Field\Editor">
12+
<arguments>
13+
<argument name="toolbar" xsi:type="array">
14+
<item name="undo_redo" xsi:type="string">undo redo</item>
15+
<item name="blocks" xsi:type="string">blocks</item>
16+
<item name="textstyle" xsi:type="string">bold italic backcolor</item>
17+
<item name="align" xsi:type="string">alignleft aligncenter</item>
18+
<item name="list" xsi:type="string">bullist numlist outdent indent</item>
19+
<item name="removeformat" xsi:type="string">removeformat</item>
20+
<item name="help" xsi:type="string">help</item>
21+
</argument>
22+
<argument name="plugins" xsi:type="array">
23+
<item name="advlist" xsi:type="string">advlist</item>
24+
<item name="autolink" xsi:type="string">autolink</item>
25+
<item name="lists" xsi:type="string">lists</item>
26+
<item name="link" xsi:type="string">link</item>
27+
<item name="image" xsi:type="string">image</item>
28+
<item name="charmap" xsi:type="string">charmap</item>
29+
<item name="preview" xsi:type="string">preview</item>
30+
<item name="anchor" xsi:type="string">anchor</item>
31+
<item name="searchreplace" xsi:type="string">searchreplace</item>
32+
<item name="visualblocks" xsi:type="string">visualblocks</item>
33+
<item name="code" xsi:type="string">code</item>
34+
<item name="fullscreen" xsi:type="string">fullscreen</item>
35+
<item name="insertdatetime" xsi:type="string">insertdatetime</item>
36+
<item name="media" xsi:type="string">media</item>
37+
<item name="table" xsi:type="string">table</item>
38+
<item name="help" xsi:type="string">help</item>
39+
<item name="wordcount" xsi:type="string">wordcount</item>
40+
</argument>
41+
</arguments>
42+
</type>
1043
</config>

‎etc/di.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
<item name="view" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\View</item>
3434
<item name="input" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\Input</item>
3535
<item name="textarea" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\Textarea</item>
36+
<item name="editor" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\Editor</item>
3637
<item name="date" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\Date</item>
3738
<item name="datetime" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\Datetime</item>
3839
<item name="number" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\Number</item>

‎view/adminhtml/layout/loki_admin_components_form.xml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@
2929
<block
3030
name="loki-admin.script.component.form-component" as="form"
3131
template="Loki_AdminComponents::script/component/form-component.phtml"/>
32+
33+
<block
34+
name="loki-admin.script.component.editor-component" as="editor"
35+
template="Loki_AdminComponents::script/component/editor-component.phtml"/>
3236
</referenceBlock>
3337
</body>
3438
</page>

‎view/adminhtml/templates/form/field_type/editor.phtml‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<?php
2+
declare(strict_types=1);
3+
4+
use Magento\Framework\Escaper;
5+
use Magento\Framework\View\Element\Template;
6+
use Loki\AdminComponents\Form\Field\Field;
7+
use Loki\AdminComponents\Form\Field\FieldType\Textarea;
8+
use Loki\Components\Util\Block\TemplateRenderer;
9+
10+
/** @var Escaper $escaper */
11+
/** @var Template $block */
12+
/** @var Field $field */
13+
/** @var Textarea $fieldType */
14+
/** @var TemplateRenderer $templateRenderer */
15+
16+
$field = $block->getField();
17+
$fieldAttributes = $field->getFieldAttributes();
18+
$fieldType = $field->getFieldType();
19+
$identifier = $field->getScope() . '.' . $field->getCode();
20+
?>
21+
<div x-data="LokiAdminFormEditorComponent">
22+
<textarea
23+
x-ref="editor"
24+
class="admin__control-text"
25+
name="<?= $escaper->escapeHtml($field->getCode()) ?>"
26+
data-name="<?= $escaper->escapeHtml($field->getCode()) ?>"
27+
<?php foreach ($fieldAttributes as $attributeName => $attributeValue) : ?>
28+
<?= /* @noEscape */
29+
$attributeName ?>="<?= /* @noEscape */
30+
$attributeValue ?>"
31+
<?php endforeach; ?>
32+
:value="<?= $escaper->escapeHtml($identifier) ?>"
33+
@change="<?= $escaper->escapeHtml($field->getAlpineSetter()) ?>"
34+
></textarea>
35+
</div>

‎view/adminhtml/templates/script/component/editor-component.phtml‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<?php
2+
declare(strict_types=1);
3+
4+
use Loki\AdminComponents\ViewModel\Form\Field\Editor;
5+
use Loki\Components\Factory\ViewModelFactory;
6+
use Magento\Framework\View\Element\Template;
7+
8+
/** @var Template $block */
9+
/** @var ViewModelFactory $viewModelFactory */
10+
/** @var Editor $editor */
11+
$editor = $viewModelFactory->create(Editor::class);
12+
?>
13+
<script>
14+
document.addEventListener('alpine:init', () => {
15+
Alpine.data('LokiAdminFormEditorComponent', () => ({
16+
editor: null,
17+
init() {
18+
const item = this.item;
19+
const identifier = this.$refs.editor.getAttribute('data-name');
20+
21+
require(['tinymce'], (tinymce) => {
22+
tinymce.init({
23+
target: this.$refs.editor,
24+
height: 500,
25+
plugins: JSON.parse('<?= $editor->getPluginsAsJson() ?>'),
26+
toolbar: '<?= $editor->getToolbarAsString() ?>',
27+
content_style: '<?= $editor->getContentStyle() ?>',
28+
setup(editor) {
29+
editor.on('change keyup input', () => {
30+
item[identifier] = editor.getContent();
31+
});
32+
}
33+
});
34+
});
35+
}
36+
}));
37+
});
38+
</script>

0 commit comments

Comments
 (0)