elementor / includes / widgets / text-editor.php

text-editor.php in Elementor Website Builder – more than just a page builder 3.19.0-dev3, at includes/widgets/text-editor.php

494 lines 11.2 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
11	/**
12	* Elementor text editor widget.
13	*
14	* Elementor widget that displays a WYSIWYG text editor, just like the WordPress
15	* editor.
16	*
17	* @since 1.0.0
18	*/
19	class Widget_Text_Editor extends Widget_Base {
20
21	/**
22	* Get widget name.
23	*
24	* Retrieve text editor widget name.
25	*
26	* @since 1.0.0
27	* @access public
28	*
29	* @return string Widget name.
30	*/
31	public function get_name() {
32	return 'text-editor';
33	}
34
35	/**
36	* Get widget title.
37	*
38	* Retrieve text editor widget title.
39	*
40	* @since 1.0.0
41	* @access public
42	*
43	* @return string Widget title.
44	*/
45	public function get_title() {
46	return esc_html__( 'Text Editor', 'elementor' );
47	}
48
49	/**
50	* Get widget icon.
51	*
52	* Retrieve text editor widget icon.
53	*
54	* @since 1.0.0
55	* @access public
56	*
57	* @return string Widget icon.
58	*/
59	public function get_icon() {
60	return 'eicon-text';
61	}
62
63	/**
64	* Get widget categories.
65	*
66	* Retrieve the list of categories the text editor widget belongs to.
67	*
68	* Used to determine where to display the widget in the editor.
69	*
70	* @since 2.0.0
71	* @access public
72	*
73	* @return array Widget categories.
74	*/
75	public function get_categories() {
76	return [ 'basic' ];
77	}
78
79	/**
80	* Get widget keywords.
81	*
82	* Retrieve the list of keywords the widget belongs to.
83	*
84	* @since 2.1.0
85	* @access public
86	*
87	* @return array Widget keywords.
88	*/
89	public function get_keywords() {
90	return [ 'text', 'editor' ];
91	}
92
93	/**
94	* Register text editor widget controls.
95	*
96	* Adds different input fields to allow the user to change and customize the widget settings.
97	*
98	* @since 3.1.0
99	* @access protected
100	*/
101	protected function register_controls() {
102	$this->start_controls_section(
103	'section_editor',
104	[
105	'label' => esc_html__( 'Text Editor', 'elementor' ),
106	]
107	);
108
109	$this->add_control(
110	'editor',
111	[
112	'label' => '',
113	'type' => Controls_Manager::WYSIWYG,
114	'default' => '<p>' . esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ) . '</p>',
115	]
116	);
117
118	$this->add_control(
119	'drop_cap', [
120	'label' => esc_html__( 'Drop Cap', 'elementor' ),
121	'type' => Controls_Manager::SWITCHER,
122	'label_off' => esc_html__( 'Off', 'elementor' ),
123	'label_on' => esc_html__( 'On', 'elementor' ),
124	'prefix_class' => 'elementor-drop-cap-',
125	'frontend_available' => true,
126	]
127	);
128
129	$text_columns = range( 1, 10 );
130	$text_columns = array_combine( $text_columns, $text_columns );
131	$text_columns[''] = esc_html__( 'Default', 'elementor' );
132
133	$this->add_responsive_control(
134	'text_columns',
135	[
136	'label' => esc_html__( 'Columns', 'elementor' ),
137	'type' => Controls_Manager::SELECT,
138	'separator' => 'before',
139	'options' => $text_columns,
140	'selectors' => [
141	'{{WRAPPER}}' => 'columns: {{VALUE}};',
142	],
143	]
144	);
145
146	$this->add_responsive_control(
147	'column_gap',
148	[
149	'label' => esc_html__( 'Columns Gap', 'elementor' ),
150	'type' => Controls_Manager::SLIDER,
151	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
152	'range' => [
153	'px' => [
154	'max' => 100,
155	],
156	'%' => [
157	'max' => 10,
158	'step' => 0.1,
159	],
160	'vw' => [
161	'max' => 10,
162	'step' => 0.1,
163	],
164	'em' => [
165	'max' => 10,
166	],
167	'rem' => [
168	'max' => 10,
169	],
170	],
171	'selectors' => [
172	'{{WRAPPER}}' => 'column-gap: {{SIZE}}{{UNIT}};',
173	],
174	]
175	);
176
177	$this->end_controls_section();
178
179	$this->start_controls_section(
180	'section_style',
181	[
182	'label' => esc_html__( 'Text Editor', 'elementor' ),
183	'tab' => Controls_Manager::TAB_STYLE,
184	]
185	);
186
187	$this->add_responsive_control(
188	'align',
189	[
190	'label' => esc_html__( 'Alignment', 'elementor' ),
191	'type' => Controls_Manager::CHOOSE,
192	'options' => [
193	'left' => [
194	'title' => esc_html__( 'Left', 'elementor' ),
195	'icon' => 'eicon-text-align-left',
196	],
197	'center' => [
198	'title' => esc_html__( 'Center', 'elementor' ),
199	'icon' => 'eicon-text-align-center',
200	],
201	'right' => [
202	'title' => esc_html__( 'Right', 'elementor' ),
203	'icon' => 'eicon-text-align-right',
204	],
205	'justify' => [
206	'title' => esc_html__( 'Justified', 'elementor' ),
207	'icon' => 'eicon-text-align-justify',
208	],
209	],
210	'selectors' => [
211	'{{WRAPPER}}' => 'text-align: {{VALUE}};',
212	],
213	]
214	);
215
216	$this->add_control(
217	'text_color',
218	[
219	'label' => esc_html__( 'Text Color', 'elementor' ),
220	'type' => Controls_Manager::COLOR,
221	'default' => '',
222	'selectors' => [
223	'{{WRAPPER}}' => 'color: {{VALUE}};',
224	],
225	'global' => [
226	'default' => Global_Colors::COLOR_TEXT,
227	],
228	]
229	);
230
231	$this->add_group_control(
232	Group_Control_Typography::get_type(),
233	[
234	'name' => 'typography',
235	'global' => [
236	'default' => Global_Typography::TYPOGRAPHY_TEXT,
237	],
238	]
239	);
240
241	$this->add_group_control(
242	Group_Control_Text_Shadow::get_type(),
243	[
244	'name' => 'text_shadow',
245	'selector' => '{{WRAPPER}}',
246	]
247	);
248
249	$this->end_controls_section();
250
251	$this->start_controls_section(
252	'section_drop_cap',
253	[
254	'label' => esc_html__( 'Drop Cap', 'elementor' ),
255	'tab' => Controls_Manager::TAB_STYLE,
256	'condition' => [
257	'drop_cap' => 'yes',
258	],
259	]
260	);
261
262	$this->add_control(
263	'drop_cap_view',
264	[
265	'label' => esc_html__( 'View', 'elementor' ),
266	'type' => Controls_Manager::SELECT,
267	'options' => [
268	'default' => esc_html__( 'Default', 'elementor' ),
269	'stacked' => esc_html__( 'Stacked', 'elementor' ),
270	'framed' => esc_html__( 'Framed', 'elementor' ),
271	],
272	'default' => 'default',
273	'prefix_class' => 'elementor-drop-cap-view-',
274	]
275	);
276
277	$this->add_control(
278	'drop_cap_primary_color',
279	[
280	'label' => esc_html__( 'Primary Color', 'elementor' ),
281	'type' => Controls_Manager::COLOR,
282	'selectors' => [
283	'{{WRAPPER}}.elementor-drop-cap-view-stacked .elementor-drop-cap' => 'background-color: {{VALUE}};',
284	'{{WRAPPER}}.elementor-drop-cap-view-framed .elementor-drop-cap, {{WRAPPER}}.elementor-drop-cap-view-default .elementor-drop-cap' => 'color: {{VALUE}}; border-color: {{VALUE}};',
285	],
286	'global' => [
287	'default' => Global_Colors::COLOR_PRIMARY,
288	],
289	]
290	);
291
292	$this->add_control(
293	'drop_cap_secondary_color',
294	[
295	'label' => esc_html__( 'Secondary Color', 'elementor' ),
296	'type' => Controls_Manager::COLOR,
297	'selectors' => [
298	'{{WRAPPER}}.elementor-drop-cap-view-framed .elementor-drop-cap' => 'background-color: {{VALUE}};',
299	'{{WRAPPER}}.elementor-drop-cap-view-stacked .elementor-drop-cap' => 'color: {{VALUE}};',
300	],
301	'condition' => [
302	'drop_cap_view!' => 'default',
303	],
304	]
305	);
306
307	$this->add_group_control(
308	Group_Control_Text_Shadow::get_type(),
309	[
310	'name' => 'drop_cap_shadow',
311	'selector' => '{{WRAPPER}} .elementor-drop-cap',
312	]
313	);
314
315	$this->add_control(
316	'drop_cap_size',
317	[
318	'label' => esc_html__( 'Size', 'elementor' ),
319	'type' => Controls_Manager::SLIDER,
320	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
321	'default' => [
322	'size' => 5,
323	],
324	'range' => [
325	'px' => [
326	'max' => 30,
327	],
328	'em' => [
329	'max' => 3,
330	],
331	'rem' => [
332	'max' => 3,
333	],
334	],
335	'selectors' => [
336	'{{WRAPPER}} .elementor-drop-cap' => 'padding: {{SIZE}}{{UNIT}};',
337	],
338	'condition' => [
339	'drop_cap_view!' => 'default',
340	],
341	]
342	);
343
344	$this->add_control(
345	'drop_cap_space',
346	[
347	'label' => esc_html__( 'Space', 'elementor' ),
348	'type' => Controls_Manager::SLIDER,
349	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
350	'default' => [
351	'size' => 10,
352	],
353	'range' => [
354	'px' => [
355	'max' => 50,
356	],
357	'em' => [
358	'max' => 5,
359	],
360	'rem' => [
361	'max' => 5,
362	],
363	],
364	'selectors' => [
365	'body:not(.rtl) {{WRAPPER}} .elementor-drop-cap' => 'margin-right: {{SIZE}}{{UNIT}};',
366	'body.rtl {{WRAPPER}} .elementor-drop-cap' => 'margin-left: {{SIZE}}{{UNIT}};',
367	],
368	]
369	);
370
371	$this->add_control(
372	'drop_cap_border_radius',
373	[
374	'label' => esc_html__( 'Border Radius', 'elementor' ),
375	'type' => Controls_Manager::SLIDER,
376	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
377	'default' => [
378	'unit' => '%',
379	],
380	'range' => [
381	'%' => [
382	'max' => 50,
383	],
384	],
385	'selectors' => [
386	'{{WRAPPER}} .elementor-drop-cap' => 'border-radius: {{SIZE}}{{UNIT}};',
387	],
388	]
389	);
390
391	$this->add_control(
392	'drop_cap_border_width', [
393	'label' => esc_html__( 'Border Width', 'elementor' ),
394	'type' => Controls_Manager::DIMENSIONS,
395	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
396	'selectors' => [
397	'{{WRAPPER}} .elementor-drop-cap' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
398	],
399	'condition' => [
400	'drop_cap_view' => 'framed',
401	],
402	]
403	);
404
405	$this->add_group_control(
406	Group_Control_Typography::get_type(),
407	[
408	'name' => 'drop_cap_typography',
409	'selector' => '{{WRAPPER}} .elementor-drop-cap-letter',
410	'exclude' => [
411	'letter_spacing',
412	],
413	]
414	);
415
416	$this->end_controls_section();
417	}
418
419	/**
420	* Render text editor widget output on the frontend.
421	*
422	* Written in PHP and used to generate the final HTML.
423	*
424	* @since 1.0.0
425	* @access protected
426	*/
427	protected function render() {
428	$should_render_inline_editing = Plugin::$instance->editor->is_edit_mode();
429
430	$editor_content = $this->get_settings_for_display( 'editor' );
431	$editor_content = $this->parse_text_editor( $editor_content );
432
433	if ( $should_render_inline_editing ) {
434	$this->add_render_attribute( 'editor', 'class', [ 'elementor-text-editor', 'elementor-clearfix' ] );
435	}
436
437	$this->add_inline_editing_attributes( 'editor', 'advanced' );
438	?>
439	<?php if ( $should_render_inline_editing ) { ?>
440	<div <?php $this->print_render_attribute_string( 'editor' ); ?>>
441	<?php } ?>
442	<?php // PHPCS - the main text of a widget should not be escaped.
443	echo $editor_content; // phpcs:ignore WordPress.Security.EscapeOutput ?>
444	<?php if ( $should_render_inline_editing ) { ?>
445	</div>
446	<?php } ?>
447	<?php
448	}
449
450	/**
451	* Render text editor widget as plain content.
452	*
453	* Override the default behavior by printing the content without rendering it.
454	*
455	* @since 1.0.0
456	* @access public
457	*/
458	public function render_plain_content() {
459	// In plain mode, render without shortcode
460	$this->print_unescaped_setting( 'editor' );
461	}
462
463	/**
464	* Render text editor widget output in the editor.
465	*
466	* Written as a Backbone JavaScript template and used to generate the live preview.
467	*
468	* @since 2.9.0
469	* @access protected
470	*/
471	protected function content_template() {
472	?>
473	<#
474	const shouldRenderInlineEditing = elementorFrontend.isEditMode();
475
476	if ( shouldRenderInlineEditing ) {
477	view.addRenderAttribute( 'editor', 'class', [ 'elementor-text-editor', 'elementor-clearfix' ] );
478	}
479
480	view.addInlineEditingAttributes( 'editor', 'advanced' );
481
482	if ( shouldRenderInlineEditing ) { #>
483	<div {{{ view.getRenderAttributeString( 'editor' ) }}}>
484	<# } #>
485
486	{{{ settings.editor }}}
487
488	<# if ( shouldRenderInlineEditing ) { #>
489	</div>
490	<# } #>
491	<?php
492	}
493	}
494