ckeditor editiable widget content

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>&nbsp;</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

您应该尝试将contenteditable="false"属性设置为插入ckeditor的内容的根标记