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.
- Inclua uma variável Varchar(1M) na interface e em seguida mude sua propriedade para FCK Html Editor.
- Na propriedade do FCKEditor programe as propriedades Toolbar=Custom e
CustomToolbar=MyToolbar, conforme indicado a seguir. - Aqui vem a parte mais complexa, pois voce deve localizar no diretório Web\CKEditor um arquivo chamado config.js
- 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.
2 comentários:
Olá Douglas, parabéns pelo post!
Fiz um teste e funcionou perfeitamente, o único problema é que eu adiciona ao toolbar uma opção para upload de imagem e quando utilizei a custom tool bar não consigo mais adicionar a opção de upload de imagem.
Exemplo:
&FCKEditorMenuItem.Id = "upload"
&FCKEditorMenuItem.Description = "Upload"
&FCKEditorMenuItem.Icon = ActionUpdate.Link()
&FCKEditorMenuItem.ObjectInterface = FckEditorObjectInterface.Dialog
&FCKEditorMenuItem.Link = FIleUploader.Link("") // Url del objeto que se abrirá dentro del diálogo
&FCKEditorMenu.Add(&FCKEditorMenuItem)
&HTML.SetMenu(&FCKEditorMenu)
De qualquer forma obrigado!
Humm.... isso exige um estudo mais aprofundado, vou verificar e te falo.
Postar um comentário