响应式图片tinymce图片链接

Question

我正在扩展现有网站。我已经发布了该网站（如果您想查看单击此处）。我刚刚添加了一个非常简单的博客（用 php 和 mysql 制作），除了一件事之外，它运行良好。如果我将图像添加到新帖子或帖子中，撰写帖子的人可以调整其大小。问题是图像具有静态宽度和高度，然后如果我在移动设备上访问博客，图像会被剪切，因为它大于设备的宽度。我不知道如何解决它，我想我可以修改允许插入图像的插件来添加此参数（这使得图像响应）：

max-width="['user selected width'], width=100%, height=auto

我一直在尝试修改这个插件，但我发现它很难理解，而且我对 javascript 也不是很有经验。 这是插件。 我正在使用tinymce 编辑器来编辑或添加帖子。 有人知道我是否必须添加此参数吗？谢谢你。

Answer 1

在tinymceini上放这个...和voala

image_dimensions: false,
         image_class_list: [
            {title: 'Responsive', value: 'img-responsive'}
        ]

Answer 2

在文件 content.min.css 中添加此类

img {
    max-width: 100%;
    height: auto;
}

Answer 3

无需通过单独的 CSS 来处理此问题。您可以在tinymce编辑器本身添加图像时应用“img-responsive”类。

在您的tintmce编辑器属性中添加以下属性：

image_class_list: [
    {title: 'Responsive', value: 'img-responsive'}
],

参考文献和学分： http://archive.tinymce.com/forum/viewtopic.php?pid=114620#p114620

Answer 4

解决方案找到了，我没有修改生成tinymce的html代码来插入图像，而是通过修改img来修改css样式表上的图像比例。我使用这个代码：

[element that contains the image] img {
width:100%;
height:100%;
}

Answer 5

下面是我使用 css 和 jquery 而不是 tinymce 插件找到的解决方案。

$(document).ready(function(){

    var tiny_images = $(this).find('img').map(function(){

        if($(this).attr('class') == undefined){
    
            if($(this).attr('src').indexOf("data:image")!=-1){
                $(this).addClass("tiny-img");
            }
            
        }

    }).get()

});

 .tiny-img {
    max-width: 100%;
    height:auto;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Answer 6

使用 CSS 是一种更安全的方法

img {
    max-width: 100%;
    height: auto;
}

Answer 7

在版本 5 中，您希望将相同的代码放在 /skins/ui/oxide 和 /skins/ui/oxide-dark content.css 文件的末尾。

/* <your name> added the following to create responsive images */
img {
    max-width: 100%;
    height: auto;
}

Answer 8

对于 Bootstrap 5 使用此

添加到您的

tinymce.init()

下面

image_class_list: [
        {title: 'Responsive', value: 'img-fluid'}
      ],