tinymce, image resize, use css вместо <img width & height>

Question

Я использую этот замечательный инструмент, tinyMCE, для редактирования страниц на моем сайте. Но у меня проблема с изменением размера изображений.

Возможно ли изменить способ изменения размера изображения tinyMCE? Теперь программа изменяет ширину и высоту внутри ..

<img src="..." width="..." height="..." /> 

Но эта установка получает переопределяется CSS. (У меня есть некоторые общие настройки img в CSS, ширина, высота: авто и центровка на странице.)

Если пользователи задают размер для изображения, я хочу, чтобы этот новый размер переопределял общий CSS. Но с параметром img ширина & высота. это невозможно. CSS переопределяет их значение.

So.

Я хочу, чтобы tinyMCE изменил размер изображения с помощью CSS. Это возможно?

например:

<img src="..." style="width:...;height...;" /> 

(размер устанавливается перетаскивая значки угла изображения до размера вы хотите .. и не редактируется в HTML HTML кода.)

Спасибо за чтение. Matte

Answer 1

В настоящее время нет возможности легко изменить способ добавления TinyMCE меток ширины и высоты в элемент img. Для добавления этой функции предлагается запрос функции Stop Prepopulating Image Dimensions.

Answer 2

$ ("# ctl00_ContentPlaceHolder_RichTextBox_ifr"). Contents(). Find ("body"). Find ("img"). Attr ("height", "150"); $ ("# ctl00_ContentPlaceHolder_RichTextBox_ifr"). Contents(). Find ("body"). Find ("img"). Attr ("width", "200");

Здесь "# ctl00_ContentPlaceHolder_RichTextBox_ifr" является идентификатор текстового поля ..

При этом вы можете изменить размер изображения .. .. .. Sarath @ f1

Answer 3

Я обошел это, добавив плагин в проект, который обрабатывает событие изменения размера.

Просто отправьте его здесь, если кому-то это понадобится.

tinymce.PluginManager.add('imageresizing', function(editor, url) { 

editor.on('ObjectResizeStart', function(e) { 
    if (e.target.nodeName == 'IMG') { 

     var selectedImage = tinymce.activeEditor.selection.getNode(); 
     tinymce.activeEditor.dom.setStyle(selectedImage,'width', e.width); 
     tinymce.activeEditor.dom.setStyle(selectedImage,'height', e.height); 

     selectedImage.removeAttribute('width'); 
     selectedImage.removeAttribute('height'); 
    } 
}); 

});

Конечно, вам нужно добавить плагин к tinyMCE, который выходит за рамки этого вопроса, но это совсем не сложно.