how to arrange content in bootstrap grid in ckeditor ?

[adrianmak]

I attached bootstrap grid only classes in ckeditor custom.css

Then I put grid class in body content.

But why the third column dropped on next line ?

[netcarver]

Is there a pressing reason to mix this level of layout into your content? Would separating the columns into individual textareas and moving the layout details into your templates work better?

[Macrura]

you could also try using a token like {{column-break}} and then use this function on your body field output:

function columnizeMarkup($markup) {
	if(strpos($markup, '<p>{{column-break}}</p>') == false) return $markup;
    $bodyParts = explode('<p>{{column-break}}</p>', $markup);
    $colClass = 12 / count($bodyParts);
    $columns = '';
    foreach($bodyParts as $col) {
        $columns .= "<div class='col-md-{$colClass}'>$col</div>";
    }
    return '<div class="row">' . $columns . '</div>';
}

 

[netcarver]

@Macrura That's quite nice, could make a useful textformatter.

[Jonathan Lahijani]

@adrianmak I would strongly consider you don't put divs in CKeditor fields as this is a very fragile and error-prone approach.  My solution to this is either (a) use HannaCodes to represent opening and closing of divs or (b) use RepeaterMatrix.

[Macrura]

and in my example, it only works if you want to columnize the whole field, else you also need to extend that function to have a row/section break

[adrianmak]

On 11/2/2016 at 6:12 PM, netcarver said:

Is there a pressing reason to mix this level of layout into your content? Would separating the columns into individual textareas and moving the layout details into your templates work better?

the site is supporting responsive layout.  Users will add in-line images in anywhere of the content body. In this case without using grid to layout content in the body field, the final look view in mobile devices may look not properly