0

Eu tenho o seguinte código JSFiddle

Ele cria uma div que da para inserir informações e que ao chamar o contextmenu com o botão direto abre uma caixa para inserir uma imagem.

Minha pergunta é:

Como eu faço ele criar a tag <image> dinamicamente na hora que seleciono para inserir a imagem, sem jquery ou qualquer plugin só javascript puro?

Na parte:

<div class="div-text" oncontextmenu="contextMenu(); return false;" contentEditable="true">
       <img src="" height="200" alt="Visualisar...">        
</div>

Editado:

Seguinte fiz um novo, agora consigo criar um novo elemento assim que clico com o botão direito, aqui está o exemplo:

JSFiddle

3 Respostas 3

4

Não vai dar para ler o nome do ficheiro diretamente mas podes criar um caminho virtual via API URL.createObjectURL que o browser suporta. Nesse caso ficaria assim:

function previewFile() {
    var preview = document.querySelector('img');
    var file = document.querySelector('input[type=file]').files[0];
    var caminhoVirtual = URL.createObjectURL(file);
    preview.src = caminhoVirtual;
}

jsFiddle: https://jsfiddle.net/4qf4o21x/

ou simplesmente URL.createObjectURL(event.target.files[0]); assim: https://jsfiddle.net/4qf4o21x/1/

3
  • Essa solução é bem interessante, só precisaria fazer um .each, mas se eu colocar o <image> em qualquer tag editável,o usuário conseguirá deletar aquela tag. Commented 21/09/2016 às 20:29
  • @WagnerViana onde querias colocar a imagem para previsualizar? não seria dentro da div editável?
    – Sergio
    Commented 21/09/2016 às 20:53
  • isso mesmo, mas talvez trocar por uma <textarea>, porque se eu criar o elemento, direto, ele pode ser excluído, antes mesmo de ser utilizado. Commented 22/09/2016 às 11:24
2

Wagner, criar elementos seguindo algum template, aconselho que utilize a tag .

no exemplo abaixo irei clonar um div.bloco e atualizar o conteudo dela.

var tmplBloco = document.getElementById("tmplBloco").content;
var addBloco = document.getElementById("addBloco");
var contador = 1;

addBloco.addEventListener("click", function (event) {
  //criando fragmento.
  var content = document.importNode(tmplBloco, true);
  //procurando a div.bloco dentro do fragmento.
  var bloco = content.querySelector(".bloco");
  bloco.textContent = contador++;
  //adicionando o fragmento a pagina.
  document.body.appendChild(content);
});
.bloco {
  float: left;
  width: 32px;
  height: 32px;
  padding: 16px;
  line-height: 32px;
  font-size: 32px;
  text-align: center;
  margin: 10px;
  box-shadow: 0px 0px 10px black;
  background-color: white;
}
<input id="addBloco" type="button" value="adicionar bloco" />
<hr />
<template id="tmplBloco">
  <div class="bloco"></div>
</template>

1
  • Neste meu caso o a div está funcionando como textarea, como deu para perceber, e quando clicar o botão direito do mouse é para colocar uma imagem. Meu problema é se o usuário dar um backspace ou escrever um texto ele consegue tirar aquele elemento, se ele colocar "imagem texto imagem", a segunda imagem ele não vai consegui colocar. Commented 21/09/2016 às 20:22
0

Ficaria assim de forma simplificada:

var $div-text= document.querySelector('.div-text'),
    // Pega a string do conteúdo atual
    HTMLTemporario = $div-text.innerHTML,
    // Novo HTML que será inserido
    HTMLNovo = '<img src="" height="200" alt="Visualisar...">';

// Concatena as strings colocando o novoHTML antes do HTMLTemporario
HTMLTemporario = HTMLNovo + HTMLTemporario;

// Coloca a nova string(que é o HTML) no DOM
$div-text.innerHTML = HTMLTemporario;
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .