Question

I recently wrote a CKEditor plugin to add captions to images, it all works pretty good except for one thing.

The code of the caption looks like this:

<div class="caption_container">
     <img src="image.jpg" />
     <div class="caption_text">
         Caption
     </div>
</div>

When I select the “Caption” text and click the ordered list button, the caption_text div element changes into an ul instead of the ul being added to the div

Result:

<div class="caption_container">
     <img src="image.jpg" />
     <ul class="caption_text">
         <li>First item</li>
     </ul>
</div>

The result I would like to get is:

<div class="caption_container">
     <img src="image.jpg" />
     <div class="caption_text">
         <ul>
             <li>First item</li>
         </ul>
     </div>
</div>

Is there a way to achieve this?

Answer 1

If you don’t want to touch CKEditor source code I have a simple solution for you. You could add a extra ‘div’ to prevent deletion of ‘div class=”caption_text”‘ so it will look like:

<div class="caption_container">
     <img src="image.jpg" />
     <div class="caption_text">
          <div>
              Caption
          </div>
     </div>
</div>

In the end you will have the desired:

<div class="caption_container">
     <img src="image.jpg" />
     <div class="caption_text">
         <ul>
             <li>First item</li>
         </ul>
     </div>
</div>