Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
custom tinymce 5 file browser and picker
(function() {
$().ready(function() {
var adminUrl = $('body').data('route-admin');
window.initWYSIWYG = function(mediaContent) {
tinymce.init({
selector: '.wysiwyg',
height: 500,
language: 'de',
language_url: 'mcms/node_modules/tinymce-i18n/langs/de.js',
toolbar: "undo redo | formatselect | bold italic strikethrough forecolor backcolor | image | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | styleselect | code",
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', adminUrl + '/media/upload');
xhr.onload = function() {
var json;
if (xhr.status < 200 || xhr.status >= 300) {
failure('Die Datei konnte nicht hochgeladen werden');
return;
}
json = JSON.parse(xhr.responseText);
if (!json) {
failure('Da ist wohl etwas schief gelaufen');
return;
}
if (json.error) {
failure(json.error);
return;
}
if (!json.success || !json.location) {
failure('Da ist wohl etwas schief gelaufen');
return;
}
success(json.location);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename(blobInfo));
xhr.send(formData);
},
templates: '/mcms_admin/page/wysiwyg_templates',
branding: false,
resize: true,
style_formats: [
{title: 'Rechts umfließend', selector: 'img', styles: { 'float' : 'left', 'margin': '0 10px 0 10px' }},
{title: 'Links umfließend', selector: 'img', styles: { 'float' : 'right', 'margin': '0 10px 0 10px' }},
{title: 'Responsive Image', selector: 'img', classes: 'img-fluid'}
],
relative_urls: false,
image_advtab: true,
images_reuse_filename: true,
plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link code media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern help filemanager emoticons',
browser_spellcheck: true,
file_picker_callback: function(callback, value, meta) {
window.tinymceDialog = {
title: "Bild auswählen",
size: 'large',
body : {
type: 'panel',
items: [
{
name: 'htmlContent',
type: 'iframe',
sandboxed: false
}
]
},
buttons: [
{
type: 'custom',
name: 'navigateBack',
text: 'zurück',
align: 'start'
},
{
type: 'cancel',
name: 'cancel',
text: 'Cancel'
},
{
type: 'custom',
name: 'selectThumb',
text: 'Vorschaubild auswählen',
disabled: true
},
{
type: 'submit',
name: 'selectImage',
text: 'Bild auswählen',
primary: true,
disabled: true
}
],
initialData: {
htmlContent: mediaContent,
url: false,
},
onSubmit: function (api) {
var fileUrl = $('.tox-dialog__body iframe:last').contents().find('[data-name="full_path"]').text();
callback(fileUrl);
api.close();
},
onAction: function (api, actionData) {
if (actionData.name === 'selectThumb') {
var fileUrl = $('.tox-dialog__body iframe:last').contents().find('[data-name="thumbnail_path"]').text();
callback(fileUrl);
api.close();
}
if (actionData.name === 'navigateBack') {
$('.tox-dialog__body iframe:last').contents().find('.navigate-back').get(0).click();
}
}
};
var _this = this;
var instance = tinymce.activeEditor.windowManager.open(window.tinymceDialog);
var findFrame = function(callback) {
var found = false;
$('iframe').each(function(index, element) {
if (element != _this.iframeElement) {
callback(element);
found = true;
// break
return false;
}
})
if (!found) {
setTimeout(function() {
findFrame(callback)
}, 200);
}
};
findFrame(function(iframe) {
$(iframe).on('load', function(e) {
if (iframe.contentWindow.location.href.indexOf('variants-sa') > -1) {
instance.enable('selectThumb');
instance.enable('selectImage');
instance.enable('navigateBack');
} else {
instance.disable('selectThumb');
instance.disable('selectImage');
instance.disable('navigateBack');
}
});
});
},
content_css: "/mcms/css/wysiwyg-content-style.css"
});
};
$.get(adminUrl + '/media/list-sa?sa=true', function(mediaContent) {
window.initWYSIWYG(mediaContent);
});
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment