Skip to content

Commit c0738f8

Browse files
danmooney2danmooney2
committed
Merge remote-tracking branch 'origin/MC-1438' into MC-1438
2 parents 06edeaa + 0b674bf commit c0738f8

File tree

1 file changed

+95
-26
lines changed

1 file changed

+95
-26
lines changed

‎app/code/Magento/PageBuilder/docs/inline-editing-component.md

Lines changed: 95 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,16 @@
5858
[How to create custom PageBuilder content type container]: how-to-create-custom-content-type-container.md
5959

6060
## What's in this topic
61-
This topic describes how to add a reusable inline text editing text component to the PageBuilder stage for a content type.
61+
62+
This topic describes how to add a reusable inline text editing component to the PageBuilder stage for a content type.
6263

6364
## Overview
6465

6566
To add inline editing customization to PageBuilder:
6667
1. [Add configuration for the inline editor](#add-configuration-for-the-inline-text-editor)
6768
2. [Update the `<YourModule>/view/adminhtml/web/js/content-type/<content_type_name>/preview.js` file](#update-the-yourmoduleviewadminhtmlwebjscontent-typecontent_type_namepreviewjs-file-js-file)
6869
3. [Update the preview template to display the inline editor component](#update-the-preview-template-to-display-the-inline-text-editor-component)
70+
4. [Extend the component](#extend-the-component) (optional)
6971

7072
## Add configuration for the inline text editor
7173

@@ -79,9 +81,6 @@ To add configuration for the inline text editor:
7981
<additional_data>
8082
<item name="wysiwygConfig" xsi:type="array">
8183
<item name="wysiwygConfigData" xsi:type="object">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\Wysiwyg\Config</item>
82-
<item name="parentSelectorsToUnderlay" xsi:type="array">
83-
<item name="0" xsi:type="string">.column-container</item>
84-
<item name="1" xsi:type="string">.row-container</item>
8584
</item>
8685
</item>
8786
</additional_data>
@@ -100,38 +99,38 @@ To add configuration for the inline text editor:
10099
</type>
101100
```
102101

103-
## Update the <YourModule>/view/adminhtml/web/js/content-type/<content_type_name>/preview.js file
102+
## Update the `<YourModule>/view/adminhtml/web/js/content-type/<content_type_name>/preview.js` file
104103

105104
To update the `<YourModule>/view/adminhtml/web/js/content-type/<content_type_name>/preview.js` file:
106105

107106
1. Add the inline text editing component, `Magento_PageBuilder/js/content-type/text`, dependency:
108107

109108
``` js
110-
import Wysiwyg from "../wysiwyg";
109+
define([
110+
"Magento_PageBuilder/js/config",
111+
"Magento_PageBuilder/js/content-type/preview",
112+
"Magento_PageBuilder/js/content-type/wysiwyg/factory"
113+
], function (_config, _preview, _factory) { ...
111114
```
112115
113-
If you are creating a custom content type, however, use an existing content type that already implements a WYSIWYG as your template. `Magento_PageBuilder/js/content-type/text` can be used as a reference for injecting the required inline text editor dependency into your own custom content type:
116+
If you are creating a custom content type, however, use an existing content type that already implements a WYSIWYG as your template. `Magento_PageBuilder/js/content-type/text` can be used as a reference for injecting the required inline text editor dependency into your own custom content type via `Magento_PageBuilder/js/content-type/wysiwyg/factory`:
114117
115118
``` js
116-
/**
117-
* @param {HTMLElement} element
118-
*/
119-
public initWysiwyg(element: HTMLElement) {
120-
if (!Config.getConfig("can_use_inline_editing_on_stage")) {
121-
return;
122-
}
123-
119+
initWysiwyg: function (element) {
120+
var self = this;
124121
this.element = element;
125-
126-
element.id = this.parent.id + "-editor";
127-
128-
this.wysiwyg = new Wysiwyg(
122+
element.id = this.parent.id + '-editor';
123+
factory(
129124
this.parent.id,
130125
element.id,
126+
this.config.name,
131127
this.config.additional_data.wysiwygConfig.wysiwygConfigData,
132128
this.parent.dataStore,
133-
);
134-
...
129+
'content'
130+
).then(function (wysiwyg) {
131+
self.wysiwyg = wysiwyg;
132+
});
133+
}
135134
```
136135
137136
2. Add configuration for the inline text editor in the `<content-type-name>.xml` file.
@@ -144,10 +143,80 @@ If you want to create your own custom template, you can update your custom previ
144143
145144
``` html
146145
<div class="pagebuilder-content-type pagebuilder-text" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
147-
<div class="inline-wysiwyg" ko-style="data.main.style" css="data.main.css" attr="data.main.attributes" afterRender="initWysiwyg">
148-
<div html="data.main.html"/>
149-
</div>
150-
<div class="placeholder-text" ifnot="data.main.html" attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" translate="'Edit Text'"></div>
151-
<render args="getOptions().template" />
146+
<div if="isWysiwygSupported()" class="inline-wysiwyg" ko-style="data.main.style" css="data.main.css" attr="data.main.attributes" afterRender="initWysiwyg">
147+
<div html="data.main.html" />
148+
</div>
149+
<div if="isWysiwygSupported()" class="placeholder-text" ifnot="data.main.html" translate="'Edit Text'"></div>
150+
<div ifnot="isWysiwygSupported()">
151+
<textarea
152+
class="inline-wysiwyg-textarea"
153+
afterRender="initTextarea"
154+
event="{keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur}"
155+
data-bind="attr: { placeholder: $t('Edit Text') }" />
156+
</div>
157+
<render args="getOptions().template" />
152158
</div>
153159
```
160+
161+
## Extend the component
162+
163+
You can override the default inline text editor component with your own component by adding relevant configuration to the `di.xml` file.
164+
165+
To extend the inline text editor component:
166+
167+
1. Add configuration to the `di.xml` file for your component type preview:
168+
169+
``` xml
170+
<type name="Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\Wysiwyg\Config">
171+
<arguments>
172+
<argument name="editors" xsi:type="array">
173+
<item name="mage/adminhtml/wysiwyg/tiny_mce/tinymce4Adapter" xsi:type="array">
174+
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/wysiwyg/tinymce4</item>
175+
<item name="component_initializers" xsi:type="array">
176+
<item name="text" xsi:type="string">Magento_PageBuilder/js/content-type/text/wysiwyg/tinymce4/component-initializer</item>
177+
</item>
178+
<item name="config_modifiers" xsi:type="array">
179+
<item name="text" xsi:type="string">Magento_PageBuilder/js/content-type/text/wysiwyg/tinymce4/config-modifier</item>
180+
</item>
181+
<item name="mode" xsi:type="string">inline</item>
182+
<item name="minToolbarWidth" xsi:type="number">360</item>
183+
<item name="parentSelectorsToUnderlay" xsi:type="array">
184+
<item name="0" xsi:type="string">.column-container</item>
185+
<item name="1" xsi:type="string">.row-container</item>
186+
</item>
187+
</item>
188+
</argument>
189+
</arguments>
190+
</type>
191+
```
192+
193+
2. Specify the name of a preferred editor, as noted in the system configuration path `cms/wysiwyg/editor`.
194+
195+
This configuration can be specified for every editor that is supported for display on the inline editing mode on the stage. `factory` then returns the WYSIWYG instance referenced in your current Magento configuration.
196+
197+
3. Specify the `component_initializers`, per content type, where the inline text editor component will be used. Within this configuration, you can extend the existing event logic:
198+
199+
``` javascript
200+
initialize: function(wysiwyg) {
201+
var tinymce = wysiwyg.getAdapter();
202+
this.element = $("#" + wysiwyg.elementId);
203+
this.config = wysiwyg.config;
204+
tinymce.eventBus.attachEventHandler('afterFocus', this.onFocus.bind(this));
205+
tinymce.eventBus.attachEventHandler('afterBlur', this.onBlur.bind(this));
206+
};
207+
...
208+
onFocus: function () {
209+
//implement your logic here
210+
};
211+
...
212+
```
213+
The following events can be extended for the default TinyMCE4 editor:
214+
- `onFocus`
215+
- `onBlur`
216+
- `afterChangeContent`
217+
218+
4. Specify the list of modifers, `config_modifiers`, that can update the WYSIWYG configuration before the component is initialized. These configuration keys can also be used to update the default WYSIWYG editor (TinyMCE4).
219+
5. Specify the `mode` in which TinyMCE4 will be rendered on the stage.
220+
6. Specify the `minToolbarWidth` to limit the width of TinyMCE4. If a component is used with a content type configured to a small width, this will limit the width to match.
221+
7. Specify the `parentSelectorsToUnderlay` for TinyMCE4 to utilize an array of selectors for applying the z-index, which will prevent the toolbar from overlaying content type elements.
222+

0 commit comments

Comments
 (0)