Recentemente, devido aos requisitos do projeto, é necessária uma caixa de edição de texto front-end, com a função do upload em tempo real das imagens. Eu comparei vários plug-ins online. Primeiro, era o Ueitor do Baidu e descobriu que a estrutura era muito grande. Não era o que eu queria ver se uma pequena estrutura introduzia tantos arquivos; Em segundo lugar, era o Easyui da JQuery. Embora a versão pessoal seja gratuita, o projeto pertence aos negócios da empresa e parece que não é apropriado usar a versão comercial da estrutura. Considerando que a extremidade frontal do projeto é construída principalmente com o bootstrap, o plug-in Bootstrap-Wysiwyg foi finalmente selecionado, o que é muito simples, leve e altamente extensível.
É muito conveniente introduzir o Bootstrap-Wysiwyg e implementar a função de edição de texto, mas notei que o upload da imagem é implementado usando o FileAPI. Para a maioria dos sites, embora a experiência do usuário sem fazer upload seja muito boa com o FileAPI, quando ele é realmente armazenado no banco de dados, ainda esperamos armazenar o caminho estático da imagem no servidor, em vez de imagens de cordas. Em suma, precisamos fazer um pouco de reescrita de bootstrap-wysiwyg (a seguir referido como WY).
Primeiro, vamos observar os controles da imagem na página. Pule os outros controles e verifique o código -fonte. É fácil encontrar o seguinte código:
<div> <a id = "picturebtn"> <i> </i> </a> <input type = "file" data-role = "magic-overlay" data-target = "#picturebtn" data-edit = "insertImage"/> </div>
Vamos fazer uma explicação. As propriedades do solo de dados e do alvo de dados são eventos predefinidos no bootstrap. Aqui podemos entendê-lo como relacionado ao layout, sem considerá-lo. O ponto principal está aqui. A terceira propriedade de propriedades-edit, não existe esse evento no bootstrap. Observe o bootstrap wysiwyg.js, você pode encontrar alguns códigos como este:
ToolBar.find ('input [type = file] [data-' + options.commandrole + ']') .change (... ... comandorole: 'edit',Em outras palavras, essa propriedade é realmente implementada para facilitar os seletores, o que equivale a adicionar um evento do ouvinte ao botão de imagem.
Vamos continuar estudando a implementação do WY Image Visualize. A primeira etapa é, como mostrado no código acima, o ouvinte pega o evento de alteração do FileInput, responde e chama a função InsertFiles
RESTORESELECÇÃO (); if (this.type === 'arquivo' && this.files && this.files.length> 0) {insertfiles (this.files);} saveSelection (); his.value = '';Encontre a função InsertFiles
insertfiles = function (arquivos) {editor.focus (); $ .EECH (arquivos, function (idx, fileInfo) {if (/^image///.test(FileInfo.type)) {$ .when (readfileIntodataurl (fileInfo)). Options.FileUPLoaderror ("Leitor de arquivo", e); }Percebemos que ele usa o método $ .Deferred () do jQuery, chamado primeiro de um método readfileIntodataurl e, em seguida, produz com sucesso a imagem para a caixa de texto através do método ExecCommand auto-encapsulado. Esta imagem é na verdade uma tag <MG>, mas o atributo SRC é uma imagem representada por uma string. Portanto, o que precisamos fazer é realmente fazer o upload do arquivo depois que o ouvinte é acionado, obtenha o SRC da imagem e entregue o link ao método subsequente execomando.
Como o autor não está muito familiarizado com o diferido, ele ainda usa o modo de retorno de chamada mais comum
Observe o método de chamada de AjaxfileUpload:
$ .AJAXFILEUPLOAD ({URL: ..., Secureurl: false, fileElementId: ..., Datatype: "JSON", Sucesso: function (obj) {...}, erro: function () {...}});Existem duas propriedades necessárias, URL e FileElementId. Para manter a correção da dependência, não é aconselhável reescrever ajaxfileUpload. No entanto, como o controle WY é implementado por um ouvinte, não é realista passar parâmetros por meio de funções, por isso precisamos definir algumas propriedades para a caixa de entrada para alcançar nosso objetivo.
Adicione algumas propriedades no FileInput
<input type = "arquivo" id = "pictureInput" name = "picture" data-role = "magic-overlay" data-target = "#picturebtn" data-edit = "insertimage action =" ... " />
O ID é usado como FileElementId, e o atributo de nome também é necessário, principalmente para seleção de valor em segundo plano, a ação é a URL à qual a imagem precisa ser enviada.
Defina uma função no bootstrap wysiwyg.js chamado UPLOPLETFILETOSERVER, o formato da função é o seguinte:
var uPLOPLeToServer = function (ID, ação, retorno de chamada) {$ .ajaxfileUpload ({url: ação, seguro: false, fileElementId: id, datatype: 'json', sucesso: function (obj) {if (obj.status) {retorno (obj '; Options.FileUPLoaderror ("servidor-internal-excepção", obj.message);Reescreva o método InsertFiles da seguinte forma:
insertfiles = function (arquivos, id, ação) {editor.focus (); $ .EECH (arquivos, function (idx, fileInfo) {if (/^image///.test(FileInfo.type)) {/ * $. opções.FileUplOaderror ("Reader-de-arquivo", e);Ao mesmo tempo, faça certas modificações para o ouvinte obter os atributos necessários
ToolBar.find ('input [type = arquivo] [data-' + options.commandRole + ']') .change (function () {restaoreselection (); if (this.type === 'file' && this.files && this.files.length> 0) {insertfiles (this.files, $ (this). } SaveSelection ();Principalmente, duas posições de parâmetro foram adicionadas.
Dessa forma, a reescrita está completa. Observe que, para garantir que a execução correta seja executada, consulte ajaxfileupload.js antes do controle.
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.