Dúvidas Gerais
Gravatar de Ari Araujo Ari Araujo Tópico publicado em
15/07/2009, 16:26:52

Fckeditor

Alguem poderia me dar alguma ajuda de como eu posso usar o fckeditor com o Spaghetti
Gravatar de Shake Shake Resposta publicada em
22/07/2009, 22:12:55

Fckeditor

Fala galera,

Implementei, aliás adaptei um helper que utilizo no cakephp, conforme artigo elaborado por Marko Markovic .

Então vamos ao que interessa:

Bom inicialmente é necessário baixar o FckEditor

Após realizar o download extraia para a pasta webroot/scripts/*fck*
fck foi o nome que utilizei para a pasta que irá conter todos os arquivos do editor caso queira altear o nome fique atento às chamadas dela dentro do código do helper.

Com os arquivos do editor em seus devidos lugares, criaremos o arquivo
fck_helper.php que pode ser criado tanto na pasta core/lib/helpers quanto na app/helpers

Segue código do fck_helper.php 

<?php
/**
* Fck Helper class file.
*
**/
class FckHelper extends HtmlHelper { 
	/**
	 * @param  mixed	$width O comprimento do editor
	 * @param  mixed   	$height A altura do editor
	 * @param  string   $toolbar Barra de ferramentas que será utilizado no editor (definido no arquivo fckconfig.js)
	 * @param  string 	$skin Nome da pasta do tema de visualização (default|silver|office2003) 
	 * @return string
	 */
	function load($width=null, $height=null, $toolbar='Simple',$skin='default'){  
		$jsDS = '/';  
        $js = Mapper::url($jsDS. "scripts" .$jsDS . 'fck' . $jsDS);  
        $skinDir = $js . 'editor' . $jsDS . 'skins' . $jsDS;  
        $templateDir = $skinDir . (is_dir( $skinDir . $skin ) ? $skin : 'default') . $jsDS;  
        $code  = "<script type='text/javascript'>";
        $code .= " fckLoader = function ( ID ) {";  
        $code .= " var bFCKeditor = new FCKeditor( ID );";  
        $code .= " bFCKeditor.BasePath = '" . $js . "';";  
        $code .= " bFCKeditor.ToolbarSet = '" . $toolbar . "';";  
        $code .= " bFCKeditor.SkinPath = '" . $templateDir . "';";  
        $code .= " bFCKeditor.Height = " . $height . ";";  
        $code .= " bFCKeditor.Width = " . $width . ";";  
        $code .= " bFCKeditor.ReplaceTextarea();";  
        $code .= " }";
        $code .= " </script>";    
        return $code;  
    }  
    /**
	 * @param  string	$fieldName Nome do campo (textarea) a ser substituido pelo editor 
	 * @return string
	 */
    function editor( $fieldName ) 
    { 
    	$seperator = (strstr($fieldName, '.') ? '.' : '/'); 
        $id = str_replace($seperator, '_', $fieldName); 
        $code  = " <script type='text/javascript'>";
        $code .= " fckLoader('" . $id . "');";
        $code .= " </script>";  
		return $code; 
    }  
} 
?>

disponível também no pastebin http://pastebin.com/f6ecaaed5

Utilização
No controller temos que habilitar a o fck

<?php public var $helpers = array('Html', 'Form', 'Fck');?>

Na view que será utilizado o editor é necessário fazer a chamada do aquivo javascript.

<?php echo $html->script('fck/fckeditor.js');?>

Com o arquivo carregado agora podemos instanciar o editor:

<?php echo $fck->load('400', '200');?>

Finalmente após o campo textarea colocamos o editor:

<?php
	echo $form->input('descricao',null,array('type'=>'textarea'));
	echo $fck->editor('descricao');
?>

Bom é isso espero que tenham entendido!
Qualquer coisa ai vcs me encontram no meu email
andre.gds [do] gmail.com
Gravatar de Shake Shake Resposta publicada em
22/07/2009, 22:15:10

Fckeditor

Desse jeito ninguém entende mesmo! rsrs
Peço ao admin para editar meu post para adequar os textile mal aplicados!
Vlw
Gravatar de Julio Greff Julio Greff Resposta publicada em
23/07/2009, 08:22:21

Fckeditor

Textile corrigido ;)
Gravatar de Izabela Bittencourt Izabela Bittencourt Resposta publicada em
27/04/2010, 20:35:52

Fckeditor

Fiz tudo como o Shake me indicou mas quando coloco a linha

<?php echo $fck->editor('descricao');
?>

Dentro do meu textarea abre uma página que aponta o erro de controller não encontrado Não foi possível encontrar o controller ScriptsController.

Não entendo o problema!
Alguem me da um helpp????
Gravatar de Izabela Bittencourt Izabela Bittencourt Resposta publicada em
27/04/2010, 20:56:17

Fckeditor

Já sei que o erro está ao gerar esse caminho para o iframe

/fumec/scripts/fckeditor/fckeditor.html?InstanceName=descricao&Toolbar=Simple

Só falta corrigir!!!
Gravatar de Izabela Bittencourt Izabela Bittencourt Resposta publicada em
28/04/2010, 00:17:05

Fckeditor

A solução encontrada por mim foi alterar na linha 176 do arquivo fckeditor.js 'editor/' para '/editor/' e funcionou!

Agora luto para tentar fazer o fckEditor upar as imagens, não sei se o problema é meu servidor
=[
Gravatar de adriano meira adriano meira Resposta publicada em
29/06/2010, 20:09:17

Fckeditor

Olá pessoal aqui eu fiz como você Izabela, mas não deu no lugar do fck aparece um erro de controller "Controller não encontrado Não foi possível encontrar o controller ScriptsController. ..." alguém ai sabe e pode me ajudar?
Gravatar de guimesmo guimesmo Resposta publicada em
29/06/2010, 20:25:10

Fckeditor

Eu fiz aqui com ckeditor (versão mais nova do fck). Precisei penar um pouco mas funcionou. Estou em tempo de entregar o projeto agora e não vou conseguir postar nada, mas assim que possível eu mando pra ca.
Gravatar de adriano meira adriano meira Resposta publicada em
29/06/2010, 21:12:37

Fckeditor

Opa guimesmo aqui você consegui usar o upload de imagens do ckeditor? Eu acabei d conseguir fazer funcionar e até mexi e colocar o upload de imagens, ai Izabela tenta mexer no arquivo "[caminho da sua aplicação]/fck/editor/filemanage/conectors/php/config.php" na linha 30 habilitando a variável "$Config['Enabled'" depois logo em baixo configure o caminho de onde vai ser inserido as imagens tipo meu caso:

$Config['UserFilesPath'] = '/sistema/fckArquivos/' ;

Daí criei a pasta "fckArquivos" e dei permissão 777 para ela e deu certo!.

Mas tipo guimesmo depois posta ai como usar o ckeditor ele é bem mais bacana.
Gravatar de guimesmo guimesmo Resposta publicada em
29/06/2010, 21:32:33

Fckeditor

Bem na pressa (quando fiz foi na pressa também, perdoem as amadorisses):

ckeditor_controller


<?php
class  CkeditorController extends AppController{
    
    public $uses = array();
    public $layout = false;
    public $components  = array("Upload", "Image"); 
    
    public function browse($dirName){
        $files = array();
        
        echo $folder = Mapper::url("/images/".$dirName, $full);
        echo '<br>';
        echo $appFolder = APP . '/webroot/images/' . $dirName;
        
        $validFileTypes = array("png", "gif", "jpeg", "jpg");
        
        foreach ( new DirectoryIterator( $appFolder ) as $finfo ):
                if ( $finfo->isFile() ):
                        if(in_array(end(explode('.', $finfo->getFileName())), $validFileTypes)):
                                $pathname= $folder.'/'.$finfo->getFilename();
                                $files[] = sprintf( '<a href="#" onclick="seleciona(\'%s\');"><img src=\'%s\' /></a>' , BASE_URL.Mapper::url($pathname), BASE_URL.Mapper::url($pathname) );
                        endif;
                endif;
        endforeach;
        
        if ( count( $files ) ){
            $this->set("list", sprintf( '<ul class=\'fileBrowser\'><li>%s</li></ul>' , implode( '</li><li>' , $files ) ) );
        } else $this->set("list", '<h1>Nenhum arquivo encontrado.</h1>'); 
    }
    
    public function upload($dirName, $w, $h){
        if(!empty($this->data)){
            if(!$_FILES['upload']['error']){
                /*definição de entradas padrão para inclusão da imagem*/
                $this->UploadComponent->path = "/images/".$dirName."/";
                $this->UploadComponent->maxSize = "100";
                
                /*Definição de variavel para nome único de imagem, sem espacos*/
                $imagem = mktime().'-'.$this->clearString($this->UploadComponent->files["upload"]["name"], $this->UploadComponent->ext($this->UploadComponent->files["upload"]["name"]));
                $upload = $this->UploadComponent->upload(
                            $this->UploadComponent->files["upload"],
                            null, $imagem);
                if($upload){
                    $imagem = $dirName.'/'.$imagem;
                    
                    /*redimensionar imagem*/
                    $this->ImageComponent->resize("/webroot/images/$imagem", array(
                        "width" => $w,
                        "height" => $h,
                        "constrain" => true,
                        "filename" => "/webroot/images/".$imagem
                    ));
                    
                    $this->set('upload', 'ENVIADO');
                }
                else $this->set('upload', 'FALHA NO ENVIO');
            }
        }
    }
}
?>

browse.htm.php


<?php echo '<?xml version="1.0" encoding="UTF-8" ?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <title>Listagem de Arquivos</title>
                <?php echo $html->script("/ckeditor/ckeditor.js"); ?>
                <script type="text/javascript">
                        function seleciona( arquivo ){
                                window.opener.CKEDITOR.tools.callFunction( <?php echo $num =& $_GET[ 'CKEditorFuncNum' ]; ?> , arquivo );
                                window.close();
                        }
                </script>
                <?php echo $html->stylesheet("admin.css"); ?>
        </head>
        <body>
                <?php echo $list; ?>
        </body>
</html>

upload.htm.php


<div style="font-family:arial;font-size:12px;font-weight:bold">
<?php
        echo $upload;
?>
</div>

Não tenho certeza se isso é suficiente, mas pelo que eu me lembro foi só isso. Na view onde for usar tu chama assim:


<script type="text/javascript">
    $(function(){
        CKEDITOR.replace('texto', {
            filebrowserBrowseUrl : '<?php echo Mapper::url("/ckeditor/browse/noticias", $full); ?>',
            filebrowserUploadUrl : '<?php echo Mapper::url("/ckeditor/upload/noticias/600/600", $full); ?>'
        });
        
    });
</script>
Minha dúvida é se eu precisei incluir qualquer coisa no javascript... vou dar uma olhada aqui e ja posto.
Gravatar de guimesmo guimesmo Resposta publicada em
29/06/2010, 21:35:11

Fckeditor

a função clearString não ta no código porque não é obrigatória. Eu que fiz aqui pra nomes de arquivos.
Gravatar de guimesmo guimesmo Resposta publicada em
29/06/2010, 21:39:06

Fckeditor

Claro que ta faltando. Aquivo /app/webroot/scripts/ckeditor/plugins/browser/browse.php que faz a navegação.


<?php echo '<?xml version="1.0" encoding="UTF-8" ?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <title>Listagem de Arquivos</title>
                <script type="text/javascript" src="/javascript/ckeditor/ckeditor.js"></script>
                <script type="text/javascript">
                        function seleciona( arquivo ){
                                window.opener.CKEDITOR.tools.callFunction( <?php echo $num =& $_GET[ 'CKEditorFuncNum' ]; ?> , arquivo );
                                window.close();
                        }
                </script>
                <link rel="stylesheet" type="text/css" href="public/css/browser.css" />
        </head>
        <body>
                <?php
                $files = array();
                foreach ( new DirectoryIterator( $folder ) as $finfo ){
                        if ( $finfo->isFile() ){
                                $pathname= $finfo->getPathname();
                                $files[] = sprintf( '<a style="background:url(\'%s\') no-repeat;" href="#" onclick="seleciona(\'%s\');">%s</a>' , $pathname , $pathname , $finfo->getFileName() );
                        }
                }
                if ( count( $files ) ){
                        printf( '<ul class="fileBrowser"><li>%s</li></ul>' , implode( '</li><li>' , $files ) );
                } else echo '<h1>Nenhum arquivo encontrado.</h1>';
                ?>
        </body>
</html>

se eu lembrar de mais alguma coisa eu mando. Eu ia postar no meu blog quando fiz, mas na correria esqueci.
Gravatar de guimesmo guimesmo Resposta publicada em
29/06/2010, 21:41:49

Fckeditor

Acho que falei abobrinha. Desconsidera o último post. Foi um arquivo que eu fiz de teste e obviamente não funcionou. O primeiro post ta certo.
Gravatar de guimesmo guimesmo Resposta publicada em
29/06/2010, 21:42:12

Fckeditor

maldita (falta de) documentação.
Gravatar de adrianom adrianom Resposta publicada em
08/07/2010, 08:24:57

Fckeditor

Oi pessoal mais uma luta no fck aqui, me ajudem por favor. Tipo agora já consegui colocar o FCKEditor tradicional (depois tento o bacaninha guimesmo) e salvo as imagens de boa, mas quando mando salvar os dados ele perde a configuração de tags de imagem!

Ou seja o FCkEditor não está mandando pro banco as tags 

<a href=... />
porém seu eu escrevo num campo de input ou textarea normal, ele gera a imagem, mas no FCK ele não vai...

Por favor me ajudem!!!
Gravatar de tiagantunes tiagantunes Resposta publicada em
25/08/2010, 08:09:18

Fckeditor

alguem me poderia dizer como posso separar a barra de ferramentas do ckeditor da area de texto. keria k ficassem independentes mas k desse pra formatar o texto na mesma.
obrigado.
Gravatar de Julio Greff Julio Greff Resposta publicada em
25/08/2010, 08:37:18

Fckeditor

Acredito que a dúvida não tenha algo a ver com Spaghetti...

Você deve estar logado para responder a um tópico ou adicionar um novo.
Efetue login ou Registre-se para participar das discussões.