terça-feira, 21 de agosto de 2012

FCkEditor

Um controle muito interessante disponibilizado pelo Genexus é o CkEditor (ou FCkEditor), que pode ser aplicado sobre atributos ou variáveis do tipo texto, caso se seleciona a propriedade Control Type como FCK Html Editor.

Salvo os problemas relacionados com segurança envolvidas na inclusão de codigo Javascript (leia as recomendações da OWASP - https://www.owasp.org), o controle, se utilizado com juizo pode produzir grandes beneficios para o usuário. Pois permite que o mesmo gere um texto vinculado com atributos visuais, escritos na linguagem HTML.  Olha que já vi sistemas jurássicos por ai que exigia que o singelo usuário escrevesse o texto na linguagem HTML.

Melhor ainda é poder otimizar o aspecto do editor, que é muito bem documentado no site http://docs.cksource.com/, e um dos aspectos mais interessantes é o ajuste do Toolbar, removendo-se incluindo-se novos controles. A imagem abaixo é resultado dessa configuração, com uma barra que eliminou controles desnecessários e perigosos.


Esse POST é um desejo antigo de explorar essa capacidade e de quebra te passar os caminhos das pedras para criar seu próprio Toolbar.


  1. Inclua uma variável Varchar(1M) na interface e em seguida mude sua propriedade para FCK Html Editor.
  2. Na propriedade do FCKEditor programe as propriedades Toolbar=Custom e
    CustomToolbar=MyToolbar, conforme indicado a seguir.

  3. Aqui vem a parte mais complexa, pois voce deve localizar no diretório Web\CKEditor um arquivo chamado config.js
  4. Para finalizar inclua nesse arquivo o código apresentado em Negrito (abaixo)
 /*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or
http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
 config.toolbar = 'MyToolbar';

 config.toolbar_MyToolbar =
 [
  { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
  { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
  { name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
                '/',
  { name: 'styles', items : [ 'Styles','Format' ] },
  { name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
  { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
  { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
  { name: 'tools', items : [ 'Maximize' ] }
 ];

};

Ao executar o WebPanel, o controle ficará configurado conforme os comandos incluídos nessa Toolbar. Interessante e simples.  E em caso de não ver a mudança imediatamente, não entre em desespero, de um F5 ou Refresh no navegador, que o bixo deve aparecer direito.