7

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

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

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

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

我想知道是否有办法：

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

3 回答 3

11

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

添加

'object_resizing' : false

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

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

于 2012-08-18T09:16:44.957 回答
4

您可以简单地将这个小插件添加到 tinyMCE，我使用它并且效果很好！这是文档：链接

于 2012-08-23T19:41:39.870 回答
3

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

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

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

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

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

        });
      });
   }

更新：

我创建了一个 tinymce fiddle来展示一个与 IE 一起使用的示例。

于 2012-08-20T10:21:37.660 回答