angular-editor

angular-editor

Editor de aplicações angulares no browser

O propósito deste projeto é usar o grapesjs como editor de componentes de forma a permitir a rápida geração de interfaces em angular.

Como usar

Para fazer uso do projeto basta importar o projeto com o comando:

yarn add angular-editor -D

para executar o projeto adicione ao package.json do seu projeto um script como o exemplo:

{
  ...
  "scripts": {
    "ae": "angular-editor"
  }
  ...
}

depois basta executar:

yarn run ae

O servidor do angular editor será iniciado na porta 8000, você pode mudar a porta default passando o parametro -p <outra_porta>, ex:

{
  ...
  "scripts": {
    "ae": "angular-editor -p 8787"
  }
  ...
}

O servidor será iniciado na porta 8787.

Contribuindo para o projeto

Para o desenvolvimento basta executar o comando:

yarn start

A pasta src/components contém os componentes do grapesjs, um exemplo de um esqueleto básico de um componente:

export default {
  name: 'nome-do-seu-componente',
  blockManager: {
    label: 'label-do-componente-na-paleta',
    content: `conteudo do componente em html`,
    category: 'categoria-do-componente',
    attributes: {
      title: 'titulo do componente',
      class: 'fa fa-youtube-play', // classe css para exibir um icone
    }
  },
  
  // função que constroe o componente
  builder: (defaultType, defaultModel, defaultView) => {
    
    return {
      // aqui fica as configurações do modelo e view para os componentes
      // as configurações aqui são as configurações disponíveis do grapejs
      // para ver exemplos de configurações consulte a documentação do grapejs
      // em: https://github.com/artf/grapesjs/wiki/Components
      model: defaultModel.extend(),
      view: defaultType.view.extend()
    };
  }
};

Uma vez criado o componente precisa ser registrado no arquivo src/componentes/index.js:

import cmp from './novo-componente.cmp';

// componentes
let componentes = [painel,cmp];