Want to replace wrapper div

Hello artf,

I want to replace wrapper div, for example : When we create the newsletter template, wrapper div already exists there. On import template if wrapper div exists in import html then need to replace already exists wrapper with new one.

Is that possible? following is my code

var blockManager = editor.BlockManager;
var type = 'template';
bm.add(type, {
   label: 'Test',
   category: 'My Templates',
   content: {
    type: type,
    content:  '<div id="wrapper" style="box-sizing: border-box; background-image: url(http://www.test.net/source/MzE=/badlands-dawn-20180314012931.jpg); background-repeat: repeat; background-position: left top; background-size: cover; background-attachment: fixed;"><div class="div-box c5389 c6138" style="box-sizing: border-box; margin: 0 auto; max-width: 600px; padding: 5px 5px 5px 5px; width: 100%;"><div id="id29o6" style="box-sizing: border-box;"><div id="isee9e" style="box-sizing: border-box; padding: 0; margin: 0; vertical-align: top; display: inline-block; width: 100%;">
</div></div><h1 class="heading" id="iti4ul" style="box-sizing: border-box;">Insert title here</h1><p class="paragraph" id="ik4ktj" style="box-sizing: border-box;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p><h1 class="heading" id="irpqvn" style="box-sizing: border-box;">Insert title here</h1><p class="paragraph" id="ii5irl" style="box-sizing: border-box;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p><a class="c5561" id="iqlfky" style="box-sizing: border-box; font-size: 20px; padding: 10px 25px; background-color: #673AB7; color: #fff; text-align: center; border-radius: 4px; font-weight: 300; display: inline-block; margin: 10px;">Link Button Text</a></div></div>'
   }
  });

var dc = editor.DomComponents;
var defaultType = dc.getType('default');
var defaultModel = defaultType.model;

editor.DomComponents.addType(type, {   
   view: defaultType.view.extend({
    render: function () {
     defaultType.view.prototype.render.apply(this, arguments);    
     // Here you apply all your custom logic
     var content = this.model.attributes.content;
     var wrapperStyle = '';
     if (content) {
      var c = $(content),
              wrapperId = c.attr('id');
      if (wrapperId == 'wrapper') {
       wrapperStyle = c.attr('style');
       content = c[0].innerHTML;
      }
     }
     var ws = wrapperStyle.split(';');
     if (ws) {
      var wc = editor.DomComponents.getWrapper();
      var wstyles = {};
      for (var i = 0; i < ws.length; i++) {
       var st = ws[i].split(': ');
       st[0] = st[0].trim();
       if (st[0] != 'undefined' && st[0] != '') {
        wstyles[st[0]] = st[1];
       }
      }
      wc.set({
       style: wstyles
      });
     }     
     this.model.attributes.content = content;     
     return this;
    },
   }),
  });

After drag and drop, it not editable @artf