Skip to content

Commit 838b155

Browse files
eduardokrauseduardokraus
authored
Open the editor in popup (#380)
1 parent 33e89ae commit 838b155

File tree

1 file changed

+145
-121
lines changed

1 file changed

+145
-121
lines changed

‎libs/builder/plugin-tinymce.js

Lines changed: 145 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -20,127 +20,151 @@ https://github.com/givanz/VvvebJs
2020
//use ckeditor instead that supports inline editing for iframe elements
2121

2222
var tinyMceOptions = {
23-
//selector: 'textarea',
24-
target:false,
25-
inline:false,//see comment above
26-
toolbar_mode: 'floating',
27-
toolbar_persist: true,
28-
plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help quickbars emoticons',
29-
//imagetools_cors_hosts: ['picsum.photos'],
30-
menubar: false,//'file edit view insert format tools table help',
31-
toolbar: [
32-
'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect',
33-
'alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist',
34-
'forecolor backcolor removeformat | insertfile image media link anchor codesample | fullscreen preview save print| ltr rtl | code template | charmap emoticons'],
35-
toolbar_sticky: true,
36-
autosave_ask_before_unload: true,
37-
autosave_interval: '30s',
38-
autosave_prefix: '{path}{query}-{id}-',
39-
autosave_restore_when_empty: false,
40-
autosave_retention: '2m',
41-
image_advtab: true,
42-
/*
43-
link_list: [
44-
{ title: 'My page 1', value: 'https://www.tiny.cloud' },
45-
{ title: 'My page 2', value: 'http://www.moxiecode.com' }
46-
],
47-
image_list: [
48-
{ title: 'My page 1', value: 'https://www.tiny.cloud' },
49-
{ title: 'My page 2', value: 'http://www.moxiecode.com' }
50-
],
51-
image_class_list: [
52-
{ title: 'None', value: '' },
53-
{ title: 'Some class', value: 'class-name' }
54-
],
55-
*/
56-
importcss_append: true,
57-
file_picker_callback: function (callback, value, meta) {
58-
if (!Vvveb.MediaModal) {
59-
Vvveb.MediaModal = new MediaModal(true);
60-
Vvveb.MediaModal.mediaPath = mediaPath;
61-
}
62-
Vvveb.MediaModal.open(null, callback);
63-
return;
64-
/* Provide file and text for the link dialog */
65-
if (meta.filetype === 'file') {
66-
callback('https://www.google.com/logos/google.jpg', { text: 'My text' });
67-
}
68-
69-
/* Provide image and alt text for the image dialog */
70-
if (meta.filetype === 'image') {
71-
callback('https://www.google.com/logos/google.jpg', { alt: 'My alt text' });
72-
}
73-
74-
/* Provide alternative source and posted for the media dialog */
75-
if (meta.filetype === 'media') {
76-
callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg' });
77-
}
78-
},
79-
/*
80-
templates: [
81-
{ title: 'New Table', description: 'creates a new table', content: '<div class="mceTmpl"><table width="98%%" border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>' },
82-
{ title: 'Starting my story', description: 'A cure for writers block', content: 'Once upon a time...' },
83-
{ title: 'New list with dates', description: 'New List with dates', content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>' }
84-
],
85-
template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
86-
template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
87-
*/
88-
height: 600,
89-
image_caption: true,
90-
quickbars_insert_toolbar: 'quickmedia quicklink quicktable',
91-
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
92-
//quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
93-
noneditable_noneditable_class: 'mceNonEditable',
94-
toolbar_mode: 'sliding',
95-
contextmenu: 'link image imagetools table',
96-
skin: 'oxide',
97-
content_css: '',
98-
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
99-
images_upload_url: 'postAcceptor.php',
100-
101-
/* we override default upload handler to simulate successful upload*/
102-
images_upload_handler: function (blobInfo, success, failure) {
103-
setTimeout(function () {
104-
/* no matter what you upload, we will turn it into TinyMCE logo :)*/
105-
success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
106-
}, 2000);
107-
},
108-
109-
110-
branding:false,
23+
//selector: 'textarea',
24+
target : false,
25+
inline : false,//see comment above
26+
toolbar_persist : true,
27+
plugins : 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help quickbars emoticons',
28+
menubar : false,
29+
toolbar : [
30+
'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect',
31+
'alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist',
32+
'forecolor backcolor removeformat | insertfile image media link anchor codesample | fullscreen preview save print| ltr rtl | code | charmap emoticons'],
33+
toolbar_sticky : true,
34+
autosave_ask_before_unload : true,
35+
autosave_interval : '30s',
36+
autosave_prefix : '{path}{query}-{id}-',
37+
autosave_restore_when_empty : false,
38+
autosave_retention : '2m',
39+
importcss_append : true,
40+
file_picker_callback : function(callback, value, meta) {
41+
if (!Vvveb.MediaModal) {
42+
Vvveb.MediaModal = new MediaModal(true);
43+
Vvveb.MediaModal.mediaPath = mediaPath;
44+
}
45+
Vvveb.MediaModal.open(null, callback);
46+
},
47+
height : 600,
48+
quickbars_insert_toolbar : 'quickmedia quicklink quicktable',
49+
quickbars_selection_toolbar : 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
50+
//quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
51+
noneditable_noneditable_class : 'mceNonEditable',
52+
toolbar_mode : 'sliding',
53+
contextmenu : 'link image imagetools table',
54+
skin : 'oxide',
55+
content_css : '',
56+
content_style : 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
57+
images_upload_url : 'postAcceptor.php',
58+
59+
image_advtab : true,
60+
image_caption : true,
61+
paste_data_images : true,
62+
image_uploadtab : true,
63+
images_file_types : 'jpeg,jpg,png,gif',
64+
images_upload_handler : function(blobInfo, success, failure) {
65+
var base64str = 'data:' + blobInfo.blob().type + ';base64,' + blobInfo.base64();
66+
success(base64str);
67+
},
68+
file_picker_callback : function(callback, value, meta) {
69+
if (!Vvveb.MediaModal) {
70+
Vvveb.MediaModal = new MediaModal(true);
71+
Vvveb.MediaModal.mediaPath = mediaPath;
72+
}
73+
Vvveb.MediaModal.open(null, callback);
74+
},
75+
76+
branding : false,
11177
};
11278

11379
Vvveb.WysiwygEditor = {
114-
115-
isActive: false,
116-
oldValue: '',
117-
doc:false,
118-
editor:false,
119-
120-
init: function(doc) {
121-
this.doc = doc;
122-
},
123-
124-
edit: function(element) {
125-
this.element = element;
126-
this.isActive = true;
127-
this.oldValue = element.innerHTML;
128-
Vvveb.Builder.selectPadding = 0;
129-
Vvveb.Builder.highlightEnabled = false;
130-
131-
tinyMceOptions.target = element;
132-
this.editor = tinymce.init(tinyMceOptions);
133-
},
134-
135-
destroy: function(element) {
136-
tinymce.activeEditor.destroy();
137-
Vvveb.Builder.highlightEnabled = true;
138-
this.isActive = false;
139-
140-
node = this.element;
141-
Vvveb.Undo.addMutation({type:'characterData',
142-
target: node,
143-
oldValue: this.oldValue,
144-
newValue: node.innerHTML});
145-
}
146-
}
80+
81+
isActive : false,
82+
oldValue : '',
83+
doc : false,
84+
editor : false,
85+
86+
init : function(doc) {
87+
Vvveb.WysiwygEditor.doc = doc;
88+
},
89+
90+
edit : function(element) {
91+
Vvveb.WysiwygEditor.element = element;
92+
Vvveb.WysiwygEditor.modalHtml = `
93+
<div class="modal fade modal-full" id="TinyMceModal" tabindex="-1" role="dialog"
94+
aria-labelledby="TinyMceModalLabel"
95+
aria-hidden="true">
96+
<div class="modal-dialog modal-xl modal-dialog-scrollable" role="document"
97+
style="max-height: 586px">
98+
<div class="modal-content">
99+
<div class="modal-header">
100+
<h5 class="modal-title" id="TinyMceModalLabel">Editor</h5>
101+
<button type="button" class="btn btn-sm" id="btn-tiny-iconclose" aria-label="Close">
102+
<span aria-hidden="true"><i class="la la-times la-lg"></i></span>
103+
</button>
104+
</div>
105+
<div class="modal-body" style="padding: 0">
106+
<div id="TinyMceModal-editor">${element.outerHTML}</div>
107+
</div>
108+
<div class="modal-footer">
109+
<div class="align-right">
110+
<button type="button" class="btn btn-secondary" id="btn-tiny-buttonclose">Close</button>
111+
<button type="button" class="btn btn-primary save-btn">Save</button>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
</div>`;
117+
document.body.append(generateElements(Vvveb.WysiwygEditor.modalHtml)[0]);
118+
let modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('TinyMceModal'));
119+
modal.show();
120+
121+
document.querySelector("#TinyMceModal .save-btn").addEventListener("click", Vvveb.WysiwygEditor.save);
122+
document.querySelector("#btn-tiny-iconclose").addEventListener("click", Vvveb.WysiwygEditor.destroy);
123+
document.querySelector("#btn-tiny-buttonclose").addEventListener("click", Vvveb.WysiwygEditor.destroy);
124+
125+
Vvveb.WysiwygEditor.isActive = true;
126+
Vvveb.WysiwygEditor.oldValue = element.innerHTML;
127+
Vvveb.Builder.selectPadding = 0;
128+
Vvveb.Builder.highlightEnabled = false;
129+
130+
tinyMceOptions.target = document.getElementById('TinyMceModal-editor');
131+
Vvveb.WysiwygEditor.editor = tinymce.init(tinyMceOptions);
132+
133+
setTimeout(function() {
134+
document.getElementById("select-box").style.display = "none";
135+
}, 500);
136+
},
137+
138+
save : function() {
139+
console.log(Vvveb.WysiwygEditor.element);
140+
Vvveb.WysiwygEditor.element.outerHTML = tinymce.activeEditor.getContent();
141+
142+
Vvveb.Undo.addMutation({
143+
type : 'characterData',
144+
target : Vvveb.WysiwygEditor.element,
145+
oldValue : Vvveb.WysiwygEditor.oldValue,
146+
newValue : Vvveb.WysiwygEditor.element.innerHTML
147+
});
148+
149+
Vvveb.WysiwygEditor.destroy();
150+
},
151+
152+
destroy : function(element) {
153+
154+
if (tinymce.activeEditor) {
155+
tinymce.activeEditor.destroy();
156+
}
157+
158+
let modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('TinyMceModal'));
159+
modal.hide();
160+
161+
var TinyMceModal = document.getElementById('TinyMceModal');
162+
TinyMceModal.parentElement.removeChild(TinyMceModal);
163+
Vvveb.WysiwygEditor.isActive = false;
164+
165+
Vvveb.Builder.highlightEnabled = false;
166+
// enable double click editor
167+
Vvveb.Builder.texteditEl = null;
168+
}
169+
};
170+

0 commit comments

Comments
 (0)