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规则，将所需的属性添加到特定容器的所有ABC123: $75.00 DEF456: $50.00元素中。例如，在类img的{{1}}元素中，您可以定义以下CSS选择器：

div

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

container

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

Answer 2

使用＆＃39;！important＆＃39;添加内联样式并且任何图像都不会改变大小。

＆＃13;

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

＆＃13;

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

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

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

4 个答案: