GrapesJS Textable Component

by artur_arseniev

HTML

<script src="https://unpkg.com/grapesjs"></script>
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
<div id="gjs">
  <div style="padding: 25px">Hello World!!!</div>
</div>

CSS

body, html {
  margin: 0;
  height: 100%;
}

Babel + JSX

const textablePlugin = (editor) => {

	// Define a component with `textable` property
  const textableType = 'textable-cmp';
  editor.Components.addType(textableType, {
    model: {
      defaults: {
        tagName: 'span',
        textable: true,
        content: "textable text"
      },
    },
  });
  editor.Blocks.add(textableType, {
    label: 'Textable component',
    content: { type: textableType },
    select: true,
  });
  
  // Define component that extends text component
  const extendedTextType = 'extended-cmp' 
  editor.Components.addType(extendedTextType, {
  	extend: "text",
    model: {
      defaults: {
        tagName: 'p',
        style: {padding: "25px"},
        droppable: true,
        content: "Hello extended text component World!!"
      },
    },
  });
  editor.Blocks.add(extendedTextType, {
    label: 'Extended Text component',
    content: { type: extendedTextType },
    select: true,
  });
}



const editor = grapesjs.init({
	container: '#gjs',
  fromElement: 1,
  height: '100%',
  storageManager: { type: 0 },
  plugins: ['gjs-blocks-basic', textablePlugin]
});