2014-10-06 59 views
2

我正在使用TinyMCE 4.在編輯器中對齊圖像時的行爲很奇怪。使用浮動和邊距的TinyMCE奇怪圖像對齊方式:自動

  • 左對齊
    • 實際:style="float: left;"
    • 預計:<p style="text-align: left"><img ... /></p>
  • 右對齊
    • 實際:style="float: right;"
    • 預計:<p style="text-align: right"><img ... /></p>
  • 居中
    • 實際:style="display: block; margin-left: auto; margin-right: auto"
    • 預計:<p style="text-align: center"><img ... /></p>

應用浮動的原因意外的行爲。例如,拿兩個圖像上的兩行,像這樣:

[img 1] 
[img 2] 

如果我申請左對齊的第一,和第二右對齊,他們出來在同一行,由於浮動:

[img 1]      [img 2] 

我希望它有同樣的表現爲文本:

[img 1] 
           [img 2] 

有沒有辦法在TinyMCE的4更改或覆蓋這種行爲?

回答

0

事實證明,TinyMCE提供了一個onNodeChange事件。在這裏,您可以檢測哪種類型的節點發生了變化以及如何變化。在這裏,我能夠檢測到源節點是一個圖像和已添加的屬性。然後,我可以將預期的標記應用於它的位置。

0

既然你的浮動元素失去了它的高度,他們在一條線上排隊。

所有你需要的是他們之間的附加元素與clear:both;在CSS中。 JSFiddle

+0

謝謝你的回答,但我想你錯過了我的觀點。我不想讓它漂浮,我希望它對齊。 – 2014-10-06 11:44:22

+0

@flem所以使用'text-align:left/right'和'display:inline(-block);' – Justinas 2014-10-06 11:46:49

+0

這個問題是關於TinyMCE的。編輯沒有寫這個標記。我需要在編輯器中改變對齊功能的行爲。我不能要求我的最終用戶更新源代碼。 – 2014-10-06 11:49:10