https://github.com/mycloudlab/angular-editor-grapejs
editor de aplicações angulares no browser
https://github.com/mycloudlab/angular-editor-grapejs
Last synced: 8 months ago
JSON representation
editor de aplicações angulares no browser
- Host: GitHub
- URL: https://github.com/mycloudlab/angular-editor-grapejs
- Owner: mycloudlab
- License: apache-2.0
- Created: 2018-05-19T16:34:38.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-15T21:43:20.000Z (about 8 years ago)
- Last Synced: 2025-04-09T14:21:41.760Z (about 1 year ago)
- Language: TypeScript
- Size: 873 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
yarn add angular-editor -D
```
para executar o projeto adicione ao package.json do seu projeto um script como o exemplo:
```json
{
...
"scripts": {
"ae": "angular-editor"
}
...
}
```
depois basta executar:
```bash
yarn run ae
```
O servidor do angular editor será iniciado na porta 8000, você pode mudar a porta default passando o parametro -p , ex:
```json
{
...
"scripts": {
"ae": "angular-editor -p 8787"
}
...
}
```
O servidor será iniciado na porta 8787.
## Contribuindo para o projeto
Para o desenvolvimento basta executar o comando:
```bash
yarn start
```
A pasta src/components contém os componentes do grapesjs, um exemplo de um esqueleto básico de um componente:
```javascript
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:
```javascript
import cmp from './novo-componente.cmp';
// componentes
let componentes = [painel,cmp];
```