Maneira simples de implementar a função de upload de imagens em Summernote

Continuarei escrevendo uma página da web de bootstrap como eu disse antes ... e depois usarei um editor de texto rico, basta pesquisar e selecionar

Então eu encontrei um problema muito embaraçoso ... A função de upload da imagem é inválida ... então várias pesquisas são infrutíferas ... finalmente, eu folheei o documento oficial do Summernote e finalmente o resolvi. Em suma, escrevi o processo de solução.

A parte do back -end não fornece código, está cheia de pessoas. Aqui, assumindo que o back -end recebe o arquivo carregado e retorne o endereço do arquivo.

Primeiro, anexe os materiais de referência: Summernote Official Development Document

Fale brevemente sobre o plano de implementação da função de upload de imagem de Summernote

Primeiro, de acordo com a API fornecida pelo documento oficial, anexe o evento de upload de arquivos, depois use o JS para reiniciar o arquivo e, finalmente, usar a API para inserir a imagem na caixa de edição.

Era uma pergunta muito simples, mas infelizmente o funcionário não sabia por que a interface foi escrita ... e então todas as informações que pesquisei on -line foram enganadas ... embora houvesse razões pelas quais eu não procurei em profundidade o suficiente

Em resumo, as duas APIs principais do Summernote são resolvidas, assumindo eventos de upload de arquivos e inserindo imagens, e o formato é o seguinte de acordo com a documentação oficial.

 // assume o evento de upload de imagem $ ('#sumnote'). Sumnote ({retornos de chamada: {onimageUpload: function (arquivos) {// carrega a imagem no servidor e insira a imagem na caixa de edição}}}}); // insira a imagem $ ('#summerno'). Summerte ('insertim); Documento oficial da API do site fornecido acima

Em seguida, você pode implementar facilmente a caixa de edição do Summernote que suporta o upload de fotos

O código é o seguinte:

 $ ('#Summernote'). Summernote ({retornos de chamada: {OnImageUpload: function (arquivos) {// Carregar a imagem no servidor, usando o objeto formData. Como para compatibilidade ... é dito que não é muito amigável para a baixa versão ie var formdata = new FormData (); : 'Upload', // Tipo de interface de arquivo de fundo: 'Post', Data: FormData, ProcessData: False, ContentType: False, Sucesso: Function (Data) {$ ('#Sumnote'). Summerte ('InsertImage', Data, 'IMG');

Finalmente, isso implementa apenas a função de upload de imagem mais simples, que tem baixa compatibilidade e não considera a exceção de erro.

A maneira simples de implementar a função de upload de imagem em Summernote é o conteúdo inteiro compartilhado pelo editor. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.