elementor / includes / widgets / text-editor.php

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

520 lines 11.9 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	$this->add_responsive_control(
130	'text_columns',
131	[
132	'label' => esc_html__( 'Columns', 'elementor' ),
133	'type' => Controls_Manager::SELECT,
134	'separator' => 'before',
135	'options' => [
136	'' => esc_html__( 'Default', 'elementor' ),
137	'1' => esc_html__( '1', 'elementor' ),
138	'2' => esc_html__( '2', 'elementor' ),
139	'3' => esc_html__( '3', 'elementor' ),
140	'4' => esc_html__( '4', 'elementor' ),
141	'5' => esc_html__( '5', 'elementor' ),
142	'6' => esc_html__( '6', 'elementor' ),
143	'7' => esc_html__( '7', 'elementor' ),
144	'8' => esc_html__( '8', 'elementor' ),
145	'9' => esc_html__( '9', 'elementor' ),
146	'10' => esc_html__( '10', 'elementor' ),
147	],
148	'selectors' => [
149	'{{WRAPPER}}' => 'columns: {{VALUE}};',
150	],
151	]
152	);
153
154	$this->add_responsive_control(
155	'column_gap',
156	[
157	'label' => esc_html__( 'Columns Gap', 'elementor' ),
158	'type' => Controls_Manager::SLIDER,
159	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
160	'range' => [
161	'px' => [
162	'max' => 100,
163	],
164	'%' => [
165	'max' => 10,
166	'step' => 0.1,
167	],
168	'vw' => [
169	'max' => 10,
170	'step' => 0.1,
171	],
172	'em' => [
173	'max' => 10,
174	],
175	'rem' => [
176	'max' => 10,
177	],
178	],
179	'selectors' => [
180	'{{WRAPPER}}' => 'column-gap: {{SIZE}}{{UNIT}};',
181	],
182	'conditions' => [
183	'relation' => 'or',
184	'terms' => [
185	[
186	'name' => 'text_columns',
187	'operator' => '>',
188	'value' => 1,
189	],
190	[
191	'name' => 'text_columns',
192	'operator' => '===',
193	'value' => '',
194	],
195	],
196	],
197	]
198	);
199
200	$this->end_controls_section();
201
202	$this->start_controls_section(
203	'section_style',
204	[
205	'label' => esc_html__( 'Text Editor', 'elementor' ),
206	'tab' => Controls_Manager::TAB_STYLE,
207	]
208	);
209
210	$this->add_responsive_control(
211	'align',
212	[
213	'label' => esc_html__( 'Alignment', 'elementor' ),
214	'type' => Controls_Manager::CHOOSE,
215	'options' => [
216	'left' => [
217	'title' => esc_html__( 'Left', 'elementor' ),
218	'icon' => 'eicon-text-align-left',
219	],
220	'center' => [
221	'title' => esc_html__( 'Center', 'elementor' ),
222	'icon' => 'eicon-text-align-center',
223	],
224	'right' => [
225	'title' => esc_html__( 'Right', 'elementor' ),
226	'icon' => 'eicon-text-align-right',
227	],
228	'justify' => [
229	'title' => esc_html__( 'Justified', 'elementor' ),
230	'icon' => 'eicon-text-align-justify',
231	],
232	],
233	'selectors' => [
234	'{{WRAPPER}}' => 'text-align: {{VALUE}};',
235	],
236	]
237	);
238
239	$this->add_control(
240	'text_color',
241	[
242	'label' => esc_html__( 'Text Color', 'elementor' ),
243	'type' => Controls_Manager::COLOR,
244	'default' => '',
245	'selectors' => [
246	'{{WRAPPER}}' => 'color: {{VALUE}};',
247	],
248	'global' => [
249	'default' => Global_Colors::COLOR_TEXT,
250	],
251	]
252	);
253
254	$this->add_group_control(
255	Group_Control_Typography::get_type(),
256	[
257	'name' => 'typography',
258	'global' => [
259	'default' => Global_Typography::TYPOGRAPHY_TEXT,
260	],
261	]
262	);
263
264	$this->add_group_control(
265	Group_Control_Text_Shadow::get_type(),
266	[
267	'name' => 'text_shadow',
268	'selector' => '{{WRAPPER}}',
269	]
270	);
271
272	$this->end_controls_section();
273
274	$this->start_controls_section(
275	'section_drop_cap',
276	[
277	'label' => esc_html__( 'Drop Cap', 'elementor' ),
278	'tab' => Controls_Manager::TAB_STYLE,
279	'condition' => [
280	'drop_cap' => 'yes',
281	],
282	]
283	);
284
285	$this->add_control(
286	'drop_cap_view',
287	[
288	'label' => esc_html__( 'View', 'elementor' ),
289	'type' => Controls_Manager::SELECT,
290	'options' => [
291	'default' => esc_html__( 'Default', 'elementor' ),
292	'stacked' => esc_html__( 'Stacked', 'elementor' ),
293	'framed' => esc_html__( 'Framed', 'elementor' ),
294	],
295	'default' => 'default',
296	'prefix_class' => 'elementor-drop-cap-view-',
297	]
298	);
299
300	$this->add_control(
301	'drop_cap_primary_color',
302	[
303	'label' => esc_html__( 'Primary Color', 'elementor' ),
304	'type' => Controls_Manager::COLOR,
305	'selectors' => [
306	'{{WRAPPER}}.elementor-drop-cap-view-stacked .elementor-drop-cap' => 'background-color: {{VALUE}};',
307	'{{WRAPPER}}.elementor-drop-cap-view-framed .elementor-drop-cap, {{WRAPPER}}.elementor-drop-cap-view-default .elementor-drop-cap' => 'color: {{VALUE}}; border-color: {{VALUE}};',
308	],
309	'global' => [
310	'default' => Global_Colors::COLOR_PRIMARY,
311	],
312	]
313	);
314
315	$this->add_control(
316	'drop_cap_secondary_color',
317	[
318	'label' => esc_html__( 'Secondary Color', 'elementor' ),
319	'type' => Controls_Manager::COLOR,
320	'selectors' => [
321	'{{WRAPPER}}.elementor-drop-cap-view-framed .elementor-drop-cap' => 'background-color: {{VALUE}};',
322	'{{WRAPPER}}.elementor-drop-cap-view-stacked .elementor-drop-cap' => 'color: {{VALUE}};',
323	],
324	'condition' => [
325	'drop_cap_view!' => 'default',
326	],
327	]
328	);
329
330	$this->add_group_control(
331	Group_Control_Text_Shadow::get_type(),
332	[
333	'name' => 'drop_cap_shadow',
334	'selector' => '{{WRAPPER}} .elementor-drop-cap',
335	]
336	);
337
338	$this->add_control(
339	'drop_cap_size',
340	[
341	'label' => esc_html__( 'Size', 'elementor' ),
342	'type' => Controls_Manager::SLIDER,
343	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
344	'default' => [
345	'size' => 5,
346	],
347	'range' => [
348	'px' => [
349	'max' => 30,
350	],
351	'em' => [
352	'max' => 3,
353	],
354	'rem' => [
355	'max' => 3,
356	],
357	],
358	'selectors' => [
359	'{{WRAPPER}} .elementor-drop-cap' => 'padding: {{SIZE}}{{UNIT}};',
360	],
361	'condition' => [
362	'drop_cap_view!' => 'default',
363	],
364	]
365	);
366
367	$this->add_control(
368	'drop_cap_space',
369	[
370	'label' => esc_html__( 'Space', 'elementor' ),
371	'type' => Controls_Manager::SLIDER,
372	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
373	'default' => [
374	'size' => 10,
375	],
376	'range' => [
377	'px' => [
378	'max' => 50,
379	],
380	'em' => [
381	'max' => 5,
382	],
383	'rem' => [
384	'max' => 5,
385	],
386	],
387	'selectors' => [
388	'body:not(.rtl) {{WRAPPER}} .elementor-drop-cap' => 'margin-right: {{SIZE}}{{UNIT}};',
389	'body.rtl {{WRAPPER}} .elementor-drop-cap' => 'margin-left: {{SIZE}}{{UNIT}};',
390	],
391	]
392	);
393
394	$this->add_control(
395	'drop_cap_border_radius',
396	[
397	'label' => esc_html__( 'Border Radius', 'elementor' ),
398	'type' => Controls_Manager::SLIDER,
399	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
400	'default' => [
401	'unit' => '%',
402	],
403	'range' => [
404	'%' => [
405	'max' => 50,
406	],
407	],
408	'selectors' => [
409	'{{WRAPPER}} .elementor-drop-cap' => 'border-radius: {{SIZE}}{{UNIT}};',
410	],
411	'condition' => [
412	'drop_cap_view!' => 'default',
413	],
414	]
415	);
416
417	$this->add_control(
418	'drop_cap_border_width', [
419	'label' => esc_html__( 'Border Width', 'elementor' ),
420	'type' => Controls_Manager::DIMENSIONS,
421	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
422	'selectors' => [
423	'{{WRAPPER}} .elementor-drop-cap' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
424	],
425	'condition' => [
426	'drop_cap_view' => 'framed',
427	],
428	]
429	);
430
431	$this->add_group_control(
432	Group_Control_Typography::get_type(),
433	[
434	'name' => 'drop_cap_typography',
435	'selector' => '{{WRAPPER}} .elementor-drop-cap-letter',
436	'exclude' => [
437	'letter_spacing',
438	],
439	]
440	);
441
442	$this->end_controls_section();
443	}
444
445	/**
446	* Render text editor widget output on the frontend.
447	*
448	* Written in PHP and used to generate the final HTML.
449	*
450	* @since 1.0.0
451	* @access protected
452	*/
453	protected function render() {
454	$should_render_inline_editing = Plugin::$instance->editor->is_edit_mode();
455
456	$editor_content = $this->get_settings_for_display( 'editor' );
457	$editor_content = $this->parse_text_editor( $editor_content );
458
459	if ( $should_render_inline_editing ) {
460	$this->add_render_attribute( 'editor', 'class', [ 'elementor-text-editor', 'elementor-clearfix' ] );
461	}
462
463	$this->add_inline_editing_attributes( 'editor', 'advanced' );
464	?>
465	<?php if ( $should_render_inline_editing ) { ?>
466	<div <?php $this->print_render_attribute_string( 'editor' ); ?>>
467	<?php } ?>
468	<?php // PHPCS - the main text of a widget should not be escaped.
469	echo $editor_content; // phpcs:ignore WordPress.Security.EscapeOutput ?>
470	<?php if ( $should_render_inline_editing ) { ?>
471	</div>
472	<?php } ?>
473	<?php
474	}
475
476	/**
477	* Render text editor widget as plain content.
478	*
479	* Override the default behavior by printing the content without rendering it.
480	*
481	* @since 1.0.0
482	* @access public
483	*/
484	public function render_plain_content() {
485	// In plain mode, render without shortcode
486	$this->print_unescaped_setting( 'editor' );
487	}
488
489	/**
490	* Render text editor widget output in the editor.
491	*
492	* Written as a Backbone JavaScript template and used to generate the live preview.
493	*
494	* @since 2.9.0
495	* @access protected
496	*/
497	protected function content_template() {
498	?>
499	<#
500	const shouldRenderInlineEditing = elementorFrontend.isEditMode();
501
502	if ( shouldRenderInlineEditing ) {
503	view.addRenderAttribute( 'editor', 'class', [ 'elementor-text-editor', 'elementor-clearfix' ] );
504	}
505
506	view.addInlineEditingAttributes( 'editor', 'advanced' );
507
508	if ( shouldRenderInlineEditing ) { #>
509	<div {{{ view.getRenderAttributeString( 'editor' ) }}}>
510	<# } #>
511
512	{{{ settings.editor }}}
513
514	<# if ( shouldRenderInlineEditing ) { #>
515	</div>
516	<# } #>
517	<?php
518	}
519	}
520