ckeditor editiable widget content - plugins

Question

I created a plugin and widget, the content is generated dynamically in a dialog, when the dialog is closed, the content is inserted into the CKEditor window, but the content itself cannot be edited.
How can I make it that the widget content can be edited from the main CKEditor input after it has been created via the dialog?
Plugin Code
(function() {
CKEDITOR.plugins.add( 'cc_widget', {
icons: "cc_widget_button",
init: function(editor) {
// Styles
editor.addContentsCss( this.path + 'cc-widget.css' + '?' + new Date());
var str_html = "<div class=\"credit-card credit-card-widget\" data-cke-widget-editable=\"true\"> " +
"<div class=\"h3\"><a id=\"card-title-link\" href=\"/card-details/card-name\">CARD NAME</a></div>" +
"<div class=\"card-info\">" +
"<div class=\"card-image\">" +
"<a id=\"card-image-link\" href=\"/card-details/card-name\">" +
"<img id=\"card-image\" alt=\"CARD NAME\" src=\"\">" +
"</a>" +
"</div>" +
"<div class=\"card-details\">" +
"<div class=\"h4\">Fees and interest</div>" +
"<dl id=\"card-attributes\">" +
"<dt>Annual fee:</dt> " +
"<dd id=\"annual-fee\">$ANNUAL FEE</dd>" +
"<dd id=\"annual-fee-note\" class=\"note\">annual fee note</dd>" +
"<dt>Purchase interest rate:</dt> " +
"<dd id=\"int-purch\">INT RATE%</dd>" +
"<dd id=\"int-purch-note\" class=\"note\">intrest rate note</dd>" +
"<dt>Cash advance rate:</dt> " +
"<dd id=\"cash-adv\">CASH ADV RATE%</dd>" +
"<dd id=\"cash-adv-note\" class=\"note\">cash adv note</dd>" +
"<dt>Balance transfer rate:</dt> " +
"<dd id=\"balance-trans\">BALANCE TRANS RATE%</dd>" +
"<dd id=\"balance-trans-note\" class=\"note\">balance trans note</dd>" +
"<dt>Rewards Rate:</dt> " +
"<dd id=\"reward-rate\">REWARDS RATE</dd>" +
"<dt>Bonus Offer:</dt> " +
"<dd id=\"bonus-offer\">BONUS OFFER</dd>" +
"<dt>Card Type:</dt> " +
"<dd id=\"card-type\">CARD TYPE(S)</dd>" +
"<dt>Credit Needed:</dt> " +
"<dd id=\"credit-needed\">CREDIT SCORE</dd>" +
"</dl>" +
"</div>" +
"</div>" +
"<div class=\"card-description\">" +
"<p>Add a card description here</p>" +
"<div class=\"buttons\" style=\"text-align:center;\">" +
"<a class=\"btn secondary\" id=\"learn-more\" href=\"/card-details/card-name\\\">Learn More</a> </div>" +
"</div>" +
"</div>";
// Dialog
CKEDITOR.dialog.add( 'cc_widget', this.path + 'dialog.js' );
// Widget definition
editor.widgets.add("cc_widget",{
dialog : "cc_widget",
init : function(){
var card_title_link = this.element.findOne('#card-title-link');
this.data.card_title_link_url = card_title_link.getAttribute("href");
this.data.card_title_link_text = card_title_link.getHtml();
var card_image_link = this.element.findOne('#card-image-link');
this.data.card_image_link_url = card_image_link.getAttribute("href");
var card_image = this.element.findOne('#card-image');
this.data.card_image_alt = card_image.getAttribute("alt");
this.data.card_image_src = card_image.getAttribute("src");
var annual_fee = this.element.findOne('#annual-fee');
var annual_fee_note = this.element.findOne('#annual-fee-note');
this.data.annual_fee_text = annual_fee.getHtml();
this.data.annual_fee_note_text = annual_fee_note.getHtml();
var purchase_interest_rate = this.element.findOne('#int-purch');
var interest_info = this.element.findOne('#int-purch-note');
this.data.purchase_interest_rate = purchase_interest_rate.getHtml();
this.data.purchase_interest_rate_note = interest_info.getHtml();
var cash_advance_rate = this.element.findOne('#cash-adv');
var cash_advance_info = this.element.findOne('#cash-adv-note');
this.data.cash_advance_rate = cash_advance_rate.getHtml();
this.data.cash_advance_rate_note = cash_advance_info.getHtml();
var balance_transfer_rate = this.element.findOne('#balance-trans');
var balance_transfer_info = this.element.findOne('#balance-trans-note');
this.data.balance_transfer_rate = balance_transfer_rate.getHtml();
this.data.balance_transfer_rate_note = balance_transfer_info.getHtml();
var reward_rate = this.element.findOne('#reward-rate');
this.data.reward_rate = reward_rate.getHtml();
var bonus_offer = this.element.findOne('#bonus-offer');
this.data.bonus_offer = bonus_offer.getHtml();
var card_type = this.element.findOne('#card-type');
this.data.card_type = card_type.getHtml();
var credit_needed = this.element.findOne('#credit-needed');
this.data.credit_needed = credit_needed.getHtml();
var learn_more = this.element.findOne('#learn-more');
this.data.learn_more = learn_more.getAttribute("href");
var card_data = this.element.findOne('#card_data');
this.data.card_data = (card_data ? card_data : '');
},
upcast : function(element) {
return element.hasClass("credit-card-widget");
},
template : str_html ,
editables : {
card_title_link: {
selector: '#card-title-link'
},
card_image_link: {
selector: '#card-image-link'
},
card_image: {
selector: '#card-image'
},
annual_fee: {
selector: '#annual-fee'
},
annual_fee_note: {
selector: '#annual-fee-note'
},
purchase_interest_rate: {
selector: '#int-purch'
},
interest_info: {
selector: '#int-purch-note'
},
cash_advance_rate: {
selector: '#cash-adv'
},
cash_advance_info: {
selector: '#cash-adv-note'
},
balance_transfer_rate: {
selector: '#balance-trans'
},
balance_transfer_info: {
selector: '#balance-trans-note'
},
reward_rate: {
selector: '#reward-rate'
},
bonus_offer: {
selector: '#bonus-offer'
},
card_type: {
selector: '#card-type'
},
credit_needed: {
selector: '#credit-needed'
},
card_description: {
selector: '#card-description'
},
},
data : function() {
console.log(this);
console.log(this.data);
var card_title_link = this.element.findOne('#card-title-link');
card_title_link.setHtml(this.data.card_data.card_name);
card_title_link.setAttribute('href', '/card-details/' + this.data.card_data.card_slug);
var card_image_link = this.element.findOne('#card-image-link');
card_image_link.setAttribute('href', '/card-details/' + this.data.card_data.card_slug);
var card_image = this.element.findOne('#card-image');
card_image.setAttribute('alt', this.data.card_data.card_name);
card_image.setAttribute('src', this.data.card_data.card_image);
var annual_fee = this.element.findOne('#annual-fee');
var annual_fee_note = this.element.findOne('#annual-fee-note');
annual_fee.setHtml('$' + this.data.card_data.annual_fee);
if(this.data.card_data.annual_fee_info){
annual_fee_note.removeAttribute( 'style' );
annual_fee_note.setHtml(this.data.card_data.annual_fee_info);
}else {
annual_fee_note.setAttribute('style', 'display:none;');
annual_fee_note.setHtml('');
}
var purchase_interest_rate = this.element.findOne('#int-purch');
var purchase_interest_rate_note = this.element.findOne('#int-purch-note');
purchase_interest_rate.setHtml(this.data.card_data.purchase_interest_rate);
if(this.data.card_data.annual_fee_info){
purchase_interest_rate_note.removeAttribute( 'style' );
purchase_interest_rate_note.setHtml(this.data.card_data.interest_info);
}else {
purchase_interest_rate_note.setAttribute('style', 'display:none;');
purchase_interest_rate_note.setHtml('');
}
var cash_advance_rate = this.element.findOne('#cash-adv');
var cash_advance_info = this.element.findOne('#cash-adv-note');
cash_advance_rate.setHtml(this.data.card_data.cash_advance_rate + '%');
if(this.data.card_data.annual_fee_info){
cash_advance_info.removeAttribute( 'style' );
cash_advance_info.setHtml(this.data.card_data.cash_advance_info);
}else {
cash_advance_info.setAttribute('style', 'display:none;');
cash_advance_info.setHtml('');
}
var balance_transfer_rate = this.element.findOne('#balance-trans');
var balance_transfer_info = this.element.findOne('#balance-trans-note');
balance_transfer_rate.setHtml(this.data.card_data.balance_transfer_rate + '%');
if(this.data.card_data.annual_fee_info){
balance_transfer_info.removeAttribute( 'style' );
balance_transfer_info.setHtml(this.data.card_data.balance_transfer_info);
}else {
balance_transfer_info.setAttribute('style', 'display:none;');
balance_transfer_info.setHtml('');
}
var reward_rate = this.element.findOne('#reward-rate');
reward_rate.setHtml(this.data.card_data.rewards_rate);
var bonus_offer = this.element.findOne('#bonus-offer');
bonus_offer.setHtml(this.data.card_data.bonus_offer);
var card_type = this.element.findOne('#card-type');
card_type.setHtml(this.data.card_data.card_type);
var credit_needed = this.element.findOne('#credit-needed');
credit_needed.setHtml(this.data.card_data.credit_needed);
var learn_more = this.element.findOne('#learn-more');
learn_more.setAttribute('href', '/card-details/' + this.data.card_data.card_slug);
}
});
// 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'
});
}
});})();
TIA

Answer 1

You should try to set contenteditable="false" attribute to root tag of content which you insert into ckeditor