weForms – Easy Drag & Drop Contact Form Builder For WordPress / 1.6.1

weForms – Easy Drag & Drop Contact Form Builder For WordPress v1.6.1

weforms / assets / components / weforms-text-editor / index.js

index.js in weForms – Easy Drag & Drop Contact Form Builder For WordPress 1.6.1, at assets/components/weforms-text-editor/index.js

233 lines 7.5 KB

Raw Download Zip

1	Vue.component('weforms-text-editor', {
2	template: '#tmpl-wpuf-weforms-text-editor',
3
4	props: {
5	value: {
6	type: String,
7	required: true
8	},
9
10	i18n: {
11	type: Object,
12	required: true
13	},
14
15	editingIndex: {
16	type: Number,
17	required: true
18	}
19	},
20
21	data() {
22	return {
23	editorId: _.clone(Date.now()),
24	fileFrame: null,
25	shortcodes: weForms.shortcodes,
26	};
27	},
28
29	mounted() {
30	var vm = this;
31	this.setupEditor();
32
33	this.$parent.$on('deleteNotification',function(){
34	setTimeout(function(){
35	if ( vm.editor ) {
36	vm.editor.setContent(vm.value);
37	}
38	},500);
39	});
40	},
41
42	beforeDestroy() {
43	this.$parent.$off('insertValueEditor');
44	this.$parent.$off('deleteNotification');
45	},
46
47	methods: {
48	setupEditor(){
49	var vm = this;
50	window.tinymce.init({
51	selector: `#wefroms-tinymce-${this.editorId}`,
52	branding: false,
53	height: 150,
54	menubar: false,
55	convert_urls: false,
56	theme: 'modern',
57	skin: 'lightgray',
58	content_css: `${weForms.assetsURL}/css/customizer.css`,
59	fontsize_formats: '10px 11px 13px 14px 16px 18px 22px 25px 30px 36px 40px 45px 50px 60px 65px 70px 75px 80px',
60	font_formats : 'Arial=arial,helvetica,sans-serif;' +
61	'Comic Sans MS=comic sans ms,sans-serif;' +
62	'Courier New=courier new,courier;' +
63	'Georgia=georgia,palatino;' +
64	'Lucida=Lucida Sans Unicode, Lucida Grande, sans-serif;' +
65	'Tahoma=tahoma,arial,helvetica,sans-serif;' +
66	'Times New Roman=times new roman,times;' +
67	'Trebuchet MS=trebuchet ms,geneva;' +
68	'Verdana=verdana,geneva;',
69	plugins: 'textcolor colorpicker wplink wordpress code hr wpeditimage',
70	toolbar: [
71	'shortcodes bold italic underline bullist numlist alignleft aligncenter alignjustify alignright link image',
72	'formatselect forecolor backcolor blockquote hr code',
73	'fontselect fontsizeselect removeformat undo redo'
74	],
75	setup(editor) {
76
77	vm.editor = editor;
78
79	const shortcodeMenuItems = [];
80
81	_.forEach(vm.shortcodes, (shortcodeObj, shortcodeType) => {
82	shortcodeMenuItems.push({
83	text: shortcodeObj.title,
84	classes: 'menu-section-title'
85	});
86
87	_.forEach(shortcodeObj.codes, (codeObj, shortcode) => {
88	shortcodeMenuItems.push({
89	text: codeObj.title,
90	onclick() {
91	let code = `[${shortcodeType}:${shortcode}]`;
92
93	if (codeObj.default) {
94	code = `[${shortcodeType}:${shortcode} default="${codeObj.default}"]`;
95	}
96
97	if (codeObj.text) {
98	code = `[${shortcodeType}:${shortcode} text="${codeObj.text}"]`;
99	}
100
101	if (codeObj.plainText) {
102	code = codeObj.text;
103	}
104
105	editor.insertContent(code);
106	}
107	});
108	});
109	});
110
111	// editor.addButton('shortcodes', {
112	// type: 'menubutton',
113	// icon: 'shortcode dashicons dashicons-editor-code',
114	// tooltip: 'Shortcodes',
115	// menu: shortcodeMenuItems
116	// });
117
118	// editor.addButton('image', {
119	// icon: 'image',
120	// onclick() {
121	// vm.browseImage(editor);
122	// }
123	// });
124
125	// editor change triggers
126	editor.on('change keyup NodeChange', () => {
127	vm.$emit('input', editor.getContent());
128	});
129
130	vm.$parent.$on('insertValueEditor', (value) => {
131	editor.insertContent(value);
132	});
133	}
134	});
135	},
136
137	browseImage(editor) {
138	const vm = this;
139	const selectedFile = {
140	id: 0,
141	url: '',
142	type: ''
143	};
144
145	if (vm.fileFrame) {
146	vm.fileFrame.open();
147	return;
148	}
149
150	const fileStates = [
151	new wp.media.controller.Library({
152	library: wp.media.query(),
153	multiple: false,
154	title: vm.i18n.selectAnImage,
155	priority: 20,
156	filterable: 'uploaded'
157	})
158	];
159
160	vm.fileFrame = wp.media({
161	title: vm.i18n.selectAnImage,
162	library: {
163	type: ''
164	},
165	button: {
166	text: vm.i18n.selectAnImage
167	},
168	multiple: false,
169	states: fileStates
170	});
171
172	vm.fileFrame.on('select', () => {
173	const selection = vm.fileFrame.state().get('selection');
174
175	selection.map((image) => {
176	image = image.toJSON();
177
178	if (image.id) {
179	selectedFile.id = image.id;
180	}
181
182	if (image.url) {
183	selectedFile.url = image.url;
184	}
185
186	if (image.type) {
187	selectedFile.type = image.type;
188	}
189
190	vm.insertImage(editor, selectedFile);
191
192	return null;
193	});
194	});
195
196	vm.fileFrame.on('ready', () => {
197	vm.fileFrame.uploader.options.uploader.params = {
198	type: 'wefroms-image-uploader'
199	};
200	});
201
202	vm.fileFrame.open();
203	},
204
205	insertImage(editor, image) {
206	if (!image.id \|\| (image.type !== 'image')) {
207	this.alert({
208	type: 'error',
209	text: this.i18n.pleaseSelectAnImage
210	});
211
212	return;
213	}
214
215	const img = `<img src="${image.url}" alt="${image.alt}" title="${image.title}" style="max-width: 100%; height: auto;">`;
216
217	editor.insertContent(img);
218	}
219	},
220
221	watch: {
222	editingIndex: function(new_val, old_val){
223	if ( ! this.editor ) {
224	this.setupEditor();
225	} else {
226	this.editor.setContent(this.value);
227	}
228	},
229	}
230	});
231
232
233