Transforme TEXTAREA em editor (WYSIWYG | CKEditor)

Aí vai uma ajuda rápida para você integrar o CKEditor com suas aplicações Web em apenas três passos.

presintaasje

turn jo tags Textarea op in web editor is net mear in yngewikkeld taak. Under de protte redakteuren dat kinne jo fine op it ynternet, wy sjogge of do brûke CKEditor. Sjoch de bewurker yn aksje dit DEMO.

ynstallaasje

Download de CKEditor yn http://ckeditor.com/download. De ferzje brûkt yn dit post wie 3.6.4, de 17 Jul 2012. Extract de triem ckeditor_3.6.4.zip mei jo applikaasje. in map ckeditor It sil oanmakke wurde. gau, No krekt meitsje in oprop binnen jo boarnekoade!

yntegraasje

De CKEditor is in JavaScript applikaasje. Te lêzen dat, krekt meitsje in ienfâldige oprop om him yn 'e tags HEAD fan jo boarne koade. dien dit, API CKEditor JavaSkript is al klear foar gebrûk. Tink derom en oanpasse it paad fan 'e triem ckeditor.js nei de map wêr jo Unzipped.

stap 1 – Meitsje de oprop oan CKEditor
1
2
3
  <holle>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></skrift>
  </holle>
stap 2 – Meitsje in Textarea fjild
1
2
3
  <lichem>
    <Textarea id="editor1" namme="editor1">&lt;p&gt;initial wearde.&lt;/p&gt;</Textarea>
  </lichem>
stap 3 – Sizze wat Textarea (id) It sil ferfongen wurde troch CKEditor
1
2
3
4
5
6
7
  <holle>
    <script type="text/javascript">
      finster.onload = funksje()  {
        CKEDITOR.ferfange( 'Editor1' );
      };
    </skrift>    
  </holle>

gau, al wurket! leaut net? salve, der jaan “F5” yn de blêder en sjoch foar dysels… folsleine code sjocht as dit:

complete koade

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
  <holle>
    <titel>CKEditor</titel>
    <meta content="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></skrift>
    <script type="text/javascript">
      finster.onload = funksje()  {
        CKEDITOR.ferfange( 'Editor1' );
     };
    </skrift>
  </holle>
  <lichem>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&lt;p&gt;Initial wearde.&lt;/p&gt;</Textarea>
      <input type="submit" value="Submit" />
    </foarm>  
  </lichem>
</html>

dúdlik, no jim moatte om oanpassingen as jo applikaasje, om te begjinnen it ynstellen fan de aksje jo FORM, tsjut de side dy't sil heljen en ferwurkje de gegevens yntsjinne fia POST.

It artikel einiget hjir, mar ik lit in pear mear pearels foar it nijsgjirrich:

tips

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

As jo ​​tawize de klasse “ckeditor” oan jo Textarea, sûnt it sil automatysk omsetten yn in CKEditor, sûnder te brûken it skript neamd troch barren “onload”, en simpel:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
  <holle>
    <titel>CKEditor</titel>
    <meta ynhâld="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></skrift>
  </holle>
  <lichem>
    <foarm aksje="request.php" metoade="post">
      <Textarea class="ckeditor" id="editor1" namme="editor1">&lt;p&gt;initial wearde.&lt;/p&gt;</Textarea>
      <input type="submit" wearde="Submit" />
    </foarm>  
  </lichem>
</html>

(2) Change line break <p> troch <br />

Ik fernaam twa manieren om te wikseljen P by BR doe't teclamos ENTER. de earste, It is om de parameter enterMode mei wearde 2, sûnt 1 = P, 2 BR en = 3 = DIV.

1
2
3
4
5
6
7
  <holle>  
    <script type="text/javascript">
      finster.onload = funksje() {
        CKEDITOR.ferfange( 'Editor1', {enterMode: Nûmer(2)} );
      };
    </skrift>
  </holle>

of, iepenje de triem config.js en beskiede wat as:

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

yn dit gefal, te type ENTER, Wy hawwe opsjes:
CKEDITOR.ENTER_P - nije alinea P is makke;
CKEDITOR.ENTER_BR - line brek mei BR;
CKEDITOR.ENTER_DIV - nije blok is makke mei DIV.

Ik riede tichtby en iepenje de blêder om te sjen it resultaat

dit feroaring, om't it ding kin cached! As it dan noch net wurkje, dúdlik de blêder lytsûnthâld.

(3) Feroarje de eftergrûn kleur fan de CKEditor arkbalke

As jo ​​opfallen, kinne wy ​​meitsje feroarings yn ús CKEditor it tawizen fan parameters streekrjocht nei CKeditor foarwerp of fia triem config.js. dêrom, Ik sil sjen litte krekt ien fan de wizen:

1
2
3
4
5
6
7
  <holle>  
    <script type="text/javascript">
      finster.onload = funksje() {
        CKEDITOR.ferfange( 'Editor1', {uicolor: '# Ff0000'} );
      };
    </skrift>
  </holle>

(4) Kombinearjen de CKEditor konfiguraasje parameters

De CKEditor konfiguraasje parameters kinne wurde kombinearre. Om witte de mooglikheden, nimme ek ris op API Config. foarbyld:

1
2
3
4
5
6
7
8
9
10
11
12
  <holle>  
    <script type="text/javascript">
      finster.onload = funksje() {
        CKEDITOR.ferfange( 'Editor1', {  uicolor: 'CCC',
                                        enterMode: CKEDITOR.ENTER_P,
                                        customConfig : 'Ckeditor / outroConfig.js',
                                        taal: 'Pt-br'        
                                      } 
                        );
      };
    </skrift>
  </holle>

(5) Talen stipe troch CKEditor

O CKEditor side 58 talen, inclusive of “pt-br”. sjoch mear Brûker omjouwing talen. It boppesteande foarbyld lit syn brûken.

(6) It oanpassen fan de arkbalke

– basic

Mooglik beskikke jo net wolle biede alle funksjes fan CKEditor. doe, wêrom net optimalisearjen de arkbalke as nedich? Hjir is in foarbyld leaving goed BASIC editor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <holle>  
    <script type="text/javascript">
      finster.onload = funksje() {
        CKEDITOR.ferfange( 'Editor1', {
                           arkbalke:
                           [
                             { namme: 'Basicstyles', items : [ 'Fet','Italic' ] },
                             { namme: 'paragraaf', items : [ 'NumberedList','BulletedList' ] },
                             { namme: 'Tools', items : [ 'Maksimalisearje','-','Oer' ] }
                           ]}         
                         );
      };
    </skrift>
  </holle>

– fol

Hjirûnder is in foarbyld mear FULL. Fuortsmite de knoppen dat jo net wolle dat.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <holle>  
    <script type="text/javascript">
      finster.onload = funksje() {
        CKEDITOR.ferfange( 'Editor1', {
                           arkbalke: [
                             { namme: 'dokumint', items : [ 'Boarne','-','Rêde','Newpage','DocProps','Preview','Ôfdrukke','-','Templates' ] },
                             { namme: 'Klamboerd', items : [ 'Snije','Kopy','Plakke','Nomulwurd tekst','PasteFromWord','-','Ungedien meitsje','Redo' ] },
                             { namme: 'Editing', items : [ 'Fine','Ferfange','-','Selektearje Alles','-','Staveringshifker', 'Scayt' ] },
                             { namme: 'Foarmen', items : [ 'Foarm', 'Checkbox', 'Radio', 'Tekst fjild', 'Textarea', 'Útkieze', 'Button', 'ImageButton', 'HiddenField' ] },
                             '/',
                             { namme: 'Basicstyles', items : [ 'Fet','Italic','Ûnderstreekje','Slaan','Skreaun','Superscript','-','RemoveFormat' ] },
                             { namme: 'paragraaf', items : [ 'NumberedList','BulletedList','-','Utsprong','Ynspringe','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
                             { namme: 'Links', items : [ 'Link','Ûntkeppelje','Anker' ] },
                             { namme: 'ynfoegje', items : [ 'Byld','Flits','Tafel','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
                             '/',
                             { namme: 'Styles', items : [ 'Styles','Formaat','Lettertype','Letter grutte' ] },
                             { namme: 'Kleuren', items : [ 'TextColor','Bgcolor' ] },
                             { namme: 'Tools', items : [ 'Maksimalisearje', 'ShowBlocks','-','Oer' ] }                            
                           ]}         
                         );
      }; 
    </skrift>
  </holle>

– tuskenbeiden

Dat is ien mear foarbyld Moderat, mei in helpmiddel bar allinne, mar mei de kaai funksjes. Tink derom dat, inclusive, Jo kinne kombinearje en bepale de hichte en breedte fan de bewurker.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<holle>  
  <script type="text/javascript">
    finster.onload = funksje() {       
        CKEDITOR.ferfange( 'Editor1', {
                           arkbalke:
                           [
                             { namme: 'Basicstyles', items : [ 'Fet','Italic','Ûnderstreekje' ] },
                             { namme: 'paragraaf', items : [ 'NumberedList','BulletedList' ] },
                             { namme: 'paragraaf', items : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
                             { namme: 'Styles', items : [ 'Lettertype','Letter grutte' ] },
                             { namme: 'Kleuren', items : [ 'TextColor','Bgcolor' ] },
                             { namme: 'Klamboerd', items : [ 'Snije','Kopy','Plakke','PasteFromWord','-','Ungedien meitsje','Redo' ] },                             
                             { namme: 'Tools', items : [ 'Maksimalisearje','-','Oer' ] }
                           ],
                           width: "740px",
                           hichte: "200px"}
                         );
    };
  </skrift>
</holle>

(7) Textarea (CKEditor) lege by it yntsjinjen fan de foarm

As jo ​​Textarea / CKeditor ferskine wyt (leech) by it yntsjinjen fan de foarm, Jo kinne gebrûk meitsje fan dit “artifice” Ik makke ûnder, dy't eins tsjinnet om de ynhâld fan CKEditor en spylje de byhearrende Textarea. Dit wurdt dien troch ropt de funksje setCKEditorToTextarea() as jo klikke op de knop te stjoeren (submit ou knop), onclick barren net normaal() knop.

1
2
3
4
5
6
<script type="text/javascript">
      funksje setCKEditorToTextarea() {
        foar(wie instanceName yn CKEDITOR.instances)
          CKEDITOR.instances[instanceName].updateElement();            
      }
</skrift>

Untwikkelder fan wurden

CKEditor is in tekst bewurker te brûkt wurde binnen websiden. It is in WYSIWYG bewurker, wat betsjut dat de tekst wurdt bewurke troch de brûker sil sa ticht mooglik by de publisearre. Hy bringt oan it web mienskiplike editing funksjes, fûn op buroblêd editing applikaasjes, como o Microsoft Word e OpenOffice. Sadree't de CKEditor is available under fergunnings “Iepen Boarne” en kommersjeel, Jo kinne gebrûk meitsje fan it binnen eltse applikaasje. Dit is de ideale bewurker foar ûntwikkelers, skepen te foarsjen maklik en krêftige oplossings foar harren brûkers.

oare redakteuren

boarnen

Foar starters dit is! Sjoch de ûntwikkelders fan webside foar details.

Totaal oantal hits: 58778

27 resinsjes “Transforme TEXTAREA em editor (WYSIWYG | CKEditor)

  1. Tige cool post, it part nei dêr't ik winskje ultilizar giet nei it ûnderwerp 6, jûn dat de CKEditor bewarre yn html syn ynhâld beskreaun yn it Textarea moatte yntsjinje de tekst fia e-mail mei html lykwols nedich salver yn BD yn txt format itselde. Jo hawwe gjin suggestjes ik kin ultilizar? :)

  2. Ronaldo sei:

    wei, Ik bin it ûntwikkeljen fan in projekt en in foarm hat twa Textarea fjilden.
    Ik bin mei help fan CKEditor yn beide.

    record – lofts

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

    record – rjochts

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

    De bewurker wurdt tapast goed. Mar doe't it proses foarmje in php triem is allinnich krijt de earste gegevens fjild en it twadde sil leegje.

    It is in probleem mei CKEditor? want as jo net brûke krij ik gegevens út twa fjilden meastentiids
    .
    Ik brûkte de struktuer suggerearre troch de tige site CKeditor.

    • hallo Ronaldo, Ik die in test hjir en dêr wie gjin probleem. Doch de folgjende, nimme de code hjirûnder, set yn in triem “teste.php” binnen jo tsjinner, mar isolearre út syn tapassing dy't jaan probleem. Tink derom dat troch it ynstjoeren fan it formulier mei twa Textarea (CKEditor), de gegevens wurdt normaal ferstjoerd wurde.

      test.php triem (TWO simultane textareas)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <html>
        <holle>
          <titel>CKEditor</titel>
          <meta content="text/html; charset = utf-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></skrift>
          <script type="text/javascript">
            window.onload = funksje()  {
              CKEDITOR.replace( 'Editor1' );
              CKEDITOR.replace( 'Editor2' );
           };
          </skrift>
        </holle>
        <lichem>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">Initial Value 1</Textarea>
            <textarea id="editor2" name="editor2">Initial wearde 2</Textarea>
            <input type="submit" value="Submit" />
          </foarm>  
        </lichem>
      </html>
      <?php echo 'Redakteur 1 ---> '.@$_FERSYK['Editor1'].'<br />'; ?>
      <?php echo 'Redakteur 2 ---> '.@$_FERSYK['Editor2'].'<br />'; ?>
  3. Ronaldo sei:

    Ik besocht te gean de koade, mar ik tink dat it is net publisearre. Mar jim begripe wat it rjocht probleem? Brûk CKEditor mar ien fan de Textarea stjoert gegevens nei in oar is leech.

      • Ronaldo sei:

        Ik besleat mei syn eigen tip…. (6) Textarea (CKEditor) lege by it yntsjinjen fan de foarm

        Bastou colocar a função lá e ok :) Essa forma q vc passou é usando php né? Sels de siden dy't ynset yn php editor brûke javascript.
        Tank foar de tips

        nimmen foardiel fan dat witten q is net it ûnderwerp fan de post, Ik programmearje in lange tiid mei java en .net en php minder tiid en ik oppakken datearre bekearing ta it string. It hat gjin direkte funksje, as foar gegevens string (strtotime) gjin? Ik q vc witte folle php q I. As jo ​​witte dat arrestaasje stjoert nei myn e-mail ronaldodantas2@gmai.com

        Gjin needsaak om te publisearjen dizze reaksje. Tank foar de tips.

  4. Hello Taylor tige goed syn post.

    Al ynstallearre en bin mei help fan wurken goed. Ik haw in spoar fan twivel, bygelyks yn jo blog jo ynfierd de doazen yn giel mei skripts. As dy die it? En in funksje fan ckeditor?

    tankewol

  5. fernando sei:

    Hoe kin ik wolle it bysûndere karakter fan de th(FIRST 1) e ª(TWADDE 2nd) Sûnder US klik op TOOL INSERT Character SPECIAL? Wolle jo DO THIS BY yngong EIGEN KEYBOARD MEI GJIN FINSTER OPEN.

    • wei, Ik hifke hjir en krekt dwaan de konvinsjonele wize dat wurket, yn oare wurden, hâld del de ALT kaai en typ de folchoarder fan de nûmers oerienkomme mei it winske symboal. foarbyld: ALT + 166 = ª e ALT + 167 = º. spriek!

  6. james sei:

    goede moarn, tige goed guy jo post, Ik bin begjinne te wurkjen mei javascript no, en om moatte meitsje in tekst bewurker, Ik tocht fan mei help fan ckeditor, mar nei dreech te krijen omgean it, type allinne winskje it hie , bewarje, nij, werom sette, remake, ketting, kopy, en in taal seleksje box, mar ynstee wurde skreaun as, soe wêze programmapartners talen, en dan moast manipulearje de ûntfongen data, type as in normale boarne koade editor, allinnich online, as jo kinne helpe my.

  7. Amigão, Ik ynstallearre goed, mar in lyts probleem wat ik konfrontearre mei dat it feroaret de bysûndere tekens yn html koades type is de â â Á en ik woe har te wêzen as dat oan myn database, hat de?

    • opa, dat der miskien wat mei de bewurker jo te skriuwen koade. Besykje mei help fan in blok fan mienskiplike oantekenings en typ de folsleine HTML koade foarbyld, en sjen oft it probleem bliuwt.

      Besykje ek belied, dat sizze jo side dy't charset ynsteld om te brûken (ISO-8859-1 ou UTF-8).

      1
      2
      3
      4
      5
      
      <lichem>
        <holle>
            <meta tekenset="UTF-8">
        </holle> 
      ...

      As jo ​​PHP, set de tekenset oan it begjin fan de koade, foar alles:

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

      of, besykje te behannelje de ynhâld fan de fersiken mei help fan de goede tekenset:

      1
      
        htmlentities( utf8_decode($_PEAL['Fariabele']) );

      It feit is dat it probleem dat jo oanhelle net liket te wêzen de CKEditor, oan wêrom't ik brûk it yn ferskate tapassings en ik haw gjin probleem mei spesjale tekens. ek hifke de DEMO op de ûntwikkelders fan webside, en net sjen probleem. sjoch hjir: http://ckeditor.com/demo

  8. Marcio sei:

    Goeiemiddei Ik besykje om de tekst skreaun yn Textarea fia javascript te stjoeren nei de databank, mar ik kin net, It hat wat metoade om de tekst?
    tankewol

  9. goede middei.
    Ik plan op mei help fan dit apparaat oan medyske prescription – wat sooooo sels ienfâldige.
    – Ik woe witte hoe te setten foar de top bar (wêr is de funksjes) wurde ferburgen (as in lytse knop dat makket it ferdwine nei it bewurkjen fan de tekst)
    – Ek hoe ik gean fuort mei de boaiem bar (dat ferskynt “lichem” en oare tags) ?
    – Hoe kin ik meitsje in tekst doaze mei in “hichte” automatyske: type, as ik foarskriuwe 10 medisinen de doaze sil verlenging wylst ik bin typen… As ik krekt type 1 medicatie box is op 'e tiid fan I type…

    • Hello, sorry, der wiene in pear besunigings (mislearre) yn jo koade, dus ik einige op it fuortheljen fan it.

      Oangeande wat jo nedich, it is folslein mooglik, mar ik suggest op syk nei in profesjonele dy't ferstiet JavaScript oan helpe jo.

      Ik sil krekt fertelle de touwen:

      – Hide Arkbalke (arkbalke):

      1
      2
      3
      
      wie redakteur = CKEDITOR.inline( 'Editor1', {
          removePlugins: 'Toolbar'
      } );

      – hide footer (elementspath):
      http://ckeditor.com/forums/CKEditor-3.x/Disabling-Elements-Path-Display

      – Fergrutsje hichte automatysk (autogrow):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (demonstraasje)

      foarbyld:

      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>
        <holle>
          <titel>CKEditor</titel>
          <meta ynhâld="text/html; charset = utf-8" http-equiv="content-type" />
          <script src="http:////cdn.ckeditor.com/4.5.3/basic/ckeditor.js"></skrift>
          <script src="plugin.js"></skrift>  <!-- get plugin.js em http://ckeditor.com/addon/autogrow ->  
          <script type="text/javascript">
           finster.onload = funksje()  {
              CKEDITOR.ferfange( 'Editor1', {             
                  removePlugins: 'Elementspath', 
                  removePlugins: 'Toolbar',
                  extraPlugins: 'Autogrow',
                  autoGrow_minHeight: 70,
                  hichte: '70px'
              });
           };
          </skrift>
        </holle>
        <lichem>
          <foarm aksje="request.php" metoade="post">
            <Textarea id="editor1" namme="editor1">initial tekst.</Textarea>
            <input type="submit" wearde="Submit" />
          </foarm>  
        </lichem>
      </html>
  10. Claudio sei:

    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? yn oare wurden, 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?

  11. Glaydison Silva sei:

    Hello, great post. Koe ik suggerearje in nije post? I need help te fieren in knop te laden ôfbyldings, DEMO gelyk oan dêr't jo terjochte kinne oant de tsjinner en sokke. Ik kin hielendal net.

Leave a Reply

Jo e-mailadres wurdt net publisearre wurde. Ferplichte fjilden binne markearre mei *