Colocar botões de edição de texto em formulários

[Bruninho._]

Detalhes da dúvida

Versão do fórum : phpBB3
Nível de acesso : Membro
Navegador usado : Google Chrome
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://www.csi-nwd.forumeiros.com

Descrição do problema

Olá,

Gostaria de saber como faço para colocar botões ligados em uma caixa de texto específica.

Ex: http://prntscr.com/5tm6jr

Nesse formulário: https://ajuda.forumeiros.com/h15-gerador-formulario

[Sennior]

Boas,

Como assim botões ligados? Poderia especificar?
Até mais.

[Bruninho._]

Botões: http://prntscr.com/5tm8s2

[Daemon]

Muito simples meu caro, apenas adicione isto na sua página HTML:

Código:

<link rel="stylesheet" href="http://illiweb.com/rs3/86/frm/SCEditor/src/themes/fa.default.min.css" type="text/css" media="all" />
<script type="text/javascript" src="http://illiweb.com/rs3/86/frm/SCEditor/src/jquery.sceditor.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/86/frm/SCEditor/src/plugins/bbcode.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/86/frm/SCEditor/src/sceditor-commands.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/86/frm/SCEditor/src/sceditor-commands-bbcode.js"></script>
<script>
$(function() {
    // Substituir a textarea new editor
    // com SCEditor
    $("#new_editor").sceditor({
        plugins: "bbcode",
        width: "70%",
        style: "http://illiweb.com/rs3/86/frm/SCEditor/minified/jquery.sceditor.default.min.css"
    });
});
</script>


<textarea id="new_editor"></textarea>

Aqui:

Código:

width: "70%"

Você irá definir a largura do editor.


Até mais!

[Bruninho._]

Então, eu adiciono essa nova HTML e dai todas as "textarea" dos meus formulários irão ficar automaticamente com os botões de edição ?

@Edit

Seria colocar botões de edição nessas duas textarea
http://www.sa-evo.com/h3-formulario-de-denuncia

[Daemon]

Peço que o senhor não cometa novamente o erro de fazer posts duplos, ok?

Se quiser aplicar em todas as textarea da página HTML, substitua nesta parte do código:

Código:

$("#new_editor")

Por esta:

Código:

$("textarea")

Até mais!

[Bruninho._]

Peço que o senhor não cometa novamente o erro de fazer posts duplos, ok?

Se quiser aplicar em todas as textarea da página HTML, substitua nesta parte do código:

Código:

$("#new_editor")

Por esta:

Código:

$("textarea")

Até mais!

Desculpe minha ignorância, revirei o HTML do meu formulário e não encontrei esse código para que fosse feita a mudança.

Meu código do formulário:

Código:

<script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
               <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <script src="http://ajuda.forumeiros.com/29110.js"></script>
                <script src="http://ajuda.forumeiros.com/28074.js"></script>
                <style>
            #generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
 
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
 
#generated_form dl {
   margin-bottom: 10px;
   font-size: 1.1em;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
 
#generated_form dt {
   width: 30%;
   padding-top: 5px;
   border: none;
   float: left;
}
 
#generated_form dd {
   padding: 5px;
   padding-right: 5px;
   margin-left: 30%;
   vertical-align: middle;
}
#generated_form dl:hover dt {
   color: #666;
}
 
#generated_form input {
   font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   color: #333333;
   padding: 2px;
   vertical-align: middle;
   padding-left: 4px;
}
 
#generated_form input[disabled] {
   background-color:#ddd;
   cursor:pointer;
}
 
#generated_form select {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   cursor: default;
   vertical-align: middle;
   width:auto;
   max-width:100%;/* Bug IE */
   padding: 1px;
}
 
#generated_form textarea {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   width: 300px;
   height: 100px;
   padding: 2px;
   padding-left: 4px;
   cursor: text;
}
 
#generated_form input[type=text], #generated_form input[type=fields_list] {
   width: 300px;
   cursor: text;
}
</style>
          


 <form onsubmit="submit_form();" action="/posting.forum" id="generated_form" method="post" enctype="multipart/form-data">

 <input type="hidden" name="form_mode" value="0">
   <h1 data-type="field"><span style="font-size: 26px;"><b>Denúncia</b></span></h1>
    
   <h3 data-type="field">Preencha o formulário de denúncia com muita atenção, explique a situação da melhor forma possível e clara ou sua denúncia poderá ser IGNORADA. </h3>
<div><span style="font-size: 12px;"><br></span></div>
  
   <dl><dt>Jogador denunciante:</dt>
                            <dd><input type="text" data-type="field" placeholder="Seu nick" id="field6"></dd>
                        </dl>

<dl><dt>Jogador(es) denunciado(os):</dt>
                            <dd><input type="text" data-type="field" placeholder="Nick(s) do(s) abuser(s)" id="field7"></dd>
                        </dl>

<dl><dt>Data do abuso:</dt>
                            <dd><input type="date" data-type="field" id="field8"></dd>
                        </dl>

<dl>
                            <dt>Abuso cometido:</dt>
                            <dd><select data-type="field" id="field9"><option value="Hack">Hack</option><option value=" Abuso de Bug"> Abuso de Bug</option><option value=" DM em local proibído"> DM em local proibído</option><option value=" DriveBy"> DriveBy</option><option value=" Racismo"> Racismo</option><option value=" Outro"> Outro</option></select></dd>
                        </dl>

<dl>
                            <dt>Explique resumidamente o fato ocorrido, evite textos longos, seja direto e claro:</dt>
                            <dd><textarea data-type="field" id="field10"></textarea></dd>
                        </dl>

<dl>
                            <dt>Provas (Prints / ScreenShots):<br></dt>
                            <dd><textarea data-type="field" id="field12"></textarea></dd>
                        </dl>

                <input type="hidden" name="f" value="7">
                <input type="hidden" name="subject" value="O script não enviou o título" template="[ Denúncia ] {field7} [ {field6} ]">
                <input type="hidden" name="description" value="O script não enviou a descrição" template="">
                <textarea name="message" style="display:none"></textarea>
                
                  <textarea id="message-template-bbcode-0" style="display:none">[b]Jogador denunciante:[/b]   {field6}
                    [b]Jogador(es) denunciado(os):[/b] {field7}
[b]Data do abuso:[/b] {field8}
[b]Abuso cometido:[/b] {field9}
[b]Explique resumidamente o fato ocorrido, evite textos longos, seja direto e claro:[/b]    {field10}
[b]Provas (Prints / ScreenShots):[/b] {field12}</textarea>
                <center><input type="hidden" name="mode" value="newtopic">
                <input type="hidden" name="lt" value="0">
                  <input type="submit" name="post" class="button2" value="Enviar">
            
<h3></h3>
</form>

OBS: Sobre o Double Post foi um erro na minha net, quando postei a net caiu e pensei q não havia sido enviado, quando retornou logo em seguida coloquei em "modificar" dae fez o doublepost e não consegui apagar.

[Daemon]

Não está em seu template, e sim no código que passei acima.

Código:

<link rel="stylesheet" href="http://illiweb.com/rs3/86/frm/SCEditor/src/themes/fa.default.min.css" type="text/css" media="all" />
<script type="text/javascript" src="http://illiweb.com/rs3/86/frm/SCEditor/src/jquery.sceditor.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/86/frm/SCEditor/src/plugins/bbcode.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/86/frm/SCEditor/src/sceditor-commands.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/86/frm/SCEditor/src/sceditor-commands-bbcode.js"></script>
<script>
$(function() {
    // Substituir a textarea new editor
    // com SCEditor
    $("textarea").sceditor({
        plugins: "bbcode",
        width: "70%",
        style: "http://illiweb.com/rs3/86/frm/SCEditor/minified/jquery.sceditor.default.min.css"
    });
});
</script>

Já substitui para você.


Até mais!

[Bruninho._]

Sim, mais onde coloco esse código? no HTML GERAL ou no HTML do formulário?

[Daemon]

Este é o seu formulário?

Código:

<script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <script src="http://ajuda.forumeiros.com/29110.js"></script>
                <script src="http://ajuda.forumeiros.com/28074.js"></script>
                <style>
            #generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
 
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
 
#generated_form dl {
  margin-bottom: 10px;
  font-size: 1.1em;
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
 
#generated_form dt {
  width: 30%;
  padding-top: 5px;
  border: none;
  float: left;
}
 
#generated_form dd {
  padding: 5px;
  padding-right: 5px;
  margin-left: 30%;
  vertical-align: middle;
}
#generated_form dl:hover dt {
  color: #666;
}
 
#generated_form input {
  font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #333333;
  padding: 2px;
  vertical-align: middle;
  padding-left: 4px;
}
 
#generated_form input[disabled] {
  background-color:#ddd;
  cursor:pointer;
}
 
#generated_form select {
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  cursor: default;
  vertical-align: middle;
  width:auto;
  max-width:100%;/* Bug IE */
  padding: 1px;
}
 
#generated_form textarea {
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
  width: 300px;
  height: 100px;
  padding: 2px;
  padding-left: 4px;
  cursor: text;
}
 
#generated_form input[type=text], #generated_form input[type=fields_list] {
  width: 300px;
  cursor: text;
}
</style>
         


 <form onsubmit="submit_form();" action="/posting.forum" id="generated_form" method="post" enctype="multipart/form-data">

 <input type="hidden" name="form_mode" value="0">
  <h1 data-type="field"><span style="font-size: 26px;"><b>Denúncia</b></span></h1>
   
  <h3 data-type="field">Preencha o formulário de denúncia com muita atenção, explique a situação da melhor forma possível e clara ou sua denúncia poderá ser IGNORADA. </h3>
<div><span style="font-size: 12px;"><br></span></div>
 
  <dl><dt>Jogador denunciante:</dt>
                            <dd><input type="text" data-type="field" placeholder="Seu nick" id="field6"></dd>
                        </dl>

<dl><dt>Jogador(es) denunciado(os):</dt>
                            <dd><input type="text" data-type="field" placeholder="Nick(s) do(s) abuser(s)" id="field7"></dd>
                        </dl>

<dl><dt>Data do abuso:</dt>
                            <dd><input type="date" data-type="field" id="field8"></dd>
                        </dl>

<dl>
                            <dt>Abuso cometido:</dt>
                            <dd><select data-type="field" id="field9"><option value="Hack">Hack</option><option value=" Abuso de Bug"> Abuso de Bug</option><option value=" DM em local proibído"> DM em local proibído</option><option value=" DriveBy"> DriveBy</option><option value=" Racismo"> Racismo</option><option value=" Outro"> Outro</option></select></dd>
                        </dl>

<dl>
                            <dt>Explique resumidamente o fato ocorrido, evite textos longos, seja direto e claro:</dt>
                            <dd><textarea data-type="field" id="field10"></textarea></dd>
                        </dl>

<dl>
                            <dt>Provas (Prints / ScreenShots):<br></dt>
                            <dd><textarea data-type="field" id="field12"></textarea></dd>
                        </dl>

                <input type="hidden" name="f" value="7">
                <input type="hidden" name="subject" value="O script não enviou o título" template="[ Denúncia ] {field7} [ {field6} ]">
                <input type="hidden" name="description" value="O script não enviou a descrição" template="">
                <textarea name="message" style="display:none"></textarea>
               
                  <textarea id="message-template-bbcode-0" style="display:none">[b]Jogador denunciante:[/b]  {field6}
                    [b]Jogador(es) denunciado(os):[/b] {field7}
[b]Data do abuso:[/b] {field8}
[b]Abuso cometido:[/b] {field9}
[b]Explique resumidamente o fato ocorrido, evite textos longos, seja direto e claro:[/b]    {field10}
[b]Provas (Prints / ScreenShots):[/b] {field12}</textarea>
                <center><input type="hidden" name="mode" value="newtopic">
                <input type="hidden" name="lt" value="0">
                  <input type="submit" name="post" class="button2" value="Enviar">
           
<h3></h3>
</form>

Está um pouco bagunçado amigo, você deve corrigir algumas tags que foram mal posicionadas e/ou não foram fechadas.

E isto

Código:

<link rel="stylesheet" href="http://illiweb.com/rs3/86/frm/SCEditor/src/themes/fa.default.min.css" type="text/css" media="all" />
<script type="text/javascript" src="http://illiweb.com/rs3/86/frm/SCEditor/src/jquery.sceditor.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/86/frm/SCEditor/src/plugins/bbcode.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/86/frm/SCEditor/src/sceditor-commands.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/86/frm/SCEditor/src/sceditor-commands-bbcode.js"></script>
<script>
$(function() {
    // Substituir a textarea new editor
    // com SCEditor
    $("textarea").sceditor({
        plugins: "bbcode",
        width: "70%",
        style: "http://illiweb.com/rs3/86/frm/SCEditor/minified/jquery.sceditor.default.min.css"
    });
});
</script>

Deve ser adicionado dentro do HTML, pode ser no topo mesmo, na primeira linha.


Até mais!

[Bruninho._]

Não resultou =S

http://www.sa-evo.com/h3-formulario-de-denuncia

[EuficoLoko]

Segundo o regulamento do setor de suporte, tópicos com mais de 7 dias devem ser arquivados por abandono do próprio autor. Você poderá obter mais informações lendo este tópico: Regras para a postagem de dúvidas Caso ainda tenha dúvidas, aconselhamos que crie um novo tópico no setor de suporte, tendo em vista que este não deve ficar na seção por mais de 7 dias.