demo.js

require(["config/require-config"], function() {
	require(["grapesjs/main"],function (grapesjs) {
		window.editor = grapesjs.init({
			noticeOnUnload: 0,
			container	  : "#gjs",
			height        : "100%",
			fromElement   : true,
			autorender    : 0,
			blockManager  : {
				blocks: [
					{
						id        : "text",
						label     : "Text",
						attributes: {
							class: "fa fa-font"
						},
						content   : {
							type          : "text",
							content       : "Insert your text here",
							style         : {
								padding: "10px"
							},
							activeOnRender: 1
						}
					},
					{
						id        : "test-type",
						label     : "Test",
						attributes: {
							class: "gjs-fonts gjs-f-image"
						},
						content   : {
							type          : "test-type",
							activeOnRender: 1,
							style         : {
								color: "black"
							}
						}
					}
				]
			},
			storageManager:{
				autoload: 0,
				storeComponents: 1,
				storeStyles: 1,
			},
		});
		
		var comps        = editor.DomComponents;
		var defaultType  = comps.getType("default");
		var defaultModel = defaultType.model;
		var defaultView  = defaultType.view;
		comps.addType("test-type", {
			model: defaultModel.extend(
				{
					defaults: Object.assign({}, defaultModel.prototype.defaults, {
						type      : "test-type",
						droppable : false,
						resizable : true,
						testmarker: "test",
						testvalue : "1"
					}),

					initialize: function(o, opt) {
						this.opts = opt || {};
						this.config = opt.config || {};
						defaultType.model.prototype.initialize.apply(this, arguments);
						var attr = this.get("attributes");
						if(attr.testmarker)
							this.set("testmarker", attr.testmarker);
					},

					getAttrToHTML: function() {
						var attr = defaultType.model.prototype.getAttrToHTML.apply(this, arguments);
						delete attr.onmousedown;
						var testmarker = this.get("testmarker");
						if(testmarker)
							attr.testmarker = testmarker;
						return attr;
					}
				},{
				isComponent: function(el) {
					var result = "";
					if(el.tagName == "DIV" && el.getAttribute("testmarker") === "test") {
						result = {type: "test-type"};
					}
					return result;
				}
			}),
			view: defaultType.view.extend({
				tagName: "div",
				events: {
					"dblclick": "openModal",
					"click"   : "initResize"
				},
				initialize: function(o) {
					defaultType.view.prototype.initialize.apply(this, arguments);
					this.listenTo(this.model, "change:testmarker", this.updateMarker);
					this.listenTo(this.model, "dblclick active", this.openModal);
				},
				
				updateMarker: function() {
					var testmarker = this.model.get("testmarker");
					this.$el.attr("testmarker", testmarker);
				},

				openModal: function(e) {
					var testvalue = parseInt(prompt("Please enter the test value"));
					var attr = this.model.get("attributes");
					if(testvalue > 0) {
						attr.testvalue = testvalue;
					} else if(!attr.testvalue > 0) {
						attr.testvalue = 1;
					}
					this.render();
				},

				render: function() {
					defaultType.view.prototype.render.apply(this, arguments);
					var sm = this.config.em.get("StyleManager");
					var style = sm.getModelToStyle(this.model).get("style");
					if(!style.width) {
						sm.getModelToStyle(this.model).set("style", {
							"width"           : "320px",
							"height"          : "180px",
							"background-color": "black",
							"color"           : "white"
						});
					}
					
					this.$el.empty();
					
					var value = document.createElement("div");
					value.style.textAlign = "center";
					value.innerHTML = "Test: " + this.model.get("attributes").testvalue;
					this.el.appendChild(value);
					
					this.$el.attr("onmousedown", "return false");
					return this;
				},
			})
		});
		
		editor.render();
	});
});