tinymce,图像调整大小,使用css而不是<img rel="nofollow noreferrer" width&height>

Question

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

是否有可能改变tinyMCE改变图像大小的方式？现在软件改变了内部的宽度和高度..

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

但是这个设置被CSS覆盖了.(我在CSS中有一些常规的img设置,宽度,高度:自动,以及页面居中.)

如果用户定义图像的大小,我希望这个新大小覆盖一般的CSS.但是使用img参数width和height.这是不可能的.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

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

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

在 - 的里面tinymce.init({

Answer 3

目前似乎无法轻松更改 TinyMCE 将宽度和高度标签添加到 img 元素的方式。有一个功能请求开放以添加此功能“停止预填充图像尺寸”。