TinyMCE的防止图像缩放

我加入了一个图像使用TinyMCE的编辑器：TinyMCE的防止图像缩放

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

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

这正确地插入图像编辑器。但是，当用户点击图像时，他可以调整它的大小。

我想知道是否有一种方法：

防止调整只在一个方向（即我怎么保持一个固定的宽高比为图像）
完全防止用户用户调整图像大小

来源

2012-08-15 nico

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

添加

'object_resizing' : false

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

我仍在寻找aspect ratio在real time，但我不知道这是否真的有可能。

来源

2012-08-18 09:16:44 nico

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

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

实施例：图像具有纵横比保持宽高比

一个属性，则可以将这个代码在thetinymce 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的例子。

来源

2012-08-20 10:21:37 Thariama

感谢您花时间做这件事。然而，至少在FF和Chrome（对不起，使用Linux，无法用IE测试），我没有选择调整图像的大小。如果我打开'object_resizing'调整大小事件不会被调用...是否有我缺少的东西？ – nico 2012-08-20 14:25:50

在webkit（safari/chrome）下面存在一个tinymce bug报告：tinymce.com/develop/bugtracker_view.php?id=2495 – Thariama 2012-08-20 15:33:27

好吧，这不是问题，'object_resizing = FALSE'关闭句柄Firefox（不知道关于IE）。 Webkit不显示它们的事实仅仅是因为它没有在'iframes'中实现对象大小调整。我的观点是即使在Firefox中也不会调用resize事件。我认为这是由于事件不在同一窗口中。所以我的问题是：在IE 1）你看到'object_resizing = false'的句柄？ 2）调整图像大小时调用的大小调整事件？ – nico 2012-08-20 15:43:27

您可以简单地将this little plugin添加到tinyMCE，我使用它，它工作得很好！这里的文档：Link

来源

2012-08-23 19:41:39 TrizZz

TinyMCE的防止图像缩放

回答

相关问题