html - tinymce，图像调整大小，使用 css 代替

Question

我使用这个很棒的工具 tinyMCE 在我的网站上编辑页面。但是我在调​​整图像大小方面遇到了问题。

是否可以改变 tinyMCE 改变图像大小的方式？现在，软件会更改 .. 中的宽度和高度。

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

但是这个设置被 CSS 覆盖了。(我在 CSS 中有一些通用的 img 设置，宽度、高度:自动和页面居中。)

如果用户为图像定义尺寸，我希望这个新尺寸覆盖一般的 css。但是使用 img 参数宽度和高度。这是不可能的。 CSS 覆盖它们的值。

所以。

我想让tinyMCE通过CSS改变图片的大小。这可能吗？

例如:

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

(大小是通过将图像的一 Angular 拖动到您想要的大小来设置的。而不是在 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，这超出了这个问题的范围，但一点也不难。