Question

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

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

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

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

我想知道是否有办法：

防止用户仅在一个方向上调整大小（即如何为图像保持固定的宽高比）
完全阻止用户调整图片大小

Answer 1

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

添加

'object_resizing' : false

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

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

Answer 2

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

Answer 3

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

当调整大小被触发时，你会抓住新尺寸并根据宽高比调整尺寸 - 使用新宽度或新高度进行调整（另一个值需要更正）。

示例：图片具有包含宽高比的属性aspectratio

您可以将此代码放在名称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一起使用的示例。

TinyMCE可防止图像大小调整

3 个答案: