问题描述
我试图建立一个博客网站。我为此使用了Tiny MCE和Django。 我可以将照片添加/上传到我的博客。但是问题在于通过Tiny MCE上传的图像对于较小的屏幕(如手机屏幕)没有响应。文本响应良好,但是图像溢出。我查看了Tiny MCE文档,但没有找到答案。 这是我的代码集:
tinyinject.js:
(我不太喜欢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',});
}
需要帮助!
解决方法
要获得响应图像,您需要阻止TinyMCE向插入的图像添加像素宽度和高度。一种方法是使用image_dimensions: false
。然后,使用css设置图像的宽度,一种常见的方法是使用img { width: 100%; max-width: 600px; }
,其中600px
是最大图像宽度。 Here is a more complex TinyMCE demo如果您想深入研究图片样式