如何讓CKeditor從Hspace和Vspace切換到合適的CSS

Question

我正在與CKeditor合作，無論出於何種原因，他們都在他們的UI中包含了Hspace和Vspace。方便的想法允許用戶像這樣操縱他們的圖像，但這些方式已被棄用。

是否有人將CKeditor的Hspace和Vspace轉換爲CSS，並且知道如何解釋它的轉換？

我是一個JavaScript新手..

Answer 1

hspace和vspace以像素爲單位的利潤。轉換應該是直接的，直接的和簡單的。

您想在哪裏進行更正？我對CKEditor的來源一無所知，所以這讓我提出了三種選擇。

選項1：在提交時間時用適當的CSS 替換hspace和vspace屬性。這可能會在稍後影響可編輯性。

選項2：在呈現時間處用適當的CSS 替換hspace和vspace屬性。如果你以正確的方式做（HTML解析器），這可能會很慢。

選項3：在呈現時在客戶端上用適當的CSS 替換hspace和vspace屬性。這應該在jQuery，Prototype，Mootools或者你正在使用的任何庫中是微不足道的。

---

jquery救援！像這樣的東西可以工作。

$('img[hspace]').each(function(el){ 
    var pixels = parseInt($(el).attr('hspace')); 
    if(isNaN(pixels) || pixels < 1) 
     pixels = 0; 
    else 
     pixels = pixels/2 
    $(el).css('marginLeft', pixels + 'px') 
     .css('marginRight', pixels + 'px') 
     .removeAttr('hspace'); 
}); 

$('img[vspace]').each(function(el){ 
    var pixels = parseInt($(el).attr('vspace')); 
    if(isNaN(pixels) || pixels < 1) 
     pixels = 0; 
    else 
     pixels = pixels/2 
    $(el).css('marginTop', pixels + 'px') 
     .css('marginBottom', pixels + 'px') 
     .removeAttr('vspace'); 
}); 

Answer 2

您使用的是什麼版本的CKEditor？ 加載http://ckeditor.com/demo並查看該圖像的生成源代碼： style =「margin-left：10px; margin-right：10px; float：left; width：120px; height：168px;」所以你不必做任何事情。