elementor / includes / widgets / text-editor.php

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

439 lines 9.8 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 __( '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 1.0.0
99	* @access protected
100	*/
101	protected function _register_controls() {
102	$this->start_controls_section(
103	'section_editor',
104	[
105	'label' => __( 'Text Editor', 'elementor' ),
106	]
107	);
108
109	$this->add_control(
110	'editor',
111	[
112	'label' => '',
113	'type' => Controls_Manager::WYSIWYG,
114	'default' => '<p>' . __( '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' => __( 'Drop Cap', 'elementor' ),
121	'type' => Controls_Manager::SWITCHER,
122	'label_off' => __( 'Off', 'elementor' ),
123	'label_on' => __( '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[''] = __( 'Default', 'elementor' );
132
133	$this->add_responsive_control(
134	'text_columns',
135	[
136	'label' => __( 'Columns', 'elementor' ),
137	'type' => Controls_Manager::SELECT,
138	'separator' => 'before',
139	'options' => $text_columns,
140	'selectors' => [
141	'{{WRAPPER}} .elementor-text-editor' => 'columns: {{VALUE}};',
142	],
143	]
144	);
145
146	$this->add_responsive_control(
147	'column_gap',
148	[
149	'label' => __( 'Columns Gap', 'elementor' ),
150	'type' => Controls_Manager::SLIDER,
151	'size_units' => [ 'px', '%', 'em', 'vw' ],
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	'step' => 0.1,
167	],
168	],
169	'selectors' => [
170	'{{WRAPPER}} .elementor-text-editor' => 'column-gap: {{SIZE}}{{UNIT}};',
171	],
172	]
173	);
174
175	$this->end_controls_section();
176
177	$this->start_controls_section(
178	'section_style',
179	[
180	'label' => __( 'Text Editor', 'elementor' ),
181	'tab' => Controls_Manager::TAB_STYLE,
182	]
183	);
184
185	$this->add_responsive_control(
186	'align',
187	[
188	'label' => __( 'Alignment', 'elementor' ),
189	'type' => Controls_Manager::CHOOSE,
190	'options' => [
191	'left' => [
192	'title' => __( 'Left', 'elementor' ),
193	'icon' => 'eicon-text-align-left',
194	],
195	'center' => [
196	'title' => __( 'Center', 'elementor' ),
197	'icon' => 'eicon-text-align-center',
198	],
199	'right' => [
200	'title' => __( 'Right', 'elementor' ),
201	'icon' => 'eicon-text-align-right',
202	],
203	'justify' => [
204	'title' => __( 'Justified', 'elementor' ),
205	'icon' => 'eicon-text-align-justify',
206	],
207	],
208	'selectors' => [
209	'{{WRAPPER}} .elementor-text-editor' => 'text-align: {{VALUE}};',
210	],
211	]
212	);
213
214	$this->add_control(
215	'text_color',
216	[
217	'label' => __( 'Text Color', 'elementor' ),
218	'type' => Controls_Manager::COLOR,
219	'default' => '',
220	'selectors' => [
221	'{{WRAPPER}}' => 'color: {{VALUE}};',
222	],
223	'global' => [
224	'default' => Global_Colors::COLOR_TEXT,
225	],
226	]
227	);
228
229	$this->add_group_control(
230	Group_Control_Typography::get_type(),
231	[
232	'name' => 'typography',
233	'global' => [
234	'default' => Global_Typography::TYPOGRAPHY_TEXT,
235	],
236	]
237	);
238
239	$this->end_controls_section();
240
241	$this->start_controls_section(
242	'section_drop_cap',
243	[
244	'label' => __( 'Drop Cap', 'elementor' ),
245	'tab' => Controls_Manager::TAB_STYLE,
246	'condition' => [
247	'drop_cap' => 'yes',
248	],
249	]
250	);
251
252	$this->add_control(
253	'drop_cap_view',
254	[
255	'label' => __( 'View', 'elementor' ),
256	'type' => Controls_Manager::SELECT,
257	'options' => [
258	'default' => __( 'Default', 'elementor' ),
259	'stacked' => __( 'Stacked', 'elementor' ),
260	'framed' => __( 'Framed', 'elementor' ),
261	],
262	'default' => 'default',
263	'prefix_class' => 'elementor-drop-cap-view-',
264	]
265	);
266
267	$this->add_control(
268	'drop_cap_primary_color',
269	[
270	'label' => __( 'Primary Color', 'elementor' ),
271	'type' => Controls_Manager::COLOR,
272	'selectors' => [
273	'{{WRAPPER}}.elementor-drop-cap-view-stacked .elementor-drop-cap' => 'background-color: {{VALUE}};',
274	'{{WRAPPER}}.elementor-drop-cap-view-framed .elementor-drop-cap, {{WRAPPER}}.elementor-drop-cap-view-default .elementor-drop-cap' => 'color: {{VALUE}}; border-color: {{VALUE}};',
275	],
276	'global' => [
277	'default' => Global_Colors::COLOR_PRIMARY,
278	],
279	]
280	);
281
282	$this->add_control(
283	'drop_cap_secondary_color',
284	[
285	'label' => __( 'Secondary Color', 'elementor' ),
286	'type' => Controls_Manager::COLOR,
287	'selectors' => [
288	'{{WRAPPER}}.elementor-drop-cap-view-framed .elementor-drop-cap' => 'background-color: {{VALUE}};',
289	'{{WRAPPER}}.elementor-drop-cap-view-stacked .elementor-drop-cap' => 'color: {{VALUE}};',
290	],
291	'condition' => [
292	'drop_cap_view!' => 'default',
293	],
294	]
295	);
296
297	$this->add_control(
298	'drop_cap_size',
299	[
300	'label' => __( 'Size', 'elementor' ),
301	'type' => Controls_Manager::SLIDER,
302	'default' => [
303	'size' => 5,
304	],
305	'range' => [
306	'px' => [
307	'max' => 30,
308	],
309	],
310	'selectors' => [
311	'{{WRAPPER}} .elementor-drop-cap' => 'padding: {{SIZE}}{{UNIT}};',
312	],
313	'condition' => [
314	'drop_cap_view!' => 'default',
315	],
316	]
317	);
318
319	$this->add_control(
320	'drop_cap_space',
321	[
322	'label' => __( 'Space', 'elementor' ),
323	'type' => Controls_Manager::SLIDER,
324	'default' => [
325	'size' => 10,
326	],
327	'range' => [
328	'px' => [
329	'max' => 50,
330	],
331	],
332	'selectors' => [
333	'body:not(.rtl) {{WRAPPER}} .elementor-drop-cap' => 'margin-right: {{SIZE}}{{UNIT}};',
334	'body.rtl {{WRAPPER}} .elementor-drop-cap' => 'margin-left: {{SIZE}}{{UNIT}};',
335	],
336	]
337	);
338
339	$this->add_control(
340	'drop_cap_border_radius',
341	[
342	'label' => __( 'Border Radius', 'elementor' ),
343	'type' => Controls_Manager::SLIDER,
344	'size_units' => [ '%', 'px' ],
345	'default' => [
346	'unit' => '%',
347	],
348	'range' => [
349	'%' => [
350	'max' => 50,
351	],
352	],
353	'selectors' => [
354	'{{WRAPPER}} .elementor-drop-cap' => 'border-radius: {{SIZE}}{{UNIT}};',
355	],
356	]
357	);
358
359	$this->add_control(
360	'drop_cap_border_width', [
361	'label' => __( 'Border Width', 'elementor' ),
362	'type' => Controls_Manager::DIMENSIONS,
363	'selectors' => [
364	'{{WRAPPER}} .elementor-drop-cap' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
365	],
366	'condition' => [
367	'drop_cap_view' => 'framed',
368	],
369	]
370	);
371
372	$this->add_group_control(
373	Group_Control_Typography::get_type(),
374	[
375	'name' => 'drop_cap_typography',
376	'selector' => '{{WRAPPER}} .elementor-drop-cap-letter',
377	'exclude' => [
378	'letter_spacing',
379	],
380	]
381	);
382
383	$this->end_controls_section();
384	}
385
386	/**
387	* Render text editor widget output on the frontend.
388	*
389	* Written in PHP and used to generate the final HTML.
390	*
391	* @since 1.0.0
392	* @access protected
393	*/
394	protected function render() {
395	$editor_content = $this->get_settings_for_display( 'editor' );
396
397	$editor_content = $this->parse_text_editor( $editor_content );
398
399	$this->add_render_attribute( 'editor', 'class', [ 'elementor-text-editor', 'elementor-clearfix' ] );
400
401	$this->add_inline_editing_attributes( 'editor', 'advanced' );
402	?>
403	<div <?php echo $this->get_render_attribute_string( 'editor' ); ?>><?php echo $editor_content; ?></div>
404	<?php
405	}
406
407	/**
408	* Render text editor widget as plain content.
409	*
410	* Override the default behavior by printing the content without rendering it.
411	*
412	* @since 1.0.0
413	* @access public
414	*/
415	public function render_plain_content() {
416	// In plain mode, render without shortcode
417	echo $this->get_settings( 'editor' );
418	}
419
420	/**
421	* Render text editor widget output in the editor.
422	*
423	* Written as a Backbone JavaScript template and used to generate the live preview.
424	*
425	* @since 2.9.0
426	* @access protected
427	*/
428	protected function content_template() {
429	?>
430	<#
431	view.addRenderAttribute( 'editor', 'class', [ 'elementor-text-editor', 'elementor-clearfix' ] );
432
433	view.addInlineEditingAttributes( 'editor', 'advanced' );
434	#>
435	<div {{{ view.getRenderAttributeString( 'editor' ) }}}>{{{ settings.editor }}}</div>
436	<?php
437	}
438	}
439