ckeditor modify template with dialog content

I have a widget with a dialog to load custom content from some ajax calls and preview the results in the dialog

how can I get the preview content to populate the widget template?

the dialog code has a lot of inline styles to support the look in the dialog, the template has less code as it can use the site css files.

the question wants more descriptive text in order for me to submit the question.

widget code

(function() {
 CKEDITOR.plugins.add( 'cc_widget', {
icons: "cc_widget_button",
init: function(editor) {
  // Styles
  editor.addContentsCss( this.path + 'cc-widget.css' + '?' + new Date());
    data = [];
    data['card_name']               = 'CARD NAME';
    data['card_slug']               = 'card-name';
    data['card_image']              = '';
    data['card_description']        = 'CARD DESCRIPTION';
    data['annual_fee']              = 'ANNUAL FEE';
    data['annual_fee_info']         = '';
    data['purchase_interest_rate']  = 'INT RATE';
    data['interest_info']           = '';
    data['cash_advance_rate']       = 'INT RATE';
    data['cash_advance_info']       = '';
    data['balance_transfer_rate']   = 'INT RATE';
    data['balance_transfer_info']   = '';
    data['rewards_rate']            = 'REWARDS RATE';
    data['bonus_offer']             = 'BONUS OFFER';
    data['card_type']               = 'CARD TYPE';
    data['credit_needed']           = 'CREDIT SCORE';
  // Template
  var str_html = "<div class=\"credit-card credit-card-widget\"> " +
            "<div class=\"h3\">" + data.card_name + "</a></div>" +
            "<div class=\"card-info\">" +
                "<div class=\"card-image\">" +
                    "<a href=\"/card-details/" + data.card_slug + "\\\">" +
                        "<img alt=\"" + data.card_name + "\" src=\"/resources/images/credit-cards/" + data.card_image + "\">" +
                    "</a>" +
                "</div>" +
                "<div class=\"card-details\">" +
                    "<div class=\"h4\">Fees and interest</div>" +
                    "<dl>" +
                        "<dt>Annual fee:</dt> " + 
                        "<dd>$" + data.annual_fee + "</dd>" +
                        (data.annual_fee_info ? "<dd class=\"note\">" + data.annual_fee_info + "</dd>" : '' ) +
                        "<dt>Purchase interest rate:</dt> " + 
                        "<dd>" + data.purchase_interest_rate + "%</dd>"  +
                        (data.interest_info  ? "<dd class=\"note\">" + data.interest_info + "</dd>" : '' ) +
                        "<dt>Cash advance rate:</dt> " + 
                        "<dd>" + data.cash_advance_rate + "%</dd>" +
                        (data.cash_advance_info ? "<dd class=\"note\">" + data.cash_advance_info + "</dd>" : '' ) +
                        "<dt>Balance transfer rate:</dt> " + 
                        "<dd>" + data.balance_transfer_rate + "%</dd>" +
                        (data.balance_transfer_info ? "<dd class=\"note\">" + data.balance_transfer_info + "</dd>" : '' ) +
                        "<dt>Rewards Rate:</dt> " + 
                        "<dd>" + data.rewards_rate + "</dd>" +
                        "<dt>Bonus Offer:</dt> " + 
                        "<dd>" + data.bonus_offer + "</dd>" +
                        "<dt>Card Type:</dt> " + 
                        "<dd>" + data.card_type + "</dd>" +
                        "<dt>Credit Needed:</dt> " + 
                        "<dd>" + data.credit_needed + "</dd>" +
                    "</dl>" +
                "</div>" +
            "</div>" +
            "<div class=\"card-description\">" +
                "<p>" + data.card_description + "</p>" +
                "<div class=\"buttons\">" +
                "<a class=\"btn secondary\" href=\"/card-details/" + data.card_slug + "\\\">Learn More</a>&nbsp;</div>" +
            "</div>" +
        "</div>"; 


  // Dialog
  CKEDITOR.dialog.add( 'cc_widget', this.path + 'dialog.js' );

  // Widget definition
  editor.widgets.add("cc_widget",{
      init : function(){
          console.log(this);
        var button = this.element.findOne(".button");


      },
      upcast : function(element) {
        return element.hasClass("credit-card-widget");
      },
      template :str_html,
      editables : {


      },
      dialog : "cc_widget",

      data : function() {

        var button = this.element.findOne(".button");

      }
  });

  // Button action
  editor.addCommand( 'add_cc_widget_box', {
    exec : function(editor) {
      editor.execCommand("cc_widget");
    }
  });

  // Button definition
  editor.ui.addButton( 'cc_widget_button', {
    label: 'Add cc-widget link',
    command: 'add_cc_widget_box',
    icon: this.path + 'cc-widget.png'
  });
}
});
})();`

dialog code

CKEDITOR.dialog.add( 'cc_widget', function(editor) {
data = [];
data['card_name']               = 'CARD NAME';
data['card_slug']               = 'card-name';
data['card_image']              = '';
data['card_description']        = 'CARD DESCRIPTION';
data['annual_fee']              = 'ANNUAL FEE';
data['annual_fee_info']         = '';
data['purchase_interest_rate']  = 'INT RATE';
data['interest_info']           = '';
data['cash_advance_rate']       = 'INT RATE';
data['cash_advance_info']       = '';
data['balance_transfer_rate']   = 'INT RATE';
data['balance_transfer_info']   = '';
data['rewards_rate']            = 'REWARDS RATE';
data['bonus_offer']             = 'BONUS OFFER';
data['card_type']               = 'CARD TYPE';
data['credit_needed']           = 'CREDIT SCORE';
var message = "<h1>Content will display here after selections are made.</h1>";
str = "<div class=\"credit-card credit-card-widget\" style=\"max-width: 800px ; border: 1px solid #E4EAEB; padding: 34px 50px; background: #F5F8F9; margin: 30px 0;\"> " +
            "<div class=\"h3\" style=\"box-sizing:border-box;color:rgb(44, 64, 85);display:block;font-family:'Open Sans', sans-serif;font-size:25px;font-weight:600;height:34px;margin:0px;text-rendering:optimizeLegibility;text-size-adjust:100%;width:878px;\"><a href=\"/card-details/" + data.card_slug + "\" style=\"box-sizing:border-box;color:rgb(44, 64, 85);cursor:pointer;display:inline;font-family:'Open Sans', sans-serif;font-size:25px;font-weight:600;height:auto;text-decoration-color:rgb(44, 64, 85);text-decoration-line:none;text-decoration-style:solid;text-rendering:optimizeLegibility;text-size-adjust:100%;transition-delay:0s;transition-duration:0.2s;transition-property:color;transition-timing-function:ease;width:auto;word-wrap:break-word;\">" + data.card_name + "</a></div>" +
            "<div class=\"card-info\" style=\"max-width: 640px;margin: 1em auto;\">" +
                "<div class=\"card-image\" style=\"float: left;max-width: 50%;\">" +
                    "<a href=\"/card-details/" + data.card_slug + "\\\" style=\"color: #2c4055;text-decoration: none;transition: color 0.2s;\">" +
                        "<img alt=\"" + data.card_name + "\" src=\"/resources/images/credit-cards/" + data.card_image + "\">" +
                    "</a>" +
                "</div>" +
                "<div class=\"card-details\" style=\"float: right;max-width: 50%;\">" +
                    "<div class=\"h4\" style=\"box-sizing:border-box;color:rgb(56, 82, 102);display:block;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;margin:0px;text-rendering:optimizeLegibility;text-size-adjust:100%;width:270px;\">Fees and interest</div>" +
                    "<dl style=\"color: #7A8593;min-width: 270px;text-align: left;color: #7A8593;margin: 0;padding: 0;\">" +
                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Annual fee:</dt> " + 
                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">$" + data.annual_fee + "</dd>" +
                        (data.annual_fee_info ? "<dd class=\"note\" style=\"box-sizing:border-box;clear:both;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:12px;line-text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.annual_fee_info + "</dd>" : '' ) +
                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Purchase interest rate:</dt> " + 
                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.purchase_interest_rate + "%</dd>"  +
                        (data.interest_info  ? "<dd class=\"note\" style=\"box-sizing:border-box;clear:both;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:12px;line-text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.interest_info + "</dd>" : '' ) +
                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Cash advance rate:</dt> " + 
                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.cash_advance_rate + "%</dd>" +
                        (data.cash_advance_info ? "<dd class=\"note\" style=\"box-sizing:border-box;clear:both;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:12px;line-text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.cash_advance_info + "</dd>" : '' ) +
                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Balance transfer rate:</dt> " + 
                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.balance_transfer_rate + "%</dd>" +
                        (data.balance_transfer_info ? "<dd class=\"note\" style=\"box-sizing:border-box;clear:both;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:12px;line-text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.balance_transfer_info + "</dd>" : '' ) +
                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Rewards Rate:</dt> " + 
                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.rewards_rate + "</dd>" +
                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Bonus Offer:</dt> " + 
                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.bonus_offer + "</dd>" +
                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Card Type:</dt> " + 
                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.card_type + "</dd>" +
                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Credit Needed:</dt> " + 
                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.credit_needed + "</dd>" +
                    "</dl>" +
                "</div>" +
            "</div>" +
            "<div class=\"card-description\" style=\"clear:both;\">" +
                "<p style=\"line-height: 1.375em;word-wrap: break-word;font-family: 'Bitter', serif;font-size: 1em; margin: 1em 0; color: #677381; display: block; -webkit-margin-before: 1em;  -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px;\">" + data.card_description + "</p>" +
                "<div class=\"buttons\" style=\"box-sizing:border-box;display:block;font-family:'Open Sans', sans-serif;font-size:16px;height:50px;text-align:center;text-rendering:optimizeLegibility;text-size-adjust:100%;width:100%\">" +
                "<a class=\"btn secondary\" style=\"font-size: 1em;padding: 0 30px;line-height: 48px;color: #FFF;"+
                "background: #fa305f;border: 1px solid #e42e58;display: inline-block;border-radius: 3px;font-weight: 600;" +
                "font-family: 'Open Sans', sans-serif;text-align: center;cursor: pointer;\" href=\"/card-details/" + data.card_slug + "\\\">Learn More</a>&nbsp;</div>" +
            "</div>" +
        "</div>"; 
return {
    title: 'Edit cc-widget content',
    minWidth: 800,
    maxWidth: 800,
    minHeight: 400,
    maxHeight: 400,
    //onLoad: function(){ this.getElement().removeClass('cke_reset_all')},
    contents: [
        {
            id: "cc_widget_dialog",
            elements: [
                {
                    id: "select_lender",
                    type: "select",
                    label: "Select a Lender",
                    items : [ ['--- Select a Lender ---',0] ],
                    onLoad: function (widget) {
                        var selectList = this;
                        jQuery.ajax({
                            type: 'GET',
                            url: '/ajax/creditcards/lenders/get/lender-names/all/json',
                            contentType: 'application/json; charset=utf-8',
                            dataType: 'json',
                            async: true,
                            success: function(data) {   
                                jQuery.each(data, function(key, val) {
                                        selectList.add(key, val);
                                });
                            }
                        });
                    },
                    onChange: function(widget){
                        //var selectList =  CKEDITOR.dialog.select_card) ;
                        var dialog = this.getDialog();
                        selectList = dialog.getContentElement('cc_widget_dialog','select_card');

                        jQuery.ajax({
                            type: 'GET',
                            url: '/ajax/creditcards/creditcards/get/card-list/' + this.getValue()  + '/json',
                            contentType: 'application/json; charset=utf-8',
                            dataType: 'json',
                            async: true,
                            success: function(data) {
                                selectList.clear(); 
                                selectList.add(selectList.items[0][0],selectList.items[0][1]);
                                jQuery.each(data, function(key, val) {
                                    selectList.add(key, val);
                                });
                            }
                        });
                    }
                },
                {
                    id: "select_card",
                    type: "select",
                    label: "Select a Card",
                    items : [ ['--- Select a Card ---',0] ],
                    onLoad: function (widget) {
                            //this.getElement().removeClass('cke_reset_all');
                            var selectList = this;
                    },
                    onChange: function(widget){
                        jQuery.ajax({
                            type: 'GET',
                            url: '/ajax/creditcards/creditcards/get/card-detail/' + this.getValue()  + '/json',
                            contentType: 'application/json; charset=utf-8',
                            dataType: 'json',
                            async: true,
                            success: function(data) {
                                parent.data = data;
                                str  = "<div class=\"h3\" style=\"box-sizing:border-box;color:rgb(44, 64, 85);display:block;font-family:'Open Sans', sans-serif;font-size:25px;font-weight:600;height:34px;margin:0px;text-rendering:optimizeLegibility;text-size-adjust:100%;width:878px;\"><a href=\"/card-details/" + data.card_slug + "\" style=\"box-sizing:border-box;color:rgb(44, 64, 85);cursor:pointer;display:inline;font-family:'Open Sans', sans-serif;font-size:25px;font-weight:600;height:auto;text-decoration-color:rgb(44, 64, 85);text-decoration-line:none;text-decoration-style:solid;text-rendering:optimizeLegibility;text-size-adjust:100%;transition-delay:0s;transition-duration:0.2s;transition-property:color;transition-timing-function:ease;width:auto;word-wrap:break-word;\">" + data.card_name + "</a></div>" +
                                            "<div class=\"card-info\" style=\"max-width: 640px;margin: 1em auto;\">" +
                                                "<div class=\"card-image\" style=\"float: left;max-width: 50%;\">" +
                                                    "<a href=\"/card-details/" + data.card_slug + "\\\" style=\"color: #2c4055;text-decoration: none;transition: color 0.2s;\">" +
                                                        "<img alt=\"" + data.card_name + "\" src=\"/resources/images/credit-cards/" + data.card_image + "\">" +
                                                    "</a>" +
                                                "</div>" +
                                                "<div class=\"card-details\" style=\"float: right;max-width: 50%;\">" +
                                                    "<div class=\"h4\" style=\"box-sizing:border-box;color:rgb(56, 82, 102);display:block;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;margin:0px;text-rendering:optimizeLegibility;text-size-adjust:100%;width:270px;\">Fees and interest</div>" +
                                                    "<dl style=\"color: #7A8593;min-width: 270px;text-align: left;color: #7A8593;margin: 0;padding: 0;\">" +
                                                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Annual fee:</dt> " + 
                                                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">$" + data.annual_fee + "</dd>" +
                                                        (data.annual_fee_info ? "<dd class=\"note\" style=\"box-sizing:border-box;clear:both;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:12px;line-text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.annual_fee_info + "</dd>"  : '') +
                                                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Purchase interest rate:</dt> " + 
                                                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.purchase_interest_rate + "%</dd>"  +
                                                        (data.interest_info  ? "<dd class=\"note\" style=\"box-sizing:border-box;clear:both;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:12px;line-text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.interest_info + "</dd>" : '' ) +
                                                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Cash advance rate:</dt> " + 
                                                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.cash_advance_rate + "%</dd>" +
                                                        (data.cash_advance_info ? "<dd class=\"note\" style=\"box-sizing:border-box;clear:both;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:12px;line-text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.cash_advance_info + "</dd>" : '' ) +
                                                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Balance transfer rate:</dt> " + 
                                                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.balance_transfer_rate + "%</dd>" +
                                                        (data.balance_transfer_info ? "<dd class=\"note\" style=\"box-sizing:border-box;clear:both;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:12px;line-text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.balance_transfer_info + "</dd>" : '' ) +
                                                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Rewards Rate:</dt> " + 
                                                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.rewards_rate + "</dd>" +
                                                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Bonus Offer:</dt> " + 
                                                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.bonus_offer + "</dd>" +
                                                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Card Type:</dt> " + 
                                                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.card_type + "</dd>" +
                                                        "<dt style=\"box-sizing:border-box;clear:left;color:rgb(122, 133, 147);display:block;float:left;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:600;height:30px;line-height:30px;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:83.1875px;\">Credit Needed:</dt> " + 
                                                        "<dd style=\"box-sizing:border-box;color:rgb(122, 133, 147);display:block;font-family:Bitter, sans-serif;font-size:16px;height:30px;line-height:30px;text-align:right;text-rendering:optimizeLegibility;text-size-adjust:100%;width:230px;-webkit-margin-start:40px;\">" + data.credit_needed + "</dd>" +
                                                    "</dl>" +
                                                "</div>" +
                                            "</div>" +
                                            "<div class=\"card-description\" style=\"clear:both;\">" +
                                                "<p style=\"line-height: 1.375em;word-wrap: break-word;font-family: 'Bitter', serif;font-size: 1em; margin: 1em 0; color: #677381; display: block; -webkit-margin-before: 1em;  -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px;\">" + data.card_description + "</p>" +
                                                "<div class=\"buttons\" style=\"box-sizing:border-box;display:block;font-family:'Open Sans', sans-serif;font-size:16px;height:50px;text-align:center;text-rendering:optimizeLegibility;text-size-adjust:100%;width:100%\">" +
                                                "<a class=\"btn secondary\" style=\"font-size: 1em;padding: 0 30px;line-height: 48px;color: #FFF;"+
                                                "background: #fa305f;border: 1px solid #e42e58;display: inline-block;border-radius: 3px;font-weight: 600;" +
                                                "font-family: 'Open Sans', sans-serif;text-align: center;cursor: pointer;\" href=\"/card-details/" + data.card_slug + "\\\">Learn More</a>&nbsp;</div>" +
                                            "</div>"; 
                                        jQuery('.credit-card-widget').html(str);
                                        console.log(parent);
                                        newtemplate = new CKEDITOR.template(parent.html);
                                        newtemplate.output(data);
                                        /* 
                                        var dialog = widget.getDialog();
                                        textinput = dialog.getContentElement('cc_widget_dialog','card_data');
                                        textinput.val(data); */
                                        //htmlId.html=str;
                                        //htmlarea.show();

                            },
                        });
                    },
                },
                {
                    id: "card_layout",
                    type: "html",
                    html: message + str,
                    label: "Card Call-out",
                },
            ]       
        }
    ],
    onLoad: function(){
        console.log(parent);
        console.log(this);
        console.log(this.widget);
         //this.getElement().removeClass('cke_reset_all');
    },
    onOk: function() {
        var dialog = this;
        var htmlarea = dialog.getContentElement( 'cc_widget_dialog', 'card_layout' );
        var div = editor.document.createElement( 'div' );
        div.innerHTML =  htmlarea.html;
        var txt = htmlarea.html;
        this.commitContent( txt );

            editor.insertElement( div );
        //}
    }
};
});