https://swingersociety.net/ckeditor/mltemplates/element_rotate_text/plugin.js?t=nywidi

1// Rotate Text
2//==================================================
3
4CKEDITOR.plugins.add( 'element_rotate_text', {
5	requires: 'widget',
6	init: function( editor ) {
7
8		editor.widgets.add( 'element_rotate_text', {
9
10			template: CKETEMPLATE_ROTATE_TEXT, // Defined in ULckeTemplates.js
11
12			upcast: element => element.hasClass( 'element-rotate-text' ),
13			dialog: 'element_rotate_text',
14			requiredContent: 'div(element-rotate-text)',
15
16			editables: {
17				rotate_text_box: {
18					selector: '.rotate-text-box',
19				},
20			},
21
22			init: function() {
23				// Re-initialize the editable divs with the inserted content...
24				this.initEditable( 'rotate_text_box', { selector: '.rotate-text-box' } );
25			},
26
27			data: function() {
28
29				let rotateTextBox = this.element.$.querySelector('.rotate-text-box');
30
31				// If no data for text_color...
32				if (this.data.text_color === undefined) {
33					// Get the style attr 'color' val from div, if it exists...
34					this.data.text_color = this.element.$.style.color;
35				}
36				// If empty string or css color value...
37				else {
38
39					// IF empty string or only spaces...
40					if (/^\s*$/.test(this.data.text_color)) {
41						// if empty string...
42						this.element.$.style.color = '';
43					}
44
45					if (this.data.text_color) {
46						// if css color value...
47						this.element.$.style.color = this.data.text_color;
48					}
49				}
50
51				// If no data for line-height...
52				if (this.data.line_height === undefined) {
53					// Get the style attr 'line-height' val from div, if it exists...
54					this.data.line_height = this.element.$.style.lineHeight;
55				}
56				// If empty string or css font value...
57				else {
58
59					if (/^\s*$/.test(this.data.line_height)) {
60						// if empty string or only whitespace...
61						this.element.$.style.lineHeight = '';
62					}
63
64					if (this.data.line_height) {
65						// if css line-height value...
66						this.element.$.style.lineHeight = this.data.line_height;
67					}
68				}
69
70				// If no data for text_alignment...
71				if (this.data.text_alignment === undefined) {
72					// Get the style attr 'color' val from div, if it exists...
73					this.data.text_alignment = this.element.$.style.textAlign;
74				}
75				// If empty string or css text-align value...
76				else {
77
78					// IF empty string or only spaces...
79					if (/^\s*$/.test(this.data.text_alignment)) {
80						// if empty string...
81						this.element.$.style.textAlign = '';
82					}
83
84					if (this.data.text_alignment) {
85						// if css text-align value...
86						this.element.$.style.textAlign = this.data.text_alignment;
87					}
88				}
89
90				// If no data for padding...
91				if (this.data.padding === undefined) {
92					// Get the style attr 'padding' val from div, if it exists...
93					this.data.padding = this.element.$.style.padding;
94				}
95				// If empty string or css length value...
96				else {
97
98					// IF empty string or only spaces...
99					if (/^\s*$/.test(this.data.padding)) {
100						// if empty string...
101						this.element.$.style.padding = '';
102						this.data.padding = '';
103					}
104
105					if (this.data.padding) {
106						// if css shorthand value for padding...
107						this.element.$.style.padding = this.data.padding;
108					}
109				}
110			},
111		} );
112
113		CKEDITOR.dialog.add( 'element_rotate_text', this.path + 'dialogs/element_rotate_text.js' );
114
115	}
116} );