Eventos de TI no Nordeste

Nothing there!

Últimos Tweets

Monitorando logs em tempo real com Log.io

28/06/2016

Fala, galera. Hoje vou mostrar como podemos monitorar os logs em tempo real, seja de nosso produto, servidor, site, enfim. Qualquer ferramenta que gere log em arquivo de texto.

Log.io

Log.io é uma plataforma que permite o monitoramento das atividades de log através do navegador, utilizando as tecnologias do node.js e socket.io. Basicamente trabalha com três componentes: harvesters, server e client web. O harvester é responsável por verificar as mudanças no log que devem ser monitoradas. Quando uma mudança é realizada, uma mensagem é enviada para o servidor. Uma vez chegada no servidor, a mensagem é distribuída para todos os clientes web. As mensagens que transitadas não são persistida em nenhum lugar. Log.io não é uma camada de persistência, ok? Então nada de apagar o arquivo físico do log (a não ser que você saiba exatamente o que está fazendo :] )

Instalação

Como dito anteriormente, o log.io trabalha com o node.js. Para isso, você precisa ter instalado em seu servidor (veja aqui como instalar o node). A instalação é feita via npm. Para isso, instale:

1
$ sudo npm install -g log.io --user "root"

Apesar da documentação oficial sugerir o user “ubuntu”, precisei alterar o user para root. Isso porque o usuário “ubuntu” não tinha permissão para ler o arquivo de log de meu sistema.

Pronto. Agora só precisa configurar e executar o processo em background.

Configuração

Antes de startar o log.io-server, precisamos configurar o harvester, para indicar quais os logs que serão monitorados. Utilize o editor de sua preferência (aqui utilizei o nano).

1
$ nano ~/.log.io/harvester.conf

Nele, indicaremos quais os arquivos que serão monitorados e para qual servidor será enviado as mensagens. No meu exemplo, estarei monitorando as mensagens de erro e acesso do servidor nginx.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
exports.config = { 
    nodeName: "webServer", 
    logStreams: { 
      access: [ 
        "/var/log/nginx/access.log"
      ],
      error: [
        "/var/log/nginx/error.log"
      ] 
    }, 
    server: { 
      host: '127.0.0.1', 
      port: 28777 
    } 
}

Na configuração acima, defini o nome do node e categorizei os canais dos arquivos monitorados em “error” e “access”. No cliente web, você pode agrupar a exibição por nodes ou streams. Logo em seguida, configurei para qual servidor seria enviado as mensagens. Nesse caso, mantive o ip local, já que o log.io está no mesmo servidor da aplicação. Mas você pode também configurar o monitoramento de logs em outros servidores e enviar para o “servidor central” de monitoramento.

Pronto! Agora você pode startar o log.io-server e log.io-harvester:

1
2
$ log.io-server &
$ log.io-harvester &

Obs: o & no final do comando permite que os processos sejam executados em background.

Voilà! Agora acesse: http://localhost:28778 para visualizar o painel de monitoramento.

Segurança

Precisamos evitar que o monitor de log fique disponível para qualquer pessoa. Assim, configure o arquivo web_server.conf para definir autenticação básica HTTP:

$ nano ~/.log.io/web_server.conf

Localize o atritbuto “auth” e remova o comentário (apague as linhas onde tem /* e */ que envolve o parâmetro). Defina um login e senha.

Outras configurações também são possíveis, como a restrição baseada pelo IP. Em meu caso, manterei apenas as credenciais de autenticação.

Monitorando logs de outros servidores

Como dito anteriormente, posso ter harvester remoto. Em meu exemplo, considere um servidor externo de banco de dados e preciso monitorar o log do mysql no mesmo painel. Para isso, precisaremos repetir no outro servidor, o processo de instalação e configuração do Log.io. A diferença está no parâmetro server do arquivo harvester.conf. Ao lugar do ip local, indicaremos o ip do servidor onde está o log.io-server:

1
2
3
4
    server: { 
      host: '123.123.123.123', 
      port: 28777 
    }

Outro detalhe é que não precisaremos startar o processo log.io-server no servidor do banco, já que as mensagens serão enviadas para nosso servidor central. Apenas o processo abaixo deve ser iniciado:

1
$ log.io-harvester &

Pronto. Temos agora dois observadores de log, em servidores distintos, enviando as mensagens para um único log.io-server que é responsável por encaminhar para o painel final.

Qualquer dúvida, deixa um comentário aí embaixo. Um abraço e até a próxima.

Instalando o ArangoDB com Docker

02/04/2016

Fala, galera! Voltei com mais um post rápido para mostrar como instalar o ArangoDB com o Docker. Se você ainda não sabe o que é docker, corra! Leia isso e isso.

Logo Docker

Basicamente o docker permite empacotarmos uma série de programa e aplicações de forma independente do sistema operacional. Cada empacotamento, que são chamados de container, possui os recursos que você deseja. Por exemplo: posso ter um container com php, nginx e arangodb, como também posso ter três containers, um com php, outro com nginx e outro com o arangodb, todos eles se comunicando entre si.

Bom, em nosso caso, vamos subir apenas um container com o ArangoDB, pois estou utilizando o servidor embutido do php para rodar minha aplicação.

Instale o docker

Existe inúmeros tutoriais de como instalar o docker em seu ambiente. Veja a documentação aqui, de acordo com seu SO. Nos casos de osx e windows, é necessário instalar o virtualbox, pois o docker criará uma máquina virtual para rodar o docker. Já foi anunciado que em breve tudo será mais simplificado nestes dois ambientes, sem necessidade do virtualbox (veja no blog do docker).

Criando o container

Após instalado, executei o seguinte comando para criar e rodar meu container (explicarei logo a seguir):

1
docker run --name arangodb-instance -e ARANGO_NO_AUTH=1 -p 8529:8529 -d arangodb/arangodb
--name

define um nome do container, para facilitar no gerenciamento de nossos containers

-e

define variável de ambiente que será utilizado para configuração do arangodb. Neste caso, escolhi o modelo de autenticação sem senha, pois estou utilizando o container apenas em ambiente de desenvolvimento.

-p

mapeia a porta do container

-d

roda o container em background

arangodb/arangodb

é a imagem da última versão do banco no hub do docker.

Pronto! Para acessar seu banco no linux, basta digitar http://localhost:8529. Se você estiver usando macos ou windows, acesse através do ip da vm que foi criada.

Veja também o repositório do arangodb no Hub Docker.

Instalando e configurando ArangoDB

03/02/2016

Fala, galera. Dando prosseguimento a série de artigos sobre o arangoDB, hoje falarei sobre o processo de instalação e configuração. Segue aí!

Atualmente o arangodb está na versão estável 2.8. Apesar de eu trabalhar com macBook, nesse artigo utilizarei um ambiente com servidor ubuntu 12.04. Há algum tempo utilizo o vagrant para gerenciar máquinas virtuais com as mesmas configurações dos servidores em produção. Se você ainda não conhece, nem usa o vagrant, encorajo fortemente (ou o docker. Falaremos mais sobre isso em outra oportunidade).

Na página de download do arangodb há uma lista de ambientes suportados. Nele encontramos pacotes para diversas distros, executável do windows, macOs e instruções para pacote de instalação pronta para o amazon aws e windows azure.

Em meu caso, instalei através do gerenciador de pacotes do ubuntu. O primeiro passo é adicionar a chave do pacote no apt:

1
2
wget https://www.arangodb.com/repositories/arangodb2/xUbuntu_12.04/Release.key
apt-key add - < Release.key

Agora vamos adicionar o endereço do repositório:

1
echo 'deb https://www.arangodb.com/repositories/arangodb2/xUbuntu_12.04/ /' | sudo tee /etc/apt/sources.list.d/arangodb.list

Instale uma dependência:

1
sudo apt-get install apt-transport-https

Atualize e instale:

1
2
sudo apt-get update 
sudo apt-get install arangodb=2.8.1

Você pode especificar a versão que deseja instalar. Do contrário, ele instalará a última versão estável.

Pronto! O banco está devidamente instalado na porta 8529. Agora iremos realizar algumas configurações básicas.

Configurações básicas

Por padrão, o arangodb vem configurado para acesso apenas local. Assim, precisaremos editar o endpoint no arquivo de configuração para que possamos acessar a interface administrativa ou o banco remotamente. Utilize algum editor (estou usando o nano):

1
sudo nano /etc/arangodb/arangod.conf

Localize o atributo endpoint e altere para:

1
endpoint = tcp://0.0.0.0:8529

Reinicie o banco (sudo service arangodb restart) e acesse http://localhost:8529

Arangodb Web Interface

ArangoDB Web Interface

Dica: Lembre de verificar se há algum firewall ativo e então liberar a porta.

Perceba que ao acessar a interface não foi exigido nenhuma senha. Entretanto, podemos configurar para que o seja necessário autenticação. Edite novamente o arquivo arangod.conf e atualize o atributo abaixo:

1
disable-authentication = no

Reinicie novamente. Agora ao acessar a web interface será solicitado autenticação:

Agora entre com username root e senha vazia. Após logado, você pode acessar a página User Profile e trocar a senha.

Enjoy! Bem simples tanto a instalação, como a configuração. No próximo artigo falarei sobre os drivers e mostrarei alguns exemplos com php.

Mais: Installing ArangoDB (inglês)

Introdução ao ArangoDB

01/02/2016

Hoje iniciarei uma série de postagens para falar sobre um novo banco de dados: ArangoDB. A documentação no site oficial é bastante completa, porém, por se tratar de um banco relativamente novo, há pouco material em português. Pretendo, com essa série, esclarecer um pouco mais sobre ele em nossa língua nativa. Vamos nessa!

arangoDB

ArangoDB é um banco de dados open source e multi modelo, o que torna bastante flexível o seu uso. Multi modelo porque suporta os modelos de documento, grafo e chave-valor. A grosso modo, é como você tivesse o mongodb, neo4j e redis em um único banco. Fantástico, não é?

O banco possui alguns recursos interessantes:

  •  Possui as propriedades ACID (Atomicidade, Consistência, Isolamento e Durabilidade). Tais propriedades dá uma segurança quanto às informações guardadas no banco;
  • Possui uma query linguagem semelhante ao SQL, chamada AQL;
  • Diferente de outros bancos baseado em documento, o arangoDB suporta JOIN entre suas coleções;
  • Schema-free;
  • Possui um framework interno, chamado Foxx, que permite você implementar micro serviços com javascript mais complexos para sua aplicação;
  • Suporte a replication e sharding. Você pode criar servidores master-slave;
  • Suporte a várias linguagens através de drivers ou api do banco;
  • É multi-threaded;

E muitos outros recursos, que mostrarei ao longo das postagens. No próximo artigo falarei sobre sua instalação e configuração.

Até a próxima!

Mais: First steps in ArangoDB (inglês)

Configurando mongodb com php no Mac OS Maverick

03/12/2013

No post anterior, expliquei o processo de instalação do mongodb no mac. Caso ainda não tenha instalado, veja aqui.

Vou mostrar como instalar e configurar o drive do php para conectar ao mongo. O ambiente seguido nesse tutorial:

Mac OSX 10.9
Mac Port 2.2.1
Php 5.4.22

Utilizando o mac ports

Utilizar o mac ports tem sido prioridade nas configurações do meu ambiente, pois facilita muito o processo de instalação, além de ser semelhante ao apt-get do ubuntu.

Para instalar o módulo do mongo para o php, basta instalar o php-mongo (indicando a versão na nomenclatura do pacote):

1
$ sudo port install php54-mongo

Caso esteja executando outra versão do php, altere a versão do comando (ex: para Php v5.5, altere para php55-mongo). Reinicie o apache.

Utilizando o PEAR

Uma outra maneira é utilizando PEAR (repositório de componentes) e PECL (repositório de extensões do PHP). Neste tutorial, realizei a instalação do PEAR utilizando o mac ports. Mas você pode seguir também a documentação oficial aqui

1
$ sudo port install pear-install-phar pear-PEAR

Após instalado, abra seu editor preferido, adicione a seguinte linha no arquivo ~/.bash_profile e reinicie o terminal.

1
export PATH=/opt/local/lib/php/pear/bin:$PATH

Confira a versão do PEAR instalado:

1
2
$ pear version
PEAR Version: 1.9.4

Instale a extensão PHP para mongo, utilizando o PECL

1
$ sudo pecl install mongo

Localize o php.ini e abra em seu editor favorito:

1
2
3
4
5
$ php --ini
Configuration File (php.ini) Path: /opt/local/etc/php54
Loaded Configuration File:         /opt/local/etc/php54/php.ini
 
$ sudo nano /opt/local/etc/php54/php.ini

Adicione a chamada para extensão do mongo:

1
extension=mongo.so

Agora reinicie o apache. Caso tenha instalado o apache utilizando também o mac ports, execute:

1
$ sudo /opt/local/apache2/bin/apachectl -k restart

Testes

Crie um arquivo com a função phpinfo. Nele, deve constar as informações do mongo (vide imagem abaixo)

Phpinfo - mongo

Agora crie um arquivo de teste, para testar a conexão do banco:

1
2
3
$db = new Mongo;
echo "<pre>";
var_dump($db);

A saida deve ser um objeto do Mongo.
Enjoy! 🙂

@vinaocruz

Instalando mongodb no Mac OS X Mavericks

01/12/2013

Este tutorial apresenta como instalar o mongodb em sua máquina com mac mavericks. É necessário ter o mac ports instalado em sua máquina (veja como instalar). O tutorial foi executado no ambiente:

Mac OSX 10.9
Mac Port 2.2.1

MongoDB

Primeiro, instale o mongodb com o comando abaixo. O mac ports irá trazer também todas as dependências para a instalação do mongo.

1
$ sudo port install mongodb

Por padrão, os dados da base é criado na pasta /data/db, que normalmente não existe. Assim, devemos cria-la e definir o proprietário da pasta

1
2
3
4
$ sudo mkdir -p /data/db
$ whoami
vinicius
$ sudo chown vinicius /data/db

O mac ports automaticamente adiciona a variável de ambiente $PATH em seu arquivo .bash_profile. Para verificar a versão instalada do mongo, execute

1
2
$ mongo --version
MongoDB shell version: 2.4.8

Agora, para fazer com quê o mongo seja iniciado juntamente com o sistema operacional, execute:

1
$ sudo port load mongodb

Por fim, você pode baixar o MongoHub, que é uma ferramenta gráfica para visualizar seu banco de dados. Ao iniciar uma nova conexão no MongoHub, não é necessário informar nenhum dado para autenticação, pois ele assume os valores padrões da instalação.

MongoHub

Veja essa lista com diversos outros clientes para gestão do mongodb.

@vinaocruz

 

Upload de arquivo com Yii framework

14/08/2013

Programo com Yii framework há mais de um ano, e considero um ótimo framework. Porém, algumas pessoas realmente não gostam da forma como o framework é documentado, em forma de api. De fato, alguns recursos não são bem exemplificado.

Em vista disto, resolvi escrever uma série de posts sobre recursos do framework que são bastantes utilizados. Neste post, mostrarei como realizar upload de arquivo utilizando o compoente CUploadedFile.

Primeiro, vamos considerar um modelo de Photo, como exemplo do recurso, contendo os atributos image e legend. No controller criaremos uma instância da classe CUploadedFile, informando como parâmetro o modelo de Photo e o nome do campo de seleção do arquivo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class PhotoController extends CController{
    public function actionCreate(){
        $model = new Photo;
        if(isset($_POST['Photo'])){
            $model->attributes = $_POST['Photo'];
            $model->image = CUploadedFile::getInstance($model,'image');
            $saveAs = Yii::getPathOfAlias('photoPath').'/'.$model->image->name;
            if($model->save()){
                $model->image->saveAs($saveAs);
            }
        }
        $this->render('create', array('model' => $model));
    }
}

Na linha 9, chamamos o método saveAs() que indica o local onde o arquivo será salvo. Nele, definimos o local através do setPathOfAlias que deve ser definido no config/main.php

Devemos observar que esta função irá sobrescrever o arquivo, caso seja enviado dois com mesmo nome. Para evitar isso, você pode renomear o arquivo original para um único, utilizando uma hash ou concatenando com um timestamp, por exemplo.

Caso queira preservar o nome original enviado pelo usuário, você pode utilizar a função file_exists e tratar o nome do arquivo somente se já existir um com mesmo nome em seu servidor.

View

Na view, precisamos definir duas coisas: o atributo enctype na tag <form> e o campo tipo files no formulário. Assim, teremos:

1
2
3
4
5
6
7
8
9
10
11
12
<?php  
$form = $this->beginWidget('CActiveForm', array(
	'id'=>'photo-form',
        'htmlOptions' => array('enctype' => 'multipart/form-data'),
)); 
 
echo $form->labelEx($model,'image');
echo $form->fileField($model,'image');
echo $form->error($model,'image');
 
$this->endWidget();
?>

Model

Em nosso exemplo, devemos validar para que somente arquivos de imagem sejam enviados para o servidor. No caso, definimos a regra em nosso modelo.

1
2
3
4
5
public function rules(){
    return array(
        array('image', 'file', 'types'=>'jpg, gif, png', 'maxSize'=>1024 * 1024 * 50),
    );
}

Outras validações podem ser adicionadas, baseada no CFileValidator.

É isso, galera. Espero que tenha ajudado. Qualquer dúvida deixe um comentário no post ou através do twitter @vinaocruz.

Abraço

Gerenciando dependências no PHP com Composer

23/03/2013

Gerenciamento de dependências

O cenário é bem comum: desenvolve-se um projeto em equipe, onde várias bibliotecas de terceiros são utilizadas. Além do controle de quais bibliotecas foram incorporadas no projeto, é necessário gerenciar as versões de cada uma. Complicado? Não com o Composer.

A proposta do Composer é justamente facilitar o gerenciamento de dependências para o PHP. Outras linguagens de programação, como o ruby, já utiliza essa abordagem com o Bundler. Neste artigo, mostrarei como instalar o composer, e exemplificar brevemente como utilizar as bibliotecas gerenciadas.

Instalando o composer

É necessário ter a versão mínima do PHP 5.3.2. O processo de instalação consiste basicamente em baixar o arquivo binário e executa-lo. Para isso, basta executar o comando abaixo em seu diretório do projeto.

1
$ curl -sS https://getcomposer.org/installer | php

Em sua pasta do projeto, é criado um arquivo composer.phar que será responsável por executar a instalação das dependências. Opcionalmente, você pode ter o composer disponível globalmente no sistema. Dessa forma, você não precisa instala-lo em cada projeto a ser desenvolvido. Para isso, mova o composer.phar para  pasta bin (estou levando em consideração apenas sistemas unix).

1
$ sudo mv composer.phar /usr/local/bin/composer

Pronto. Para certificar de que está tudo ok, digite em seu terminal:

1
$ composer

Se você utiliza plataforma windows, veja aqui como instalar.

Usando o Composer

Primeiramente você deve criar um arquivo composer.json, onde será definido as dependências de seu projeto. Se você não conhece nada sobre json, conheça mais sobre. Abaixo, um exemplo de um arquivo, onde instalaremos a biblioteca PHPThumb.

{
    "require": {
        "dannytrue/phpthumb": "dev-master"
    }
}

Observe que é definido o nome do pacote e a versão que deve ser instalada.  Uma vez definida as bibliotecas dependentes, é só chamar o maestro. No terminal, digite:

1
$ composer install

Uma pasta vendor/ é criada em seu projeto contendo as bibliotecas que você definiu, juntamente com dois arquivos: composer.lock e autoload.php. No composer.lock está especificado todas as versões instaladas para garantir versões específicas . Já o autoload.php é uma maneira de carregar facilmente as bibliotecas instaladas.

Usando o PHPThumb

Continuando com nosso exemplo, teremos agora uma vendor com a biblioteca PHPThumb e um arquivo autoload.php, que facilita o carregamento das classes. Depois de carregado, basta seguir a documentação da biblioteca de como utiliza-la. Em nosso exemplo:

5
6
7
8
9
require 'vendor/autoload.php';
 
$phpthumb = new PHPThumb\GD('composer.png');
$phpthumb->resize(100, 100);
$phpthumb->show();

Faça o download do código e execute o “composer install”.

Repositório de bibliotecas

Para finalizar, não poderia deixar de existir o Packagist, o repositório central de bibliotecas. São encontradas mais de 8.880 pacotes registrados. Além disso, você também pode submeter seu projeto open source e disponibilizar para a comunidade. Vale a pena dar navegada!

Até a próxima.

Utilizando SkyDrive para hospedar seus repositórios

24/04/2012

Hoje o Google lançou o tão esperado serviço de armazenamento de arquivo, o Google Drive. Pode-se consider tardia a entrada do Google nesse mercado, uma vez que serviços como Dropbox e SkyDrive, da microsoft oferecem espaço há um certo tempo gratuitamente.

Baseado na experiência de usar o Dropbox para armazenar repositórios Git, como reportado neste post, adotei o serviço do SkyDrive para backup nas nuvens de alguns de meus dados, entre eles, projetos pessoais de desenvolvimento com php. Usando o Git local, manterei os dados sincronizados em minha conta no SkyDrive.

O ambiente utilizado neste tutorial: mac OS X Lion, git 1.7 e o aplicativo do SkyDrive instalado.

Acesse a pasta SkyDrive e inicie repositório git “remoto”

1
2
3
4
cd ~/SkyDrive/Git
mkdir projeto.git
cd projeto.git
git --bare init
1
2
#Saída no console
Initialized empty Git repository in /Users/vinicius/SkyDrive/Git/projeto.git/

Cria pasta do projeto e inicia repositório git local
Prepara as pastas de trabalho, onde ficará seu código fonte do projeto

1
2
3
4
cd ~/Works
mkdir projeto
cd projeto
git init

Resultado:

1
2
#Saída no console
Initialized empty Git repository in Works/projeto/.git/

Adiciona repositório “remoto” ao projeto local

1
2
3
4
5
git remote add origin ~/SkyDrive/Git/projeto.git
touch leia-me
git add leia-me
git commit -a -m "Iniciando projeto"
git push origin master:refs/heads/master

Resultado (esses números representam dados de meu projeto)

1
2
3
4
5
6
7
8
#Saída no console de meu projeto
Counting objects: 281, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (275/275), done.
Writing objects: 100% (281/281), 349.54 KiB, done.
Total 281 (delta 59), reused 0 (delta 0)
To /Users/vinicius/SkyDrive/Git/projeto.git
 * [new branch]      master -> master

Pronto! Sempre que realizado um commit e push em seu projeto local, o repositório será atualizado em sua pasta no SkyDrive, e sincronizado com os dados em cloud. Em caso de resgatar o backup em outra máquina, poderá realizar o clone do projeto:

Clonando o projeto do repositório

1
git clone ~/SkyDrive/Git/projeto.git

PNG transparente com CodeIgniter versão 1.7

17/05/2011

Olá, pessoal

Hoje já estamos na versão 2.0.2 do framework CodeIgniter, mas para quem ainda mantém sistemas nas versões anteriores a 2.0, encontra-se com um problema simples na geração de thumb de imagens PNG com fundo transparente.

Ao tentar gerar um thumb da imagem nas condições citadas, utilizando a biblioteca Image Manipulation Class, temos a desagradável surpresa de obtermos uma imagem com fundo preto. O problema já foi corrigido na verssão 2.0, e pode ser facilmente resolvido nas versões anteriores.

Para isso, abra o arquivo ./system/libraries/Image_lib.php, localiza a linha 515. Você deve encontrar o seguinte código:

515
516
$dst_img = $create($this->width, $this->height);
$copy($dst_img, $src_img, 0, 0, $this->x_axis, $this->y_axis, $this->width, $this->height, $this->orig_width, $this->orig_height);

Então, adicione entre as duas linhas o seguinte código, ficando assim:

515
516
517
518
519
520
521
$dst_img = $create($this->width, $this->height);
if ($this->image_type == 3) // png we can actually preserve transparency
{
        imagealphablending($dst_img, FALSE);
        imagesavealpha($dst_img, TRUE);
}
$copy($dst_img, $src_img, 0, 0, $this->x_axis, $this->y_axis, $this->width, $this->height, $this->orig_width, $this->orig_height);

O código inserido foi extraido justamente da versão atual do sistema. Assim, quando você precisar atualizar o core do framework em sua aplicação, não precisará se preocupar em copiar o hack para o novo arquivo, ok?!

No mais, só sucesso! Abraço e até mais.

Instalando CKEditor no Drupal 6

07/05/2011

O processo de instalação do CKEditor, sucessor do FCKEditor, é bastante simples. Vamos dividir em três itens:

O módulo no Drupal
Primeiro, faça o download do módulo do editor no drupal. Este módulo permitirá a integração do editor com o CMS, subistituindo automaticamente o textarea pelo editor WYSIWYG, como é chamado.

Após baixar, suba na pasta do módulo do seu projeto: ./sites/all/modules/

O sistema do CKEditor
Agora, acesse a página do editor e faça o download da versão mais atual. É recomendado uma versão igual ou superior ao 3.1. Abaixo, a lista dos navegadores compatíveis com esse sistema

  • Internet Explorer 6.0+
  • Firefox 2.0+
  • Safari 3.0+
  • Opera 9.5+
  • Google Chrome
  • Camino 1.0+

Após baixar, extraia o conteúdo na pasta ./sites/all/modules/ckeditor/. Observe que dentro desta pasta já existe uma pasta também com o nome ckeditor, mas somente com um arquivo chamado COPY_HERE.txt

Permitindo upload de imagem
Para permitir que o usuário possa subir imagem pelo editor, precisaremos do módulo do drupal IMCE. O IMCE é um módulo do editor para manipular os arquivos enviados.

A instalação do módulo é natural. Envie na pasta ./sites/all/modules/ e ative no painel.

Configurando

Para finalizar, precisaremos de algumas configurações:

1) Acesse a lista de permissão, e defina que o o perfil do usuário tem acesso ao editor (Administrar >> Gerenciamento de Usuário >> Permissão)

Obs.: Na imagem, os dois tipos de usuários administrador e editor criei para meu projeto específico

2) Agora, acesse a configuração do CKEditor, para definir que usará o IMCE para upload das imagens (Administrar >> Configuração do Site >> CKEditor)

Por padrão existe dois perfis (Default e Advanced), que devem ser relacionados com os papeis existentes no seu projeto do drupal. Vá em editar. No meu caso, eu relacionei o papel Default com o perfil de editor e o Advanced com o Administrador.

Em “File browser settings”, selecione a opção de IMCE. Há uma outra opção do CKFinder, mas este é pago.

Você pode configurar também para onde os arquivos enviados irão. Por padrão, vai para ./sites/default/files/. Eu criei uma pasta “noticias”, e apontei para ela.

É isso! Seu editor agora ficou show de bola. Qualquer dúvida, posta nos comentários.

Abraço e até a próxima!

Older Posts