Forums

Add class to Rich Text Editor

Permalink
Hi

How can I add "form-control" class to RTE ?
I create textarea by:
$editor = Core::make('editor');
                        print $editor->outputStandardEditor('event_description',isset($event_description));
IceManSpy
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi IceManSpy,

I don't believe you can add classes.

What are you trying to accomplish by adding that class, is it the box shadow?

Here is an example of the Redactor output of the Feature block:
<div class="redactor-box" role="application">
    <ul class="redactor-toolbar" id="redactor-toolbar-0" role="toolbar">
        <li>
            <a href="#" class="undefined re-icon re-undo fa fa-undo" rel="undo" tabindex="-1"></a>
        </li>
        <!-- there are many of these list items buttons -->
    </ul>
    <div class="redactor-editor" contenteditable="true" dir="ltr" style="min-height: 300px;">
        <p>Pellentesque ultricies ligula vel neque dictum, eu mollis tortor adipiscing. Etiam congue, est vel tincidunt vestibulum, nunc nunc porta nulla, at adipiscing neque tellus quis urna.</p>
    </div>
    <textarea data-redactor-editor="fjRKF9p7VzCt8LYhWvTsrVHpQnqxTUvc" name="paragraph" dir="ltr" style="display: none;">Pellentesque ultricies ligula vel neque dictum, eu mollis tortor adipiscing. Etiam congue, est vel tincidunt vestibulum, nunc nunc porta nulla, at adipiscing neque tellus quis urna.</textarea>
</div>

The div.redactor-editor is where Redactor is adding content. The text-area is not displayed.

I am assuming you want to do something like this?
<div class="redactor-editor form-control" contenteditable="true" dir="ltr" style="min-height: 300px; display: block;">
    content typed in goes here
    <p></p>
</div>

Since you can't add the class, instead you could try targeting that div. To do that, you could use "div.ui-dialog .redactor-editor".
IceManSpy replied on at Permalink Reply
IceManSpy
I need add "form-control" because I want to make the same alignment with other inputs.

I've paste your code
<div class="redactor-editor form-control" contenteditable="true" dir="ltr" style="min-height: 300px; display: block;">
    <?php echo (isset($event_description)) ? $event_description : ''; ?>
</div>

but WYSWIG editor doesn't run.

So do I need run wyswig editor explicitly via JavaScript?
MrKDilkington replied on at Permalink Reply
MrKDilkington
You would create the Redactor rich text editor as before, but would target "div.ui-dialog .redactor-editor" with CSS.
div.ui-dialog .redactor-editor {
    /*insert the CSS declarations that .form-control uses*/
}
IceManSpy replied on at Permalink Reply
IceManSpy
Ok, I copy CSS from Bootstrap to my own code.
But I think, I should add many classes to editor with copy CSS code.

But ok. Thanks for reply.