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:
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:
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:
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 { 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 view: defaultTypeview ; };
Uma vez criado o componente precisa ser registrado no arquivo src/componentes/index.js:
; // componenteslet componentes = painelcmp;