TinyMCEを使用して画像にインラインCSSを追加します。

Question

私のウェブサイトに投稿したユーザーにTiny MCE 4を使用しています。これは非常にうまく動作しますが、問題は、ユーザーが小型MCEで画像を置き、そのサイズを変更したとき、それは次の行を生成していることである：

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

結果が非応答性の絵です。画像に以下のインラインCSS属性を追加するには、どのようにTiny MCEを設定できますか？

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

Answer 1

単純に、特定のコンテナのすべてのimg要素に必要な属性を追加するCSSルールを作成しないでください。例えば は、クラスcontainerのdiv要素には、次のCSSセレクタを定義することができます。ここでは

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

は、単純なページ上の結果のサンプルです。黄色のイメージは変更されていませんが、コンテナのdiv要素に含まれるすべてのイメージのサイズが変更されています（ここでは緑色と青色のイメージ）。

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

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

Answer 2

'！重要' ​​と任意の画像サイズを変更しないとインラインスタイルを追加します。

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

Answer 3

あなたは（TinyMCEをを再構成せずに）これを処理するために（jQueryを使って）JavaScriptを使用することができます。イメージを表示しているページにこれを含めるだけです。

$(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

あなたは以下の例のようにtrueにimage_advtabセットを持っている場合は、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' } 
     ] 
    });