Piztu TEXTAREA argitaratzaile (WYSIWYG | CKEditor)

Hemen laguntza azkar bat CKEditor integratzeko duzu haien web aplikazioetan urrats hiru urtean egin.

Aurkezpen

piztu zure etiketa Web editore batean TEXTAREA jada ez da zaila. the editoreak askok Interneten aurki ditzakezun artean, Ikusten utzi edo ez erabiltzeak CKEditor. Ikusi ekintza honetan editorea DEMO.

Instalazio-

Jaitsi CKEditor hasi http://ckeditor.com/download. post honetan erabilitako bertsioak zen 3.6.4, of 17 Jul 2012. Atera fitxategia ckeditor_3.6.4.zip zure aplikazioa. karpeta bat ckeditor sortuko da. laster, Orain besterik egin zure iturburu-kodea barruan dei bat!

Integração

O CKEditor é uma aplicação JavaScript. Para lê-lo, basta fazer uma simples chamada para ele dentro das etiketa HEAD do seu código-fonte. Feito isto, a API Javascript do CKEditor já estará pronta para ser utilizada. Lembre-se de ajustar o caminho do arquivo ckeditor.js para o diretório em que foi descompactado.

urrats 1Faça a chamada ao CKEditor
1
2
3
  <head>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  </head>
urrats 2Crie um campo TEXTAREA
1
2
3
  <body>
    <textarea id="editor1" name="editor1">&lt;p&gt;Valor inicial.&lt;/p&gt;</textarea>
  </body>
urrats 3Diga qual TEXTAREA (id) será substituído pelo CKEditor
1
2
3
4
5
6
7
  <head>
    <script type="text/javascript">
      window.onload = function()  {
        CKEDITOR.replace( 'editor1' );
      };
    </script>    
  </head>

laster, já funciona! Não acredita? Salve, han eman “F5” nabigatzailea eta ikusteko… kode osoa itxura hau:

kode osoa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
  <head>
    <izenburua>CKEditor</izenburua>
    <meta content="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
      window.onload = function()  {
        CKEDITOR.replace( 'editor1' );
     };
    </script>
  </head>
  <body>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&lt;p&gt;Valor inicial.&lt;/p&gt;</textarea>
      <input type="submit" value="Submit" />
    </inprimaki>  
  </body>
</html>

argi, orain doikuntza egiteko, zure eskaera eta behar duzun, ezartzeko hasteko ekintza zure FORM, Orri hori berreskuratu egingo da eta POST bidez aurkeztutako datuak prozesatu adieraziz.

Artikulu Amaieran hemen, baina batzuk perla gehiago utzi dut bitxi for:

aholku

(1) Sem evento onload, com class =”ckeditor”

class esleitu baduzu “ckeditor” Zure arean to, Automatikoki CKEditor batean izango da bihurtu dute, Gertaera deitutako gidoia erabili beharrik gabe “onload”, eta erraza:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
  <head>
    <izenburua>CKEditor</izenburua>
    <meta edukirik="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  </head>
  <body>
    <formulario ekintza="request.php" Metodo="post">
      <textarea class="ckeditor" id="editor1" name="editor1">&lt;p&gt;Valor inicial.&lt;/p&gt;</textarea>
      <Sarrera-mota="submit" balio="Submit" />
    </inprimaki>  
  </body>
</html>

(2) Truke line break <p> arabera <br />

Bi modu to P BR arabera alda teclamos Sartu nabaritu dut. lehena, parametro ezartzeko da enterMode balio ekin 2, geroztik 1 = P, 2 = BR eta 3 = DIV.

1
2
3
4
5
6
7
  <head>  
    <script type="text/javascript">
      window.onload = function() {
        CKEDITOR.replace( 'editor1', {enterMode: zenbakia(2)} );
      };
    </script>
  </head>

edo, ireki fitxategia config.js eta horrelako zerbait definitzea:

1
2
3
CKEDITOR.editorConfig = function( config ) {
  config.enterMode = CKEDITOR.ENTER_BR;
};

Kasu honetan, SARTU idatzi, aukera ditugu:
CKEDITOR.ENTER_P - paragrafoan P berrian sortuko da;
CKEDITOR.ENTER_BR - BR line break;
CKEDITOR.ENTER_DIV - bloke berri DIV sortzen da.

itxi gomendatzen dut eta nabigatzaileak emaitza ikusteko ireki

aldaketa horren, you cached delako daiteke emateko! Hala ere ez du funtzionatzen, garbitu arakatzailearen cachea.

(3) Aldatu atzealdeko CKEditor toolbar kolorea

ohartu ahala, Gure CKEditor esleitzea parametroetan aldaketak egin ditzake zuzenean ckeditor objektu edo fitxategi bidez dugu config.js. hortaz, besterik modu bat frogatu dut:

1
2
3
4
5
6
7
  <head>  
    <script type="text/javascript">
      window.onload = function() {
        CKEDITOR.replace( 'editor1', {Nordwestlicher: '# Ff0000'} );
      };
    </script>
  </head>

(4) CKEditor konfigurazio parametroak konbinatuz

CKEditor konfigurazio parametroak konbinatu daiteke. ahalbideak ezagutzea, Begirada bat hartu API Config. Adibidez:

1
2
3
4
5
6
7
8
9
10
11
12
  <head>  
    <script type="text/javascript">
      window.onload = function() {
        CKEDITOR.replace( 'editor1', {  Nordwestlicher: 'Ccc',
                                        enterMode: CKEDITOR.ENTER_P,
                                        customConfig : 'Ckeditor / outroConfig.js',
                                        hizkuntza: 'Pt-br'        
                                      } 
                        );
      };
    </script>
  </head>

(5) Onartutako hizkuntzak CKEditor arabera

O CKEditor suporta 58 hizkuntzak, biak barne, edo “pt-br”. Ikusi gehiago Erabiltzaile Interfazearen Hizkuntzak. Goiko adibideak bere erabilera erakusten.

(6) Tresna-barra pertsonalizatu

– oinarrizko

Agian ez duzu nahi CKEditor ezaugarri guztiak ematea. gero, zergatik ez toolbar optimizatzeko behar gisa? Adibide bat ona BASIC editore utziz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <head>  
    <script type="text/javascript">
      window.onload = function() {
        CKEDITOR.replace( 'editor1', {
                           Tresna-barra:
                           [
                             { name: 'Basicstyles', elementu : [ 'Bold','Etzana' ] },
                             { name: 'Paragrafo', elementu : [ 'NumberedList','Bulletedlist' ] },
                             { name: 'Tresna', elementu : [ 'Maximizatu','-','Buruz' ] }
                           ]}         
                         );
      };
    </script>
  </head>

– osoa

Jarraian adibide zehatzagoa da. Kendu botoiak ez duzula nahi.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <head>  
    <script type="text/javascript">
      window.onload = function() {
        CKEDITOR.replace( 'editor1', {
                           Tresna-barra: [
                             { name: 'Dokumentu', elementu : [ 'Iturburu','-','Save','NEWPAGE',"DocProps ','Preview','Inprimatu','-','Txantiloiak' ] },
                             { name: 'Arbela', elementu : [ 'Ebaki','Kopiatu','Itsatsi','Past Idatzi','PasteFromWord','-','Desegin','Berregiten' ] },
                             { name: 'Edizio', elementu : [ 'Lortu','Ordezkatu','-','Hautatu guztiak','-','SpellChecker', 'SCAYTi' ] },
                             { name: 'Forma', elementu : [ 'Form', 'Checkbox', 'Radio', 'Testu-eremu', 'Textarea', 'Aukeratu', 'Button', 'ImageButton', 'HiddenField' ] },
                             '/',
                             { name: 'Basicstyles', elementu : [ 'Bold','Etzana','Azpimarratu','Greba','Azpiindizea','Goi-indizea','-','RemoveFormat' ] },
                             { name: 'Paragrafo', elementu : [ 'NumberedList','Bulletedlist','-','Kendu koska','Koska','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
                             { name: 'Lotura', elementu : [ 'Link','Desestekatu','Aingura' ] },
                             { name: 'Txertatu', elementu : [ 'Irudia','Flash','Table','Horizontalrule','Smiley','SpecialChar','PageBreak','Iframe' ] },
                             '/',
                             { name: 'Estilo', elementu : [ 'Estiloak','Formatu','Font','FONTSIZE' ] },
                             { name: 'Kolore', elementu : [ 'TextColor','BGColor' ] },
                             { name: 'Tresna', elementu : [ 'Maximizatu', 'ShowBlocks','-','Buruz' ] }                            
                           ]}         
                         );
      }; 
    </script>
  </head>

– moderatua

Hau da adibide bat apalagoa, tresna barra batekin bakarrik, baina funtsezko ezaugarriak dituzten. Kontuan izan, biak barne, posible da konbinatzeko eta altuera zehazteko eta zabalera editorea.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>  
  <script type="text/javascript">
    window.onload = function() {       
        CKEDITOR.replace( 'editor1', {
                           Tresna-barra:
                           [
                             { name: 'Basicstyles', elementu : [ 'Bold','Etzana','Azpimarratu' ] },
                             { name: 'Paragrafo', elementu : [ 'NumberedList','Bulletedlist' ] },
                             { name: 'Paragrafo', elementu : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
                             { name: 'Estilo', elementu : [ 'Font','FONTSIZE' ] },
                             { name: 'Kolore', elementu : [ 'TextColor','BGColor' ] },
                             { name: 'Arbela', elementu : [ 'Ebaki','Kopiatu','Itsatsi','PasteFromWord','-','Desegin','Berregiten' ] },                             
                             { name: 'Tresna', elementu : [ 'Maximizatu','-','Buruz' ] }
                           ],
                           zabalera: "740px",
                           altuera: "200px"}
                         );
    };
  </script>
</head>

(7) Textarea (CKEditor) osatzen hutsik someter

Zure Textarea bada / CKeditor agertzen white (Hutsik) denean inprimakia aurkezteko, hau erabil dezakezu “artifiziorik” Behean sortu dut, benetan balio CKEditor edukia harrapatzeko eta dagokion Textarea jolastu. Hau da funtzioa deituz egin setCKEditorToTextarea() klik egiten duzunean bidali botoia (aurkeztu ou botoia), onclick gertaera normalean() botoia.

1
2
3
4
5
6
<script type="text/javascript">
      function setCKEditorToTextarea() {
        egiteko(zen instanceName in CKEDITOR.instantzia)
          CKEDITOR.instantzia[instanceName].updateElement();            
      }
</script>

Garatzaileen hitzetan

CKEditor testu editore bat web orrien barnean erabiliko da. WYSIWYG editore bat da, horrek esan nahi du testuaren ari erabiltzaileak editatzen hurbil ahalik argitaratu ahal izango ditu. ekartzen du web komuna edizio ezaugarriak zuen, desktop editatzeko aplikazioak aurkitu, como o Microsoft Word e OpenOffice. Behin CKEditor da menpeko lizentzia “Open Source” eta merkataritza, erabili edozein aplikazio barruan gai zara. Hau garatzaileentzat editore aproposa da, sortutako irtenbide erraza eta indartsua emateko beren erabiltzaile.

beste editoreak

iturri

Hasteko da! Ikusi Garatzaileen gune xehetasun gehiago.

denera: 59312

27 berrikuspen “Piztu TEXTAREA argitaratzaile (WYSIWYG | CKEditor)

  1. Oso cool post, zatian bertan I nahi dio erreferentzia gaia ultilizar 6, html gordeko CKEditor dela arean azaldutako zure edukiak testua aurkeztu beharko e-mail bidez html formatuan kontuan hartuta hala behar BD ere Salver txt formatu berean. Edozein iradokizun daukazu ultilizar dezaket? :)

  2. Ronaldo esan:

    modu, proiektu bat garatzeko naiz eta inprimaki bat bi eremu arean ditu.
    CKEditor erabiltzen dut biak ere.

    erregistro – ezker

    CKEDITOR.replace( 'expedienteEsq’ );
    CKEDITOR.add

    erregistro – eskuineko

    CKEDITOR.replace( 'expedienteDir’ );
    CKEDITOR.add

    Editoreak behar bezala aplikatzen da. Baina prozesua php fitxategia bat osatzeko aurreneko datuak bakarrik daukala eta bigarren hustu egingo.

    CKEditor arazo bat da? ez dudalako erabili bi eremuetako datuak lortu ohi
    .
    iradoki oso gune CKeditor by egitura erabili dut.

    • Olá Ronaldo, proba bat egin nuen hemen, eta ez zen inolako arazorik gabe. Egin hauetako, beheko kodea hartu, fitxategi batean jarri “teste.php” Zure zerbitzariak barruan, baina bere aplikazioa eta hori arazo emanez isolatu. Kontuan izan bi arean formularioa bidaliz (CKEditor), datuen normalean izan da bidali.

      test.php fitxategia (Aldibereko bi TextAreas)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <html>
        <head>
          <izenburua>CKEditor</izenburua>
          <meta content="text/html; charset = utf-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
          <script type="text/javascript">
            window.onload = function()  {
              CKEDITOR.replace( 'editor1' );
              CKEDITOR.replace( 'Editor2' );
           };
          </script>
        </head>
        <body>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">Hasierako balioa 1</textarea>
            <textarea id="editor2" name="editor2">Hasierako 2 balioa</textarea>
            <input type="submit" value="Submit" />
          </inprimaki>  
        </body>
      </html>
      <?php oihartzuna 'editorea 1 ---> '.@$_REQUEST['editor1'].'<br />'; ?>
      <?php oihartzuna 'editorea 2 ---> '.@$_REQUEST['Editor2'].'<br />'; ?>
  3. Ronaldo esan:

    Kodea pasatzen saiatu naiz baina ez da argitaratuko dela uste dut. Baina zer da eskuin arazoa ulertzen? CKEditor erabilera bakarra arean bidaltzen bestera datuak hutsik dago.

    • Ondo da, ulertzen dut uste dut. erakutsia bezala, Ez nuen arazo bera dute. hortaz, berreskanea zure kodea, Ikusten duzu eremu bat baino gehiago egonez gero (Sarrera-) Izen bereko (name). besarkadak!

      • Ronaldo esan:

        erabaki zuen bere punta propioekin I…. (6) Textarea (CKEditor) osatzen hutsik someter

        nahikoa funtzioa jarri Han izan zen eta ondo :) Formulario q vc honek php eskuineko erabilita gainditu da? ari php editore zabaldutako Nahiz orrietan javascript erabiliz.
        aholkuak Eskerrik asko

        aprobetxatuz jakitea q ez da post honen gaia, Java eta .net eta php denbora gutxiago and'm biltzea data duen bihurtze kate batekin denbora luzez programatu I. Ez du zuzeneko funtzioa dute, katea, datu gisa (strtotime) ez? I q u dakit askoz php q I. ezagutzen baduzu atxiloketa hau nire posta bidaltzen ronaldodantas2@gmai.com

        No behar iruzkin hau argitaratzeko. aholkuak Eskerrik asko.

  4. Ola Taylor oso ona bere mezua.

    Dagoeneko instalatutako eta nago lanak ondo erabilita. Zalantzarik ez daukat, Zure blogean adibidez koadroak Idatzitako horiz gidoiak batera. Nola egin zenuen? Eta ckeditor ezaugarri bat?

    eskerrik asko

  5. Fernando esan:

    Nola karaktere berezia gaitu garren egiteko(FIRST 1) e ª(Bigarren 2an) Gu gabe klik TOOL INSERT karaktere berezi ON? Horretarako teklatua sartzeko leihoa ireki NO gustatzen zait.

    • modu, Hemen probatu dut, eta besterik ez ohiko moduan lan egiten duen, bestela esanda, Alt tekla eta idatzi nahi den ikurra dagokion zenbaki-sekuentzia. Adibidez: ALT + 166 = ª e ALT + 167 = º. mintzatu!

  6. James esan:

    egun on, tipo oso ona da zure mezua, orain javascript batekin lan hasten naiz, eta behar testu editore bat sortzeko, pensei em usar o ckeditor, porém to com dificuldade para conseguir manipular ele, tipo só queria que tivesse , salvar, novo, desfazer, refazer, colar, copiar, e uma caixa de escolha de linguagem, só que ao invés de ser a forma de escrita, seria linguagens de programação, e depois teria que manipular os dados recebidos, tipo como um editor de código fonte normal, só que online, se puder me ajudar.

  7. Amigão, eu instalei de boa, mas um probleminha que eu to enfrentando é que ele transforma os caracteres especiais em codigos html tipo o ê â Â Á e eu queria que eles fossem assim mesmo para meu banco de dados, tem como?

    • Opa, isso aí pode ser algo com o editor que você está usando para escrever o código. Tente usar um bloco de notas comum e insira o código HTML completo do exemplo, e veja se o problema permanece.

      Tente também definir diretivas que dizem a sua página qual conjunto charset usar (ISO-8859-1 ou UTF-8).

      1
      2
      3
      4
      5
      
      <body>
        <head>
            <meta charset="UTF-8">
        </head> 
      ...

      Se está usando PHP, defina o charset no início do código, antes de qualquer coisa:

      1
      
        <?php header("Content-Type: text/html;  charset=ISO-8859-1",egia) ?>

      Ou ainda, tente tratar o conteúdo das requisições usando o charset correto:

      1
      
        htmlentities( utf8_decode($Bi_dali['variable']) );

      O fato é que o problema que você citou não parece ser do CKEditor, até por que eu uso ele em várias aplicações e não tenho problema algum com caracter especial. Testei também o DEMO no Site do desenvolvedor, e não vi problema. Veja aí: http://ckeditor.com/demo

  8. Marcio esan:

    Boa tarde estou tentado pegar o texto escrito no textArea via javascript para enviar para o banco de dados mas não estou conseguindo, tem algum método para pegar o texto?
    eskerrik asko

  9. Boa tarde.
    Estou pensando em usar este dispositivo para receituário médicoalgo muuuito simples mesmo.
    Queria saber como configurar para a barra superior (onde fica as funcionalidades) se ocultar (tipo um botãozinho que faça ela desaparecer após editar o texto)
    Também como faço para sumir com a barra inferior (onde aparecebodye outros tags) ?
    Como eu torno a caixa de texto com um “altuera” automático: tipo, se eu prescrever 10 medicações a caixa vai encompridando enquanto eu for digitandoSe eu digitar apenas 1 medicação a caixa fica na altura do que eu digitar

    • Kaixo, desculpe, havia alguns cortes (falhas) no seu código, por isso acabei removendo-o.

      Com relação a isso que você precisa, é perfeitamente possível, mas sugiro procurar algum profissional que entenda de JavaScript para ajudá-lo.

      Vou apenas dizer o caminho das pedras:

      Ocultar barra de ferramenta (Tresna-barra):

      1
      2
      3
      
      zen editor = CKEDITOR.inline( 'editor1', {
          removePlugins: 'toolbar'
      } );

      Ocultar rodapé (elementspath):
      http://ckeditor.com/forums/CKEditor-3.x/Disabling-Elements-Path-Display

      Aumentar altura automaticamente (autogrow):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (demonstração)

      Adibidez:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      
      <html>
        <head>
          <izenburua>CKEditor</izenburua>
          <meta edukirik="text/html; charset = utf-8" http-equiv="content-type" />
          <script src="http:////cdn.ckeditor.com/4.5.3/basic/ckeditor.js"></script>
          <script src="plugin.js"></script>  <!-- obter plugin.js em http://ckeditor.com/addon/autogrow -->  
          <script type="text/javascript">
           window.onload = function()  {
              CKEDITOR.replace( 'editor1', {             
                  removePlugins: 'elementspath', 
                  removePlugins: 'toolbar',
                  extraPlugins: 'autogrow',
                  autoGrow_minHeight: 70,
                  altuera: '70px'
              });
           };
          </script>
        </head>
        <body>
          <formulario ekintza="request.php" Metodo="post">
            <textarea id="editor1" name="editor1">Texto inicial.</textarea>
            <Sarrera-mota="submit" balio="Submit" />
          </inprimaki>  
        </body>
      </html>
  10. odilon esan:

    não consigo inserir o texto no banco de dados de forma correta, pois fica tudo estranho

    ex:
    <p>&aacute; &eacute; &iacute;asd</p>
    á é

  11. Claudio esan:

    Olá Taylor, parabéns pelo post muito bem explicado. Desejo usar esse editor em uma aplicação PHP e gostaria de saber como criar um combo (ou botao) na toolbar que trouxesse dados do BD para inserir no texto? bestela esanda, ao clicar em um botão abriria uma caixa de diálogo com o resultado de uma consulta no banco para selecionar um registro.
    É possível?

  12. Glaydison Silva esan:

    Kaixo, ótimo post. Poderia sugerir um novo post? Preciso de ajuda para implementar um botão para upload de imagens, igual à DEMO onde é possível subir para o servidor e tal. Não consigo de jeito nenhum.

Utzi erantzuna

Zure e-posta helbidea ez da argitaratuko. Beharrezko eremuak markatuta daude *