Mura Module With HTML Editor Example

config.xml.cfm

<mura name="My Module" contenttypes="*" iconclass="mi-rebel" />

configurator.cfm

<cfscript>
    param name="objectparams.cardtitle" default="";
    param name="objectparams.cardbody" default="";
    instanceid = m.setCamelBack(m.createCSSID(objectparams.instanceid));
</cfscript>

<cfoutput>
    <!--- Card Title --->
    <div class="mura-control-group">
        <label class="mura-control-label">
            Card Title
        </label>
        <input type="text" 
                name="cardtitle" 
                class="objectParam" 
                value="#esapiEncode('html_attr',objectParams.cardtitle)#"/>
    </div>

    <!--- Card Body Modal Button --->
    <div class="mura-control-group">
        <button type="button" class="btn btn-primary" id="modal#instanceid#">Open Modal</button>
    </div>

    <input name="trim-params" class="objectParam" type="hidden" value="true"/>

    <script>
        Mura(function(m){
            m('##modal#instanceid#').click(function(){
                siteManager.openDisplayObjectModal('mymodule/editor.cfm', #serializeJSON(objectparams)#);
            });
        });
    </script>
</cfoutput>

editor.cfm

<cfscript>
    // param name="url.instanceid" default="";
    // instanceid = m.setCamelBack(m.createCSSID(url.instanceid));
</cfscript>

<cfoutput>
    <div class="mura-header">
        <h1>Card Body</h1>
    </div>

    <div class="block block-constrain">
        <div class="block block-bordered">
            <div class="block-content">
                <div class="mura-control-group">
                    <textarea name="cardbody" id="cardbody" class="htmlEditor objectParam" data-width="100%"></textarea>
                </div>
                <div class="mura-actions">
                    <div class="form-actions">
                        <button class="btn mura-primary" id="btnUpdate">
                            <i class="mi-check-circle"></i> Update
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    Mura(function(m){
        //This set the front end modal window width
        // The default is 'standard'
        siteManager.setDisplayObjectModalWidth(600);

        //This requests the current display object param values
        siteManager.requestDisplayObjectParams(function(params){
            //This is optional, it fire after Mura has already matched all params key to form elements with objectParam class by name
        });

        m("##btnUpdate").click(function(){
            //This collects the values of all form elements with a class of objectParam and assigns them to the display object and then closes the dialog and re-init the sidebar configurator.cfm
            siteManager.updateDisplayObjectParams({cardbody:CKEDITOR.instances['cardbody'].getData()});

            //Optionally you can explicitly set the params to be set in the display object
            // siteManager.updateDisplayObjectParams({var1:'test1'});
        });
    });
    </script>
</cfoutput>

index.cfm

<cfscript>
    param name="objectparams.cardtitle" default="";
    param name="objectparams.cardbody" default="";
    instanceid = m.setCamelBack(m.createCSSID(objectparams.instanceid));
</cfscript>

<cfoutput>
    <div class="col" id="col#instanceid#">
        <div class="card" id="card#instanceid#">
                <!--- Card Title --->
                <cfif Len(objectparams.cardtitle)>
                    <div class="card-header" id="cardHeader#instanceid#">
                        #esapiEncode('html', objectparams.cardtitle)#
                    </div>
                </cfif>

            <!--- <img src="#item.getImageURL('carouselimage')#" class="card-img-top"> --->
            <div class="card-body" id="cardBody#instanceid#">
                <!--- Card Body --->
                <cfif Len(objectparams.cardbody)>
                    #objectparams.cardbody#
                </cfif>

                <!--- <a href="#item.getURL()#" class="btn btn-primary">Read More</a> --->
            </div>
        </div>
    </div>
</cfoutput>

Legend !! 🙌