Winter CMS resources and help articles

Simple and to the point. Optimized by the community.

Add rich text editor on popup modal on list

0
by rezalaal@gmail.com, last modified on October 20th, 2021

On columns.yaml I have a button:

button:
        label: SetContent
        type: partial
        clickable: false
        path: $/acme/test/models/testmodel/_button.htm

On _button.htm :

<button
    class="btn btn-danger oc-icon-file-text-o"          
    data-request="onContentModal"
    data-toggle="modal"
    href="#content-modal"
    data-request-update="partials/popup_content_form: '#contentModal'"          
    data-stripe-load-indicator
>
Set Content
</button>

to show modal after clicking on button add this lines on index.hym on controller :


<?= $this->listRender() ?>
 <!-- Modal -->
 <div
 class="modal fade"
 id="content-modal"
 tabindex="-1"
 aria-labelledby="cartModalLabel"
 aria-hidden="true"

 >
     <div class="modal-dialog modal-lg">
         <div class="modal-content" id="contentModal">
             <div class="modal-header  text-center">
                <h5 class="modal-title" >Rich Text Editor on Modal </h5>              
             </div>
             <div class="modal-body" id="cartinfo">
                  Please wait . . . 
             </div>
             <div class="modal-footer"></div>
         </div>
     </div>
 </div>

add this method on controller:

public function onContentModal()
    {
        $config = $this->makeConfig('$/acme/test/models/testmodel/fields_content.yaml');

        $config->model = new \Acme\Test\Models\TestModel;
        $widget = $this->makeWidget('Backend\Widgets\Form', $config);

        $this->vars['widget'] = $widget;
    }

then create fields_content.yaml on model:

fields:
    content:
        label: Content   
        type: richeditor
        toolbarButtons:  bold|italic|fontSize|color|inlineStyle|paragraphStyle|paragraphFormat|align|formatOL|formatUL|outdent|indent|quote|insertHR|undo|redo|clearFormatting|selectAll|html
        size: huge 

now create _popup_content_form.htm

    <?= Form::open() ?>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">RichEditorOnPartialonList </h4>
    </div>
    <div class="modal-body">

        <?= $widget->render() ?>

    </div>        
    <div class="modal-footer">
        <button data-request="onUpdate" class="btn btn-primary">
            OK
        </button> 
    </div>
    <?= Form::close() ?>

sample codes are here(github)

Thanks from : Romain 'Maz' B. and LukeTowers

Discussion

0 comments

We use cookies to measure the performance of this website. Do you want to accept these cookies?