5

Existe uma maneira de criarmos um textarea que sua forma de exibição seja em multi colunas?.

Eu possuo vários campos em textarea para o usuário poder fazer edições, mas preciso que esses textareas sejam exibidos em uma forma de jornal, aqueles de multi colunas.

Pesquisei formas de resolver como neste exemplo: http://www.w3schools.com/css/css3_multiple_columns.asp.

Mas ele aparentemente não funciona com os textareas, apenas com textos normais inseridos em divs.

Existe mesmo essa possibilidade ou uma outra forma de fazer isso?

1 Resposta 1

7

olha, você pode tornar a div editável

.tres-colunas {  
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}
<div class="tres-colunas" contentEditable="true">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis efficitur libero, in facilisis libero bibendum eu. Ut pretium elit neque, eget luctus dolor porta quis. Aliquam viverra porttitor nibh, ut mattis urna euismod eget. Aliquam posuere rhoncus ligula, eu ornare risus. Vivamus imperdiet finibus metus eu porttitor. Vivamus sodales tortor ut gravida placerat. Vestibulum auctor, eros nec hendrerit vehicula, ligula felis iaculis ex, nec lobortis nisl purus nec justo. Cras venenatis nisi imperdiet massa volutpat, sed ultricies turpis venenatis.
  </p>
  <p>
    Vestibulum egestas quis mi sit amet auctor. Ut porta lacinia convallis. Donec bibendum, magna sed imperdiet lobortis, sem neque vehicula neque, at ultrices orci nulla a sem. Maecenas blandit quam ac lacinia sagittis. Sed at elit vel metus placerat mattis vel eget est. Vivamus dui justo, dapibus et feugiat in, pharetra eget lectus. Sed viverra eget odio nec elementum. Morbi molestie justo ut turpis malesuada pellentesque. Cras lobortis, ante at suscipit mollis, mi urna hendrerit nisl, id viverra elit diam nec orci. Duis eget aliquam leo, quis dignissim augue.
  </p>
  <p>
    Nulla urna quam, condimentum sed tempus ut, auctor eget tellus. Sed accumsan pulvinar dolor non ullamcorper. Aliquam accumsan ipsum eu ante laoreet eleifend. Aliquam erat volutpat. Quisque in odio elit. Sed neque odio, auctor at ligula eget, condimentum ultricies tellus. Praesent lacinia nulla ut purus lobortis pulvinar. Duis eget pretium massa, ut mollis justo. Suspendisse finibus erat felis, ac porta quam tristique id. Sed posuere semper ultricies. Morbi consequat tempor arcu, ac elementum purus congue sed. Proin sollicitudin, diam vehicula sodales dapibus, eros massa tristique magna, vitae semper massa enim nec tellus. Etiam rutrum sed nulla at egestas. Fusce rhoncus tortor a dolor vestibulum, in dapibus tellus bibendum.
  </p>
  <p>
    Etiam risus lorem, tempor et mollis in, pretium eu purus. Mauris ac iaculis augue. Integer ullamcorper dui magna, id fringilla nunc ullamcorper eu. Sed nunc ipsum, vehicula vitae metus id, commodo mollis turpis. Pellentesque eget nibh vel enim laoreet tincidunt a nec ipsum. Morbi tincidunt massa vel lacinia gravida. Sed lobortis dignissim augue nec elementum. Fusce luctus magna vitae ligula posuere convallis.
  </p>
  <p>
    Praesent mauris ante, tristique at augue id, mollis accumsan nulla. Duis vitae porttitor lorem. Nam et lorem eu mauris convallis vulputate. Aenean a ligula eget eros commodo iaculis placerat tristique mauris. In bibendum iaculis pulvinar. Sed facilisis metus non elit imperdiet, non laoreet sapien semper. Ut sapien purus, maximus at fringilla ut, malesuada ultricies nibh.
  </p>
</div>

Agora para enviar o conteúdo da DIV, você irá precisar incluir o conteudo no Form.

Segue abaixo duas sugestões, uma assincronia e outra síncrona.

Assíncrona

var frmNoticia = document.getElementById("frmNoticia");
var txtConteudo = document.getElementById("txtConteudo");
var btEnviar = document.getElementById("btEnviar");

btEnviar.addEventListener("click", function (event) {
  //adicionando o conteudo de txtConteudo ao frmNoticia.
  var frmData = new FormData(frmNoticia);  
  frmData.append("txtConteudo", txtConteudo.textContent);  
  
  //enviando formulario de forma assicrona
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open("POST", "minha URL");
  xmlHttp.onreadystatechange = function () { 
    //retorno do AJAX.
  };
  xmlHttp.send(frmData);
});
.tres-colunas {  
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}

.mimic-textarea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  padding: 2px;
  resize: both;
}

#txtConteudo {
  max-height: 100px;
  overflow: auto;
}
<form id="frmNoticia">
  <input id="hdfIdentificador" type="hidden" value="1" />
  <div>
    <label>
      Titulo:
      <input id="txtTitulo" type="Text" value="" />
    </label>
  </div>
  <div>
    <label>
      Conteudo:
      <div id="txtConteudo" class="tres-colunas mimic-textarea" contentEditable="true">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis efficitur libero, in facilisis libero bibendum eu. Ut pretium elit neque, eget luctus dolor porta quis. Aliquam viverra porttitor nibh, ut mattis urna euismod eget. Aliquam posuere rhoncus ligula, eu ornare risus. Vivamus imperdiet finibus metus eu porttitor. Vivamus sodales tortor ut gravida placerat. Vestibulum auctor, eros nec hendrerit vehicula, ligula felis iaculis ex, nec lobortis nisl purus nec justo. Cras venenatis nisi imperdiet massa volutpat, sed ultricies turpis venenatis.
        </p>
      </div>
    </label>
  </div>
  <div>
      <input id="btEnviar" type="button" value="Enviar" />
  </div>
</form>

Sincrona

Neste caso você só precisa copiar o conteúdo da div para um hidden antes de enviar o form.

var frmNoticia = document.getElementById("frmNoticia");
var txtConteudo = document.getElementById("txtConteudo");
var hdfConteudo = document.getElementById("hdfConteudo");

frmNoticia.addEventListener("submit", function (event) {
  //copiando o valor de div#txtConteudo para o input#hdfConteudo
  //desta forma, o que será enviado é hdfConteudo.
  hdfConteudo.value = txtConteudo.textContent;
});
.tres-colunas {  
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}

.mimic-textarea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  padding: 2px;
  resize: both;
}

#txtConteudo {
  max-height: 100px;
  overflow: auto;
}
<form id="frmNoticia">
  <input id="hdfIdentificador" type="hidden" value="1" />
  <input id="hdfConteudo" type="hidden" value="1" />
  <div>
    <label>
      Titulo:
      <input id="txtTitulo" type="Text" value="" />
    </label>
  </div>
  <div>
    <label>
      Conteudo:
      <div id="txtConteudo" class="tres-colunas mimic-textarea" contentEditable="true">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis efficitur libero, in facilisis libero bibendum eu. Ut pretium elit neque, eget luctus dolor porta quis. Aliquam viverra porttitor nibh, ut mattis urna euismod eget. Aliquam posuere rhoncus ligula, eu ornare risus. Vivamus imperdiet finibus metus eu porttitor. Vivamus sodales tortor ut gravida placerat. Vestibulum auctor, eros nec hendrerit vehicula, ligula felis iaculis ex, nec lobortis nisl purus nec justo. Cras venenatis nisi imperdiet massa volutpat, sed ultricies turpis venenatis.
        </p>
      </div>
    </label>
  </div>
  <div>
      <input id="btEnviar" type="submit" value="Enviar" />
  </div>
</form>

5
  • Achei interessante, porém, estou utilizando os textarea porque desejo enviar essas informações em um formulário, ou seja, o campo que o usuário ta editando vai ser enviado por um form, existe uma maneira de enviar o conteúdo dessa div por um formulário?. Commented 29/09/2015 às 16:15
  • vai ser enviado por AJAX ou síncrono? Commented 29/09/2015 às 16:18
  • Eu estou utilizando o php, usando o $_POST em uma nova página para recuperar os dados, por exemplo: $TextoEditado = $_POST['NomeDaDiv']; Commented 29/09/2015 às 16:24
  • @MarcosWendel, atualizei a resposta, inclui duas formas de enviar o conteúdo da DIV. Commented 29/09/2015 às 16:38
  • Obrigado,todas as minha dúvidas foram esclarecidas. Commented 29/09/2015 às 16:40

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 .