O Kindeditor é um poderoso editor HTML online de código aberto que suporta efeitos de edição do Wysiwyg. Está escrito em JavaScript e pode se integrar perfeitamente a vários locais diferentes, como .NET, PHP, ASP, Java, etc. O site oficial pode ser visualizado aqui: http://kinDitor.net/index.php
O próprio Kindeditor fornece muitos plug -ins muito práticos e, como o código é de código aberto, os desenvolvedores podem estendê -lo e modificá -lo conforme necessário.
Considere esse cenário ao editar o conteúdo do site usando o Kindeditor: os editores tendem a copiar o conteúdo de outras páginas ou documentos do Word no editor do Kindeditor, em vez de escrever conteúdo em uma folha de papel em branco. Se o conteúdo copiado contiver imagens, você precisará fazer o download primeiro da imagem do endereço de origem para a área local e carregá -la para o servidor em que este site está localizado; caso contrário, a imagem ainda apontará para a página ou documento que você copiou, o que fará com que a imagem falhe ao abrir corretamente na página. Os editores geralmente precisam processar muitos documentos, e essas operações são, sem dúvida, muito pesadas. O Kindeditor pode reconhecer automaticamente o conteúdo colado e fazer o upload da imagem no servidor? O código a seguir implementa essa função.
Para detalhes sobre como usar o Kindeditor na página, você pode visualizar a documentação oficial do site.
A idéia básica de implementar esta função: adicione código ao evento KeyUp do editor do Kindeditor para verificar se o editor contém imagens; Descubra as imagens que precisam ser enviadas para o servidor automaticamente, ligue para o programa de upload de fotos através do AJAX para fazer o upload das imagens para o servidor; Na função de retorno de chamada do Ajax, altere o endereço SRC da imagem correspondente para o endereço relativo local.
Esse recurso não suporta copiar e fazer upload de imagens no Word para o servidor.
A imagem acima é o resultado final. O programa reconhecerá automaticamente o conteúdo no editor. Se houver imagens que precisam ser enviadas, uma mensagem rápida será exibida na parte superior do editor. Quando o usuário clica no link "Upload", o programa chama o programa de upload de imagens por meio da solicitação AJAX e modifica o endereço SRC da imagem correspondente para o endereço relativo local na função de retorno de chamada.
Etapas específicas de implementação e códigos relacionados:
1. Modificação do editor de Kindeditor
Encontre o arquivo Kindeditor.js e adicione código personalizado no evento keyup (). O código fornecido por diferentes versões do Kindeditor pode variar bastante e exigir a pesquisa com a ajuda de documentos oficiais. Este artigo é baseado no Kindeditor versão 4.1.10.
2. Código de arquivo Auto.js
função df () {var haspicContainer = document.getElementById ("has_pic"); if (has_pic "== null) {haspicContainer = document.createElement (" div "); haspicContainer.id =" has_pic "; haspiccontainer.innerhtml =" <input type = 'text' id = '' '' '' '' '', que não pode ser necessário. servidor </b> <a href = 'javascript: uploadpic ();' > Upload </a> </div> <div id = 'confirm'> </div> "; $ (". Ke-toolbar "). Depois (haspicContainer);} var iMg = $ (". Ke-edit-iframe "). (that.attr ("src") .Indexof ("http: //")> = 0 || that.attr ("src") .indexof ("https: //")> = 0) {piccount ++; $ (IMG) .LENCIONAL - 1) STRTR += that.attr (SRC "); {$ ("#has_pic"). Hide (); Tipo: "Get", Beesend: function () {$ ("#upload"). Hide (); $ (". ke-edit-iframe"). Contents (). Find ("img"); that.attr ("src", "uploads/imagem/" + str [i]); href = 'JavaScript: CloseUpload ();'> Close </a> ");} else $ ("#confirm "). Texto (" Falha no upload! ");}});}$ (". ke-edit-iframe"). Contents (). find ("img") é usado para encontrar todas as imagens no conteúdo do editor. Por padrão, o conteúdo do editor é armazenado no elemento iframe, que possui a propriedade de class = "ke-edit-iframe". O programa determinará se o valor de cada atributo SRC da imagem contém "http: //" ou "https: //", determinando assim se a imagem é uma imagem remota ou uma imagem local. Se a imagem for uma imagem remota, o Uploadpic.ashx é chamado pelo método Ajax da JQuery para carregar -se para o servidor. Ao mesmo tempo, modifique o endereço SRC da imagem correspondente na função de retorno de chamada.
3.
classe pública Uploadpic: ihttphandler {public void ProcessRequest (contexto httpContext) {context.Response.ContentType = "text/plana"; string pic = context.request.QueryString ["pic"]; string [] arr = pic.split ('|'); string str = ""; Uploadimg st = new uploadImg (); para (int i = 0; i <arn.length; i ++) {if (arr [i] .IndexOf ("http: //")> = 0 || arr [i] .IndexOf ("https: //")> = 0) {strd std = St.Saveurlpics (ANV [i], "/21/UPLO) if (std.length> 0) {if (i == arr.length - 1) strr += std; else strr + = std + "|"; }}} context.Response.Write (SSTR); } public bool isreusable {get {return false; }}} classe pública UploadImg {public String saveUrlpics (string imgulary, string path) {string strhtml = ""; String dirpath = httpContext.current.server.mappath (caminho); tente {if (! DircTory.Exists (Dirpath)) {Directory.CreateDirectory (Dirpath); } string ymd = dateTime.now.toString ("yyyymmdd", dateTimeFormatInfo.invariantinfo); DIRPATH + = YMD + "/"; if (! DircTory.Exists (DirPath)) {Directory.CreateDirectory (Dirpath); } string newFilename = dateTime.now.tostring ("yyyymmddhhmmss_ffff", dateTimeFormatinfo.invariantinfo) + imgulary.substring (imgulary.lastindexof ("."); Webclient wc = new webclient (); wc.downloadFile (imgulary, dirpath + newFileName); strhtml = ymd + "/" + newFileName; } catch (Exceção ex) {// retorna ex.Message; } retornar STRHTML; }}A imagem remota é baixada no caminho relativo do servidor "/uploads/imagem/" através do método WebClient, e a pasta e os nomes de arquivos correspondentes serão gerados automaticamente de acordo com a data. O resultado retornado contém os endereços relativos locais de todas as imagens separadas por "|". Na função uPLOUPPPE () do arquivo Auto.js na etapa 2, o sucesso do método de retorno de chamada obtém o valor e o analisa e atribui o endereço ao atributo SRC da imagem correspondente.
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.