Issue #529Opened November 15, 2017by krunal0390 reactions

editor.setComponents(html) reset to default traits values on editor

Question

#522 thanks for all help was able to resolve via this.model.attributes. but now I have another issue, where editor.setComponents reset value in editor of html retrived to default traits values.

Application flow

  1. User redirected to grapesjs editor to edit page content, where they can use different components
  2. On save editor.getHtml() saved to database and redirect user to page and new content will be retrived from db and displayed with selected component and values
  3. User can choose to edit same page and redirected to editor page
  4. On load page components retrieved from db and loaded on grapesjs editor for editing, set via editor.setComponents() so user can edit it
Code SnippetTEXT
on step 4 it reset components valus to default traits values.

![capture](https://user-images.githubusercontent.com/11716808/32849678-c5a5c03a-ca27-11e7-9afa-9ad16a84d220.PNG)

`function createPCBoxComp(comps, defaultModel, defaultView) {

    comps.addType('pcBox', {
      // Define the Model
      model: defaultModel.extend({
        // Extend default properties
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          droppable: false,
          type: 'pcBox',
          tagName:'div', 
          void: 0,
          src: '/sites/testUniTest/Images1/Environment/level3/balloons_over_turkey.png',
          hoverText: 'Link to curriculum page',
          title: ' Curriculum Link',
          a_href: 'https://team.global.test/sites/testUni',
          target: '_blank',
          attributes: {
            frameborder: 0,
            'data-gjs-type': 'pcBox',
          },
          traits: [{
              type: 'text',
              label: 'Hover Text',
              name: 'hoverText',
              placeholder: 'eg. Link to curriculum page',
              changeProp: 1,
            },
            {
              type: 'text',
              label: 'Title(at bottom of image)',
              name: 'title',
              placeholder: 'eg. Curriculum Link',
              changeProp: 1,
            }, {
              type: 'text',
              label: 'Link to open',
              name: 'a_href',
              placeholder: 'eg. https://team.global.test/sites/testUni',
              changeProp: 1,
            }, {
              type: 'select',
              label: 'Target',
              name: 'target',
              options: [{
                  value: '_parent',
                  name: 'This Window'
                },
                {
                  value: '_blank',
                  name: 'New Window'
                },
              ],
              changeProp: 1,
            },
            {
              type: 'text',
              label: 'Image Source',
              name: 'src',
              placeholder: 'eg. https://team.global.test/sites/LearningDevLib/test%20portal%20deliverables%20%20approved/2.%20Business%20and%20Role%20Specific/7.test%20technology/Assets_pics_graphics/t3.1_test_engineering/test_tools_training.jpg',
              changeProp: 1,
            },
          ],
        }),
        init(){
        },
        initialize(o) {
          defaultModel.prototype.initialize.apply(this, arguments);
          this.attributes.attributes.className = "gjs-cust-pcBox pcBox";
          this.listenTo(this, 'change:target', this.updateTarget);
          this.listenTo(this, 'change:title', this.updateTitle);
          this.listenTo(this, 'change:hoverText', this.updateHoverText);
          this.listenTo(this, 'change:a_href', this.updateLink);
          this.listenTo(this, 'active', this.openModal);
          this.listenTo(this, 'dblclick active', this.openModal);
          this.listenTo(this, 'change:src', this.updateSrc);

          if (this.config.modal)
            this.modal = this.config.modal;

          if (this.config.am)
            this.am = this.config.am;
        },
        updateAll(){
          this.updateTitle();
          this.updateHoverText();
          this.updateLink();
          this.updateTarget();
          this.updateSrc();
          this.attributes.className = "pcBox";
        },
        updateTitle() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var h2Model = linkModel.get("components").at(1);
            var title = this.get('title');
            if (title)
              h2Model.attributes.content = title;
          }
        },
        updateHoverText() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var imageModel = linkModel.get("components").at(0);
            var hoverTextModel = imageModel.get("components").at(1);
            var hoverText = this.get('hoverText');
            if (hoverText)
              hoverTextModel.attributes.content = hoverText;
          }
        },
        updateLink() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var a_href = this.get('a_href');
            if (a_href)
              linkModel.attributes.attributes.href = a_href;
          }
        },
        updateTarget() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var target = this.get('target');
            if (target)
              linkModel.attributes.attributes.target = target;
          }
        },
        updateSrc() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var imageModel = linkModel.get("components").at(0);
            var imageTagModel = imageModel.get("components").at(0);
            var src = this.get('src');
            if (src)
              imageTagModel.attributes.src = src;
          }
        }
      }, {
        isComponent(el) {
          if ((el.getAttribute &&
              el.getAttribute('data-gjs-type') == 'pcBox') || el.className === 'gjs-cust-pcBox pcBox') {
            return {
              type: 'pcBox'
            };
          }
        }
      }),

      // Define the View
      view: defaultView.extend({

        tagName: 'div',
        events: {
          'dblclick': 'openModal',
          'click': 'openSettings',
        },

        openSettings(e) {

          var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks');
          openBlocksBtn && openBlocksBtn.set('active', 0);

          var openTMBtn = editor.Panels.getButton('views', 'open-tm');
          openTMBtn && openTMBtn.set('active', 1);
        },

        initialize(o) {
          defaultView.prototype.initialize.apply(this, arguments);
          this.listenTo(this.model, 'change:target', this.updateTarget);
          this.listenTo(this.model, 'change:title', this.updateTitle);
          this.listenTo(this.model, 'change:hoverText', this.updateHoverText);
          this.listenTo(this.model, 'change:a_href', this.updateLink);
          this.listenTo(this.model, 'active', this.openModal);
          this.listenTo(this.model, 'dblclick active', this.openModal);
          this.listenTo(this.model, 'change:src', this.updateSrc);

          this.classEmpty = this.ppfx + 'plh-pc-box';
          if (this.config.modal)
            this.modal = this.config.modal;

          if (this.config.am)
            this.am = this.config.am;
        },

       updateTitle() {
          $(this.el).find('h4').html(this.model.get("title"));
        },
        updateHoverText() {
          $(this.el).find('p.img__description').html(this.model.get("hoverText"));
        },
        updateLink() {
          $(this.el).find('a').attr('href', this.model.get("a_href"));
        },
        updateTarget() {
          $(this.el).find('a').attr('target', this.model.get("target"));
        },
        updateSrc() {
          var src = this.model.get("src");
          $(this.el).find("img.img__img").attr('src', src);
          if (!src)
            $(this.el).find("img.img__img").addClass(this.classEmpty);
          else
            $(this.el).find("img.img__img").removeClass(this.classEmpty);
        },

        openModal(e) {
          var em = this.opts.config.em;
          var editor = em ? em.get('Editor') : '';

          if (editor) {
            editor.runCommand('open-assets', {
              target: this.model,
              onSelect() {
                editor.Modal.close();

                editor.AssetManager.setTarget(null);
              }
            });
          }
          this.$el.click();
        },
        disableClick() {
          this.preventDefault();
        },
        render(...args) {
         this.updateClasses();          
          this.updateAttributes();

          var tempTemplate = "<div class=img__wrap><img class=img__img src=" + this.model.get("src") + "><p class=img__description>" + this.model.get("hoverText") + "</div><h4>" + this.model.get("title") + "</h4>";
          var template = "<a href=" + this.model.get("a_href") + " target=" + this.model.get("target") + " onclick='event.preventDefault()'>" + tempTemplate + "</a>"
          this.el.className = "gjs-cust-pcBox pcBox";
          this.el.setAttribute("data-gjs-type", "pcBox");
          this.el.innerHTML = (template);
          this.model.updateAll();
          return this;
        }
      })
    });
  };
`

Answers (2)

artfNovember 16, 20170 reactions

@krunal039 editor.getHtml() it's your FINAL output and obviously, there are no pieces of information about traits and other stuff. Store and use editor.getComponents() then, if you need the user to edit templates again.

lock[bot]September 18, 20190 reactions

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.