TinyMCE 阻止图像大小调整

Question

我正在使用以下方法将图像添加到 TinyMCE 编辑器：

var params = {
             src: filename,
             title: "Attached image: " + filename,
             width: 500
             };

ed.execCommand("mceInsertContent", false, ed.dom.createHTML("img", params));

这会在编辑器中正确插入图像。但是，当用户点击图片时，他可以调整图片大小。

我想知道是否有办法：

1. 防止用户仅在一个方向调整大小（即如何保持图像的固定纵横比）
2. 完全防止用户调整图片大小

Answer 1

您可以简单地将this little plugin 添加到tinyMCE，我使用它并且效果很好！ 这是文档：Link

Answer 2

我找到了一个（部分）答案，所以我想我会在这里分享。

添加

'object_resizing' : false

在编辑器配置中防止调整大小。 请注意，这只是 Mozilla 的一项功能（例如，Google Chrome 不允许您调整图像大小）。

我仍在寻找将aspect ratio 保留在real time 中的方法，但我不知道这是否真的可能。

Answer 3

您需要实现一个调整大小处理程序（例如a jQuery handler）。 将属性添加到图像以保存其尺寸或使用单个设置来保存纵横比可能会有所帮助。为此，您将调整 tinymce 配置设置 valid_elements 以允许图像的这些属性 - 否则 tinymce 会将它们删除。

当调整大小被触发时，您获取新尺寸并根据纵横比调整尺寸 - 使用新宽度或新高度进行调整（其他值需要更正）。

示例：图像有一个属性 aspectratio 保存纵横比

您可以将此代码放在tinymce setup configuration 参数中

   setup : function(ed) {
      ed.onInit.add(function(ed) {
        $(ed.getBody()).find('img').resize( function(event){

          $(event.target).css('width', parseInt ( event.target.width * this.aspectratio)  );

        });
      });
   }

更新：

我创建了a tinymce fiddle 来展示一个用于 IE 的示例。