Problems, need help? Have a tip or advice? Post it here.
4 posts Page 1 of 1
hello forum ... I have a Highlight Box styled in a particular way with CSS (class="highlight-box") and marked up as follows:
Code: Select all
  <div class="highlight-box">
       <h4>Heading</h4>
       <ul>
           <li>list items</li> ...
            </ul>
       <p>More content </p>
   </div>


I would like the client to be able to inject a styled Highlight Box wherever they wish within a RichText area. I have tried using custom_styles to wrap the sub-elements, <h4><ul><p> etc within a <div class="highlight-box"> - but each sub-element is wrapped in a separate <div class="highlight-box"> tag.

So, I thought I'd create a shortcode:
Code: Select all
function highlight_box_handler( $params, $content=null ){
      if( is_null($content) ) return '';
     
      return '<div class="highlight-box">' . $content . '</div>';
   }


But problems arise with CKEditor when say, setting up a Heading 4 style from the dropdown Format list. Instead of creating a separate H4 within the shortcode tags I get this:
Code: Select all
<h4>   [highlight_box] heading [/highlight_box]</h4>
which expands to this:
Code: Select all
<h4>   <div class="highlight-box"> heading </div></h4>


I have a feeling I'm missing something obvious - but can't see a way to do this ... any advice anyone? Thanks!!
One solution I've used in a similar situation is to put the content inside of a table, then apply the style to the table. Of course, you have to create the table first then put the content inside of it. Have you tried that with a div? Rather than selecting the content and applying the style to it, create the div then put the content into it. I've noticed too that CKEditor easily becomes confused when you start messing with divs in the richtext editor.
@potato, I haven't had an opportunity to dig deeper into it but do you think the new widgets feature of CKEditor (http://docs.ckeditor.com/#!/guide/dev_widgets) could be an answer to your problem?

The tutorial they have doesn't seem too complicated - http://docs.ckeditor.com/#!/guide/widget_sdk_tutorial_1
@tim - thanks for your suggestions - clients seem to have an ability to get in a muddle very easily - even when I think it is straightforward - so I'm always looking for a simple solution, where the chances of them getting it wrong are minimal!
@kk I'll have a look at the widgets feature - would be great if this does the job - otherwise I'll have to be more prescriptive in my design and what the client can do with it ...

.. will let you know how I get on with ckeditor widgets.
4 posts Page 1 of 1