0

No StackOverflow tem esse editores de texto das perguntas, assim que você começa a editar a pergunta. Tem itálico, negrito, links/citação, e vários outros.

Como foram feitos? Parecem aqueles editores wysiwig, mas por exemplo, eu não consigo fazer algumas coisas como:

[link pro google](https://google.com)

que ia aparecer assim:

link pro google

Como eu consigo fazer isso do link? E como eu faço essa caixinha da página de perguntas?

1 Resposta 1

0

A maneira mais facil de criar este tipo de text area é utilizando uma biblioteca, eu aconselharia utilizar o jquery

JQUERY

O jQuery é uma biblioteca de Javascript “leve”, fácil de utilizar no sentido “escrever menos, fazer mais”. Esta biblioteca foi desenvolvida por John Resig, um programador de Javascript. O site oficial do JQuery fica em www.jQuery.com

Resolvendo Problema

Dito isso, você precisará incluir a biblioteca:

<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>

Depois Crie o javascript responsavel por criar a o painel de edição:

<script type="text/javascript">
        bkLib.onDomLoaded(function() { nicEditors.allTextAreas() }); // convert all text areas to rich text editor on that page

        bkLib.onDomLoaded(function() {
             new nicEditor().panelInstance('area1');
        }); // convert text area with id area1 to rich text editor.

        bkLib.onDomLoaded(function() {
             new nicEditor({fullPanel : true}).panelInstance('area2');
        }); // convert text area with id area2 to rich text editor with full panel.
</script>

Depois crie seu html:

<html>
<head>
  <title>How to Create textarea into a rich content/text editor using jQuery</title>  
  <script type="text/javascript" src="nicEdit-latest.js"></script>
  <script type="text/javascript">
//<![CDATA[
  bkLib.onDomLoaded(function() {
        new nicEditor({maxHeight : 200}).panelInstance('area');
        new nicEditor({fullPanel : true,maxHeight : 200}).panelInstance('area1');
  });
  //]]>
  </script>
</head>
<body>
<h4>How to Create textarea into a rich content/text editor using jQuery</h4>
<div id="sample">
  <h4>Simple textarea</h4>  
  <textarea name="area" id="area" style="width:70%;height:200px;">
       Some Initial Content was in this textarea
  </textarea>
  <h4>textarea with complete panel</h4>
  <textarea name="area1" id="area1" style="width:70%;height:200px;">
       Some Initial Content was in this textarea
  </textarea>
</div>
</body>
</html>

Isso funcionará e criará seu painel de edição.

Para links vocês pode fazer algo assim:

http://jsfiddle.net/T2Q89/10/

Neste caso permite você inserir html puro no formulário, bastará você alterar para obter o resultado desejado.

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 .