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:

exportdefault{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 componentebuilder: (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/Componentsmodel: defaultModel.extend(),view: defaultType.view.extend()};}};

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

importcmpfrom'./novo-componente.cmp';// componentesletcomponentes=[painel,cmp];