Question

我使用这个奇妙的工具tinyMCE来编辑我网站上的页面。但我对图像的大小调整有问题。

是否可以改变tinyMCE改变图像大小的方式？现在软件改变了..

内的宽度和高度

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

但是这个设置被CSS覆盖了。（我在CSS中有一些常规的img设置，宽度，高度：自动，并在页面上居中。）

如果用户定义图像的大小，我希望这个新大小覆盖一般的CSS。但是使用img参数宽度＆amp;高度。这是不可能的。 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将宽度和高度标签添加到img元素的方式。有一项功能请求可以添加此功能Stop Prepopulating Image Dimensions。

Answer 3

$（＆＃34;＃ctl00_ContentPlaceHolder_RichTextBox_ifr＆＃34）。内容（）找到（＆＃34;主体＆＃34）。发现（＆＃34; IMG＆＃34）。ATTR（＆＃34;身高＆＃34;，＆＃34; 150＆＃34;）; $（＆＃34;＃ctl00_ContentPlaceHolder_RichTextBox_ifr＆＃34）的内容（）找到。（＆＃34;主体＆＃34）。发现（＆＃34; IMG＆＃34）ATTR（＆＃34;宽度＆＃34 ;，＆＃34; 200＆＃34;）;

这里＆＃34;＃ctl00_ContentPlaceHolder_RichTextBox_ifr＆＃34;是textarea的id ..

有了这个你可以调整图像大小.. .. .. Sarath @ f1

Answer 4

为了解决获取默认图片插入大小以适应容器的问题，我使用了

content_style: 'img {max-width: 100%;}'

在tinymce.init({内

tinymce，图像调整大小，使用css而不是<img width="" &="" height=""/>

4 个答案: