title: CKeditor : Wrap ul list in a div with class
body: <p>I wish to customize a new style in ckeditor (under liferay 6.2).
  So far, I'm able to create styles like this, in the ckconfig.jsp :</p>
  
  <pre><code>{name: 'Floating style', element: 'div', attributes: {'class': 'floating-list'}}
  </code></pre>
  
  <p>This is a style I would like to apply to a wrapping <code>div</code> parent to a the desired <code>ul</code> list. It would look like that :</p>
  
  <pre><code>&lt;div class="floating-list"&gt;
      &lt;ul&gt;
          &lt;li&gt;item&lt;/li&gt;
          &lt;li&gt;item&lt;/li&gt;
          &lt;li&gt;item&lt;/li&gt;
          &lt;li&gt;item&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the problem is that when I apply the style to my list, it of course applies to my <code>ul li</code> contents like this :</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;div class="floating-list"&gt;item&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div class="floating-list"&gt;item&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div class="floating-list"&gt;item&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div class="floating-list"&gt;item&lt;/div&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>To avoid this behaviour, I wrote a little piece of jquery code :</p>
  
  <pre><code>$('.floating-list').closest('ul').each(function(){
      var list = $(this);
      var item = list.find('li');
      item.each(function(){
          $(this).html( $(this).find('.floating-list').html() );
      });
      list.replaceWith('&lt;div class="floating-list"&gt;&lt;ul&gt;'+list.html()+'&lt;/ul&gt;&lt;/div&gt;');
  });
  </code></pre>
  
  <p>This works actually, but this is really dirty.</p>
  
  <p>I'm wondering if there was a way to make it out. Thanks.</p>