tinymce, измените размер изображения, используйте css вместо <img width & height>

Question

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

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

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

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

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

Зв

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

например:

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

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

Спасибо за чтение. Матовый

Answer 1

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

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

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, который выходит за рамки этого вопроса, но это совсем не сложно.

Answer 2

В настоящее время невозможно легко изменить способ, которым TinyMCE добавляет теги width и height к элементу img.Для добавления этой функции открыт запрос на добавление функции Прекратить предварительное заполнение размеров изображения .

Answer 3

$ ("# 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" является идентификатором textarea ..

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