使用 TinyMCE 在图像中添加内联 CSS

Question

我使用Tiny MCE 4 在我的网站上发帖的用户。它工作得很好，但问题是当用户将图像放入 Tiny MCE 并更改其大小时，它会生成以下行：

<img src="source/imagem.jpg?14641" alt="" width="550" height="838">

结果是没有响应的图片。如何配置 Tiny MCE 以在图像上添加以下内联 css 属性？

<img src="source/imagem.jpg?14641" alt="" width="550" height="838" style="
    width: 100%; max-width: 550px; height: auto;">

Answer 1

为什么不简单地创建一个 CSS 规则，将所需的属性添加到特定容器的所有 img 元素。 例如，在 container 类的 div 元素中，您可以定义以下 CSS 选择器：

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

这是一个简单页面上的结果示例。您可以看到黄色图像没有改变，但容器 div 子元素中包含的所有图像都已调整大小（此处为绿色和蓝色图像）。

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

<img src="http://placehold.it/400x400/EEE04A/ffffff" />
<div class="container" style="width:150px;">
	<img src="http://placehold.it/800x300/5cb85c/ffffff" />
	<div>
		<img src="http://placehold.it/800x600/5bc0de/ffffff" />
	</div>
</div>

Answer 2

使用 '!important' 添加内联样式，并且任何图像都不会改变大小。

.tiny-mce-wrapper img {
    width: 100% !important;
	max-width:100% !important;
	height:auto !important;
}

Answer 3

您可以使用 javascript（使用 jQuery）来处理这个问题（无需重新配置 tinymce）。您只需将其包含在显示图像的页面中即可。

$(document).ready(function () {

    $('.Container').find('img').each(function () {

        var _this = $(this);

        _this.css({
            'width': _this.width,
            'height': _this.height
        });

        _this.removeAttr('width');
        _this.removeAttr('height');
    });
});

Answer 4

如果您将image_advtab 设置为true，您可以在Tinymce 中设置style 属性值，如下例所示。通过应用它，您将在插入/编辑图像中获得一个额外的选项卡并设置您想要的样式。

Tinymce 示例

 tinymce.init({
      selector: 'textarea',
      height: 500,
      theme: 'modern',
      plugins: [
        'advlist autolink lists link image charmap print preview hr anchor pagebreak',
        'searchreplace wordcount visualblocks visualchars code fullscreen',
        'insertdatetime media nonbreaking save table contextmenu directionality',
        'emoticons template paste textcolor colorpicker textpattern imagetools'
      ],
      toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
      toolbar2: 'print preview media | forecolor backcolor emoticons',
      image_advtab: true,
      templates: [
        { title: 'Test template 1', content: 'Test 1' },
        { title: 'Test template 2', content: 'Test 2' }
      ]
     });