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的防止圖像縮放

回答

相關問題