Baixei um bom editor WYSIWYG do site oficial e me deparei com uma surpresa desagradável - na funcionalidade padrão, não há como fazer upload de arquivos. Como consertar isso, continue lendo.
Agora precisamos criar este arquivo upload.php na pasta do próprio editor. Se você baixou do site oficial, esta pasta será amostras.
Abra o arquivo upload.php e cole o código deste arquivo lá:
Este código restringe o upload de arquivos por tipo, ou seja, apenas jpg e png são permitidos. Para expandir a lista de extensões válidas, observe a linha: else if (($ _FILES ['upload'] ["type"]! \u003d "image / jpeg") AND ($ _FILES ['upload'] ["type"]! \u003d "image / jpeg") AND ($ _FILES ['upload'] ["tipo"]! \u003d "imagem / png"))
Além disso, este código limita o tamanho dos arquivos carregados. Veja a linha else if ($ _FILES [‘upload’] [“size”] \u003d\u003d 0 OR $ _FILES [‘upload’] [“size”]\u003e 2050000)
O número 2.050.000 é o número de bytes válidos. Para converter para megabytes, leia assim: 2.050.000 bytes / 1.024 / 1.024 \u003d 1,9 MB. Ou seja, para aumentar o limite para 10 MB, basta ler assim: 10 MB * 1024 KB * 1024B \u003d 10485760.
Agora só precisamos alterar alguns valores e iniciar o editor novamente. Tudo no mesmo arquivo upload.php encontre uma linha como esta: move_uploaded_file ($ _ FILES [‘upload’] [‘tmp_name’], “files /res.$ name);
Ela é responsável por onde nossos arquivos serão carregados. Neste caso, a pasta arquivos. Você pode especificar qualquer outra pasta, mas verifique se ela existe. Se não, crie-o.
Agora encontre uma linha como esta: $ full_path \u003d ‘http: //localhost/ckeditor/samples/files/’.$name;
Deve ser alterado para o seu valor. Ou seja, você precisa alterar o próprio URL para os arquivos carregados " http: // localhost / ckeditor / samples / files /«.
Bom, isso é tudo. Como você pode ver, acabou sendo muito fácil e rápido iniciar esta função.
Mensagem de suporte originalObrigado informações muito úteis !!!A maneira mais fácil de adicionar uma imagem em qualquer lugar da postagem é usando o botão do editor avançado CKEditor (ou FCKEditor). Para adicionar uma imagem desta forma, você precisa colocar o cursor no local desejado no texto, clicar no botão "Imagem", selecionar um arquivo em seu computador e carregá-lo.
A explicação mais detalhada sobre como baixar imagens usando o editor avançado da Liveinternet
Na figura abaixo: 1 - o botão "Imagem" do editor CKEditor, 2 - o local onde o cursor do mouse está posicionado.
Ao clicar no botão "Imagem", a janela "Propriedades da imagem" será aberta. Selecione a guia Upload e clique no botão Procurar.
Selecione a imagem desejada (clique nela com o botão esquerdo do mouse) e clique no botão "Abrir". Alternativamente, você pode simplesmente clicar duas vezes na imagem sem usar o botão "Abrir".
Clique no botão "Enviar para o servidor"
O arquivo foi baixado e renomeado de alguma forma. Por exemplo, em navegador Opera a mensagem é semelhante a esta:
Clique no botão OK.
A janela "Informações da imagem" será aberta, a qual consideraremos em detalhes.
URL - o endereço temporário da imagem no servidor do site, que mudará após a publicação da postagem;
Endereço alternativo - você pode escrever uma descrição da imagem que será vista por robôs de busca e usuários que desativaram a exibição de imagens em seus navegadores;
A largura e a altura da imagem podem ser alteradas a seu critério. Ao mesmo tempo, se você usar o ícone de cadeado, as proporções serão preservadas; se você pressionar a seta circular, as dimensões voltarão aos originais;
Borda - um quadro ao redor da borda da imagem (largura em pixels);
Margens horizontais e verticais - a distância da borda da imagem aos elementos adjacentes (texto, outras imagens, etc.) pela altura e largura da postagem;
Alinhamento - posicionar uma imagem no texto, esquerda, direita, centro e assim por diante;
Pré-visualização - pré-visualização da imagem carregada.A imagem será inserida na postagem onde o cursor estava - você sempre pode movê-la, se quiser.
Se necessário, repita o upload para outras imagens que deseja inserir no texto da postagem.
Abaixo, no bloco "Adicional", marque ou desmarque os itens "Assinar imagem" e "Expandir imagem".
P.S. Na Internet ao vivo para celular, os botões de adição têm a seguinte aparência:
Normalmente, um editor WYSIWYG é necessário quando você precisa escrever um painel de administração, no qual será fácil e conveniente para um usuário comum que não conhece html adicionar seus próprios textos. Assim foi no meu caso.
Baixe o CKEditor do site oficial: baixe o ckeditor
Baixando arquivo grátis Gerenciador KCFinder: baixe o kcfinder
Integramos o CKEditor no site de uma forma padrão. Adicione o script ckeditor.js à página (no meu caso, o script está na raiz do site no diretório ckeditor). Descompactei o KCFinder na pasta ckeditor, apenas por conveniência.
Deixe a página ter um campo textarea que precisa ser substituído por um editor WYSIWYG:
A seguir, precisamos especificar as configurações no ckeditor para que quando você clicar no botão "upload de arquivo" ou visualizar arquivos no servidor, o KCFinder se abra, para isso adicionamos as seguintes configurações ao CKEDITOR.replace:
CKEDITOR.replace ("ckeditor", ("filebrowserBrowseUrl": "/ ckeditor / kcfinder / browse.php? Type \u003d files", "filebrowserImageBrowseUrl": "/ ckeditor / kcfinder / browse.php? Type \u003d images", "filebrowserFlash : "/ ckeditor / kcfinder / browse.php? type \u003d flash", "filebrowserUploadUrl": "/ ckeditor / kcfinder / upload.php? type \u003d files", "filebrowserImageUploadUrl": "/ ckeditor / kcfinder / upload.php? type \u003d imagens "," filebrowserFlashUploadUrl ":" / ckeditor / kcfinder / upload.php? type \u003d flash "));
No diretório / ckeditor / kcfinder / existe um script com a configuração config.php, onde você precisa especificar o caminho para a pasta onde os arquivos adicionados serão carregados (não se esqueça de ver que o diretório é gravável).
Parece que tudo funciona, mas existem mais alguns pontos em relação às configurações de formatação de código no CKEditor, por exemplo, eu não gosto que quando você pressiona a tecla enter no editor, o texto é colocado entre uma tag
Além disso, essa tag é constantemente registrada quando tentamos salvar um campo vazio com um editor anexado. Para corrigir isso, adicione um pequeno script:
If (typeof CKEDITOR! \u003d\u003d "undefined") (CKEDITOR.on ("instanceReady", function (ev) (// Parágrafos de saída as.ev.editor.dataProcessor.writer.setRules ("*", (indent: false, breakBeforeOpen: true, breakAfterOpen: false, breakBeforeClose: false, breakAfterClose: true));));)
Tag de preenchimento automático removida
Agora, vamos remover a quebra automática de texto nesta tag ao pressionar enter. Para fazer isso, adicione as seguintes configurações ao arquivo de configuração /ckeditor/config.js:
// ao pressionar Enter, adicione br config.enterMode \u003d CKEDITOR.ENTER_BR; config.shiftEnterMode \u003d CKEDITOR.ENTER_BR;
Se parecer que as duas últimas linhas de código não ajudam a resolver o problema, limpe o cache do navegador e teste novamente, tudo deve funcionar. Portanto, seu editor CKEditor com o gerenciador de arquivos KCFinder está pronto para funcionar e parece muito bom.
Informações adicionais sobre como definir a configuração podem ser encontradas nos sites oficiais dos editores.
Para pequenos projetos onde a funcionalidade mínima do editor wysiwyg é necessária, eu uso a versão padrão do Ckeditor. O ckeditor permite inserir imagens no texto, enviando-as para o servidor antecipadamente. Normalmente, isso é feito pelo gerenciador de arquivos, que abre quando você clica no botão "Procurar arquivos".
Mas às vezes a funcionalidade do gerenciador de arquivos é redundante. Basta selecionar um arquivo em seu computador, baixá-lo e inseri-lo no texto. Para isso, é utilizado o plugin uploadimage, que deve estar conectado ao ckeditor. É conveniente configurar imediatamente o ckeditor com este plugin para não se preocupar em resolver as dependências deste plugin. Uploadimage adiciona uma nova guia à janela de inserção de imagem.
Para que o plug-in funcione, você precisa especificar o caminho para o manipulador de download de imagem no servidor no arquivo de configuração ckeditor config.js.
public / ckeditor / config.js
Config.filebrowserUploadUrl \u003d "/ imagem de upload";
Isso completa a configuração do ckeditor. Agora vamos implementar a funcionalidade de download no servidor. Vamos adicionar uma nova rota no arquivo web.php. Para simplicidade e clareza, não colocarei o código de carregamento da imagem em um controlador separado, mas gravarei diretamente nas rotas.
rotas / web.php
Route :: post ("upload-image", function (\\ Illuminate \\ Http \\ Request $ request, Illuminate \\ Contracts \\ Validation \\ Factory $ validator) ($ v \u003d $ validator-\u003e make ($ request-\u003e all (), ["upload" \u003d\u003e "obrigatório | imagem",]); $ funcNum \u003d $ solicitação-\u003e entrada ("CKEditorFuncNum"); if ($ v-\u003e falha ()) (resposta de retorno ("");) $ image \u003d $ request-\u003e file (" upload "); $ image-\u003e store (" public / uploads "); $ url \u003d asset (" storage / uploads /".$ imagem-\u003e hashName () ); resposta de retorno (""); });
Porque ckeditor envia uma imagem com uma solicitação POST, e laravel verifica o token CSRF, que ckeditor não transmite, você precisa escrever a rota recém-criada em exceções para que laravel não verifique o token:
app / Http / Middleware / VerifyCsrfToken.php
Acontece que a oportunidade upload de arquivos via editor CKeditor, desabilitado por padrão. Neste artigo, faremos nosso editor WYSIWYG carregar imagens e muito mais.
Se você não sabe o que é um editor CKeditor WYSIWYG, então neste artigo tudo está escrito em detalhes.
Para girar este foco, precisamos do CKeditor com o plugin para inserir imagens instalado (geralmente embutido no editor por padrão) e apenas mãos diretas.
1. Abra o arquivo na pasta com o editor: \\ plugins \\ image \\ dialogs \\ image.js
Agora precisamos encontrar algo no arquivo e alterá-lo. Devo dizer imediatamente que o que estamos procurando às vezes a versão mudou da versão, então você deve ter uma das palavras fornecidas.
Precisa procurar: config.filebrowserBrowseUrl ou filebrowserImageBrowseLinkUrl ou id: "Upload"... Na ausência de correspondências exatas, o que é provável que seja, procure as palavras Envio e Arquivo... ao lado do encontrado, procure por tal expressão - escondido: verdadeiro ou escondido :! 0 e mude para escondido: falso.
2. Para verificar o sucesso da etapa anterior no editor, pressione o botão para inserir imagens - a guia "Carregar" deve aparecer lá, após a abertura você verá o botão e o campo de seleção de arquivo. Não funcionará neste estágio e isso é bastante razoável.
Atenção! Muito frequentemente os navegadores armazenam em cache o arquivo image.js e depois de mudá-lo, eles não recarregam, então tente abrir o site em outro navegador se você não percebeu as mudanças.
3. Depois que a guia aparecer, vá para a próxima etapa.
Na pasta com o editor, encontre o arquivo config.js e abri-lo. No conteúdo do arquivo dentro da expressão:
CKEDITOR.editorConfig \u003d function (config)
essa. em algum lugar entre aspas curvas " { "e no final do arquivo" } "insira a linha:
config.filebrowserUploadUrl \u003d "../upload.php";
Na linha acima ../ upload.php é o caminho para o manipulador. O caminho atualmente vai para o arquivo upload.php, que está localizado um nível acima da pasta de conteúdo ckeditor. Provavelmente, este arquivo estará na raiz do seu site, se você entende o dispositivo inteiro, pode alterá-lo a seu critério.
Agora, deixamos a pasta com o conteúdo do editor e criamos nosso arquivo upload.php. Nós o preenchemos com o seguinte conteúdo:
função getex ($ filename) (
return end (explode (".", $ filename));
}
if ($ _ FILES ["upload"])
{
if (($ _FILES ["upload"] \u003d\u003d "nenhum") OU (vazio ($ _ FILES ["upload"] ["nome"])))
{
$ message \u003d "Você não selecionou um arquivo";
}
else if ($ _FILES ["upload"] ["size"] \u003d\u003d 0 OR $ _FILES ["upload"] ["size"]\u003e 2050000)
{
$ message \u003d "Tamanho do arquivo fora do intervalo";
}
else if (($ _FILES ["upload"] ["type"]! \u003d "image / jpeg") AND ($ _FILES ["upload"] ["type"]! \u003d "image / jpeg") AND ($ _FILES ["upload"] ["type"]! \u003d "image / png"))
{
$ message \u003d "Apenas imagens JPG e PNG podem ser carregadas.";
}
else if (! is_uploaded_file ($ _ FILES ["upload"] ["tmp_name"]))
{
$ message \u003d "Algo deu errado. Tente enviar o arquivo novamente.";
}
outro (
$ name \u003d rand (1, 1000). "-". md5 ($ _ FILES ["upload"] ["nome"]). ".". getex ($ _ FILES ["upload"] ["nome"]);
move_uploaded_file ($ _ FILES ["upload"] ["tmp_name"], "images /".$ name);
$ full_path \u003d "http: // site / imagens /". $ name;
$ message \u003d "Arquivo". $ _ FILES ["upload"] ["nome"]. "carregado";
[email protegido]("nome das imagens /".$);
if ($ size<50 OR $size<50){
unlink ("nome das imagens /".$);
$ message \u003d "O arquivo não é uma imagem válida";
$ full_path \u003d "";
}
}
$ callback \u003d $ _REQUEST ["CKEditorFuncNum"];
echo "";
}
?>
Agora seu arquivo só aceitará imagens PNG e JPEG de até 2 MB para upload (feito por motivos de segurança). Você também pode descobrir o código e alterar tudo de acordo com sua preferência.
Mais importante ainda, altere o seguinte no código:
Na linha move_uploaded_file ($ _ FILES ["upload"] ["tmp_name"], "images /".$ name); mudança imagens / para a pasta onde as imagens serão carregadas em relação ao arquivo upload.php.
Além disso, especifique na variável $ full_path mudança http: // site / imagens / para o seu caminho absoluto para a pasta de imagens baixadas.
4. Isso é tudo. Agora, carregar imagens no CKeditor não é mais um problema. Se você considera o manipulador complexo e deseja ver aqui também uma versão "leve" na qual você pode carregar tudo, escreva nos comentários.
