Issue #1100💬 AnsweredOpened May 9, 2018by kuldeepcis0 reactions

Unable to update the traits value in the HTML for custom component

快速解答by artf

Please keep track of your issues here, you're talking about the same case #1089

Read full answer below ↓

Question

I have created a custom component for social icons.When selected this component i have two traits in setting facebook URL and show facebook , when i update the both it gets updated and is reflected in canvas but when i export i don't get the URL for facebook which is set via the traits. Below is the code attached.

grapesjs.plugins.add('social-icons-component', (editor, opts = {}) => {

let c = opts;

let defaults = { blocks: 'social-icons',

// Default style
defaultStyle: true,

// Default start time, eg. '2018-01-25 00:00'
startTime: '',

// Default style
defaultStyle: true,

// Default start time, eg. '2018-01-25 00:00'
startTime: '',

// Text to show when the countdown is ended
endText: 'EXPIRED',

// Date input type, eg, 'date', 'datetime-local'
dateInputType: 'date',

// Countdown class prefix
socialClssfx: 'social-icons',

// Countdown label
labelCountdown: 'Countdown',

// Countdown category label
labelCountdownCategory: 'Extra',

// Days label text used in component
labelDays: 'days',

// Hours label text used in component
labelHours: 'hours',

// Minutes label text used in component
labelMinutes: 'minutes',
代码片段TEXT
// Seconds label text used in component
labelSeconds: 'seconds',

    
  };

  

  // Load defaults
  for (let name in defaults) {
    if (!(name in c))
      c[name] = defaults[name];
  }

   // Add components
 //  loadComponents(editor, c);

 //  // Add components
	// loadBlocks(editor, c);

  const domc = editor.DomComponents;
  const defaultType = domc.getType('default');
  const textType = domc.getType('text');
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;
  const textModel = textType.model;
  const textView = textType.view;
  const sfx = c.socialClssfx;


  domc.addType('social-icons', {

    model: defaultModel.extend({
      defaults: Object.assign({}, defaultModel.prototype.defaults, {
        droppable: false,
         traits: [{
            
            label: 'Facebook URL',
            name: "facebook_url",
             changeProp: 1,
             value:"dasdsdasd",

            
        },
        {
            type: "checkbox",
            label: 'Facebook',
            name: "facebook_show",
            changeProp: 1,
            value: 1,
           
        },
        


        ],
        script: function() {

          
          

        }
      }),
    }, {
      isComponent(el) {

        if(el.getAttribute &&
          el.getAttribute('data-gjs-type') == 'social-icons') {
          return {
            type: 'social-icons'
          };
        }
      },
    }),


    view: defaultView.extend({
      init: function() {

      	
        this.listenTo(this.model, 'change:facebook_url change:facebook_show', this.updateSrc);




        const comps = this.model.get('components');
	
       
        // Add a basic countdown template if it's not yet initialized
        if (!comps.length) {
          comps.reset();
          comps.add(`
            <div data-js="social-icons" >
              <div data-js="social-facebook-div" class="${sfx}-block">
                <a data-js="social-facebook" href="" target="_blank" style="border: none;text-decoration: none;" class="facebook">
                    <img src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/facebook.png" border="0"><!---->
                </a>
              </div>
              <div class="${sfx}-block">
                <a data-js="social-twitter" href="" target="_blank" style="border: none;text-decoration: none;" class="twitter">
                    <img  src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/twitter.png" border="0"><!---->
                </a>
              </div>
              <div class="${sfx}-block">
                <a data-js="social-linkedin" href="" target="_blank" style="border: none;text-decoration: none;" class="linkedin">
                    <img  src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/linkedin.png" border="0"><!---->
                </a>
              </div>
               <div class="${sfx}-block">
                <a data-js="social-youtube" href="" target="_blank" style="border: none;text-decoration: none;" class="youtube">
                    <img  src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/youtube.png" border="0"><!---->
                </a>
              </div>
            </div>
          `);
        }

      },
       updateSrc: function updateSrc() {
         
         //  var facebookUrl = this.model.querySelector('[data-js=social-facebook]');
         // // var facebookDiv = this.model.querySelector('[data-js=social-facebook-div]');
        
         var facebookUrl = this.el.querySelector('[data-js=social-facebook]');
         var facebookDiv = this.el.querySelector('[data-js=social-facebook-div]');


          console.log(this);
          var facebook_url = this.model.get('facebook_url');
          var facebook_check = this.model.get('facebook_show');
          
            if(facebook_check){
              facebookDiv.style.display = '';
             facebookUrl.href = facebook_url;
            }else{
              facebookDiv.style.display = 'none';
             facebookUrl.href = facebook_url;
            }
        },
    }),



});
  const style = c.defaultStyle ? `<style>
    .${sfx} {
      text-align: center;
      font-family: Helvetica, serif;
    }
    .${sfx}-block {
      display: inline-block;
      margin: 0 10px;
      padding: 10px;
    }
    .${sfx}-digit {
      font-size: 5rem;
    }
    .${sfx}-endtext {
      font-size: 5rem;
    }
    .${sfx}-cont,
    .${sfx}-block {
      display: inline-block;
    }
  </style>` : '';

      var bm = editor.BlockManager;
      bm.add('social-icons', {
      label: 'Test Quote',
      category: 'Extra',
     
      content: {
          content:  `
          
          ${style}
          `,
          editable: !1,
          droppable: !0,
          'type':'social-icons',
          style: {
              "width" : "100%",
              "text-align": "center",
              
          }
        },
      attributes: {class:'fa fa-quote-right'}
      });

 
});

Answers (2)

artfMay 10, 2018

Please keep track of your issues here, you're talking about the same case #1089

lock[bot]September 17, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.