I was trying to build a blogging website. I used Tiny MCE and Django for the purpose. I could add/upload photos to my blogs. But the problem is the images uploaded via Tiny MCE are not responsive for smaller screens like a mobile phone screen. The texts are well responsive but the images are overflown. I went through Tiny MCE documentation but didn't find the answer. Here's my set of code:
tinyinject.js:
(I am not so good with JS)
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js";
document.head.appendChild(script);
script.onload = function () {
tinymce.init({
selector: '#id_content',
plugins: [
'advlist autolink link image imagetools lists charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'table emoticons template paste help'
],
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
'bullist numlist outdent indent | link image | print preview media fullpage | ' +
'forecolor backcolor emoticons | help | image',
imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage imageoptions",
image_title: true,
automatic_upload: true,
file_picker_types: 'image',
file_picker_callback: function(cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function() {
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
cb(blobInfo.blobUri(), {title: file.name});
};
reader.readAsDataURL(file);
};
input.click();
},
menu: {
favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' }
},
menubar: 'favs file edit view insert format tools table help',
});
}
Help needed!