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

发布于 2025-01-06 22:36:43 字数 539 浏览 2 评论 0原文

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

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

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

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

如果用户定义图像的尺寸，我希望这个新尺寸覆盖常规的CSS。但是用img参数width&高度。这是不可能的。 CSS 覆盖它们的值。

所以。

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

例如：（

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

尺寸是通过将图像的一角拖动到您想要的尺寸来设置的。而不是在 html html 代码中编辑。）

感谢您的阅读。哑光的

原文

I use this wonderful tool, tinyMCE, for editing pages at my website.
But i have a problem with the resizing of images.

Is it possible to change the way tinyMCE changes the size of the image?
Now the software changes the width and height inside the ..

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

But this setting gets overridden by the CSS.
(I have some general img settings in the CSS, width, height:auto, and centering on page.)

If the users define a size for the image, i want this new size to override the general css.
But with the img parameter width & height. this is notpossible. CSS override their value.

So.

I want tinyMCE to change the size of the image by CSS. Is this possible?

ex:

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

(The size is set by draging the corner of an image to the size you want.. and not edited in html html code.)

Thanks for reading.
Matte

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

盛装女皇 2025-01-13 22:36:43

我通过在项目中添加一个处理调整大小事件的插件来绕过这个问题。

只是将其发布在这里，以防有人需要它。

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，这超出了这个问题的范围，但这一点也不难。

I bypassed this by adding a plugin in the project that handles the re-size event.

Just going to post it here in case someone ever needs it.

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');
    }
});

});

Of course you need to add the plugin to tinyMCE which is beyond the scope of this question, but it's not hard at all.

回复收藏 0 原文

十年九夏 2025-01-13 22:36:43

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

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

在 tinymce.init({

To solve the problem of getting the default image insert size to fit the container, i used

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

Inside the tinymce.init({

回复收藏 0 原文

蓝戈者 2025-01-13 22:36:43

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

回复收藏 0 原文

完美的未来在梦里 2025-01-13 22:36:43

$("#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的id..

用它你可以调整图像大小.. .. ..Sarath@f1

$("#ctl00_ContentPlaceHolder_RichTextBox_ifr").contents().find("body").find("img").attr("height", "150");
$("#ctl00_ContentPlaceHolder_RichTextBox_ifr").contents().find("body").find("img").attr("width", "200");

Here "#ctl00_ContentPlaceHolder_RichTextBox_ifr" is id of textarea..

With this you can resize the image .. .. ..Sarath@f1

回复收藏 0 原文

~没有更多了~