使用 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 元素。例如，在 class 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 属性值，如下例所示。通过应用它，您将在 insert/edit 图像中获得一个额外的标签并设置您想要的样式。

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' }
      ]
     });

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

Add inline CSS in the image using TinyMCE

javascript

css

tinymce

tinymce-4