Tendeukai TEXTAREA muparidzi (WYSIWYG | CKEditor)

Heunoi nokukurumidza rubatsiro iwe nokusangana CKEditor kwavo Web zvikumbiro matanho matatu chete.

mupiro

mufunge Tags TEXTAREA uri Web mupepeti hakuchisiri kuoma basa. Pakati vapepeti zvakawanda zvaunogona kuwana paIndaneti, regai tione kana kuita kushandisa CKEditor. Ona mupepeti ruchiratidzwa ichi Demo.

kugadzwa

Kopa CKEditor mu http://ckeditor.com/download. Shanduro akashandiswa this post yakanga 3.6.4, pamusoro 17 Jul 2012. Dzokubvisa faira ckeditor_3.6.4.zip pamwe Chikumbiro chenyu. mumwe forodha ckeditor vachapiwa akasika. nokukurumidza, Zvino chete kuti kudanwa mukati kwaunowana yekubvuma!

kusangana

The CKEditor ari JavaScript kushanda. Kuriverenga, chete kuti iri nyore kudanwa kwaari Tags Musoro kwaunowana remitemo. izvi, 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.

danho 1Faça a chamada ao CKEditor
1
2
3
  <head>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  </head>
danho 2Crie um campo TEXTAREA
1
2
3
  <body>
    <textarea id="editor1" zita="editor1">&lt;p&gt;Valor inicial.&lt;/p&gt;</textarea>
  </body>
danho 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>

nokukurumidza, já funciona! haatendi? Salve, dê lá oF5no navegador e veja você mesmoo código completo fica assim:

Código completo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
  <head>
    <title>CKEditor</title>
    <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" />
    </fomu>  
  </body>
</html>

pachena, zvino unofanira kuchinja sezvo kushanda yako, kutanga Ndokunyengetererai chiito kwenyu FOMU, inotaridza peji ichaita dzosa uye dzinoona mashoko vakabvuma Via POST.

Nyaya inoguma pano, asi Ndichange kusiya zvimwe maparera shoma nokuda kuziva:

mazano

(1) Shemu evento onload, ru mukirasi =”ckeditor”

Kana basa boka “ckeditor” kuti textarea yako, rwoga achange mudzoke kunyika CKEditor, asina kushandisa manyorero rakatumidzwa chiitiko “onload”, uye nyore:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
  <head>
    <title>CKEditor</title>
    <Meta gutsikana="text/html; charset=utf-8" http:-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  </head>
  <body>
    <chimiro chiito="request.php" nzira="post">
      <textarea kirasi="ckeditor" id="editor1" zita="editor1">&lt;p&gt;Valor inicial.&lt;/p&gt;</textarea>
      <chiyamuro mhando="submit" ukoshi="Submit" />
    </fomu>  
  </body>
</html>

(2) Exchange mutsetse kwemasikati <p> kubudikidza <<br> />

Ndakaona nzira mbiri kuchinja nokuda P BR apo teclamos KUPINDA. wokutanga, Zviri kugadza parameter enterMode pamwe ukoshi 2, kubva 1 = P, 2 = BR uye 3 = DIV.

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

kana, kuzarura faira config.js uye tsanangura zvakafanana:

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

muchiitiko ichi, kutaipa KUPINDA, Tine mikana:
CKEDITOR.ENTER_P - itsva ndima P akasikwa;
CKEDITOR.ENTER_BR - mutsetse kumbozorora pamwe BR;
CKEDITOR.ENTER_DIV - misa mutsva akasikwa pamwe DIV.

I vanokurudzira pedyo uye kuzarura Browser kuona mugumisiro

uku, nekuti unogona kuzvipinza Zvakachengetwa kare! Kana zvakadaro zvikasashanda, kubvisa Browser cache.

(3) Kushandura nechekumashure Ruvara CKEditor Toolbar

Sezvo ukacherechedza, Tinogona kuchinja edu CKEditor rakavapa parameters zvakananga ckeditor chinhu kana Via faira config.js. saka, Ndinenge kunyatsoratidza imwe nzira:

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

(4) Tikatora CKEditor configuration parameters

The CKEditor configuration parameters dzinogona kubatanidzwa. Kuziva mikana, tora Kutarira API Config. muenzaniso:

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',
                                        mutauro: 'PT-<br>'        
                                      } 
                        );
      };
    </script>
  </head>

(5) Languages ​​vachitsigirwa CKEditor

O CKEditor suporta 58 mitauro, sanganisira kana “PT-<br>”. Ona zvakawanda User inowanikwa mumitauro. Muenzaniso pamusoro chinoratidza kushandiswa kwayo.

(6) Customizing ari Toolbar

– zvinhu

Unogona asingadi kupa zvose zvinoitwa CKEditor. ndokubva, wadii optimize ari Toolbar sezvinodiwa? Muenzaniso vachisiya zvakanaka Basic mupepeti.

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', {
                           Toolbar:
                           [
                             { zita: 'Basicstyles', zvinhu : [ 'Bold','Italic' ] },
                             { zita: 'Ndima', zvinhu : [ 'NumberedList','BulletedList' ] },
                             { zita: 'Ezvemutauro', zvinhu : [ 'Maximize','-','About' ] }
                           ]}         
                         );
      };
    </script>
  </head>

– azere

Below ndiwo muenzaniso zvizere. Bvisai mabhatani kuti iwe haudi.

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', {
                           Toolbar: [
                             { zita: 'Gwaro', zvinhu : [ 'Source','-','Save','NewPage',"DocProps ','Preview','Print','-','Templates' ] },
                             { zita: 'Clipboard', zvinhu : [ 'Chekai','Copy','Namatidza','Past Text','PasteFromWord','-','Rokukunda','Redo' ] },
                             { zita: 'Fora', zvinhu : [ 'Tsvaka','Tsiva','-','Sarudza zvose','-','SpellChecker', 'Scayt' ] },
                             { zita: 'Siyana', zvinhu : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Sarudza', 'Button', 'ImageButton', 'HiddenField' ] },
                             '/',
                             { zita: 'Basicstyles', zvinhu : [ 'Bold','Italic','Underline','Urayai','Subscript','Superscript','-','RemoveFormat' ] },
                             { zita: 'Ndima', zvinhu : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
                             { zita: 'Links', zvinhu : [ 'Link','Unlink','Anchor' ] },
                             { zita: 'Pinza', zvinhu : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
                             '/',
                             { zita: 'Kuno-', zvinhu : [ 'Styles','Format','Font','FontSize' ] },
                             { zita: 'Mavara', zvinhu : [ 'TextColor','BGColor' ] },
                             { zita: 'Ezvemutauro', zvinhu : [ 'Maximize', 'ShowBlocks','-','About' ] }                            
                           ]}         
                         );
      }; 
    </script>
  </head>

– eresera

Uyu muenzaniso mumwe mwero, aine sando bhaa chete, asi iine kiyi zvinhu. Cherechedza kuti, sanganisira, zvinokwanisika chokubatanidza uye kuziva kukwirira uye upamhi Editor.

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', {
                           Toolbar:
                           [
                             { zita: 'Basicstyles', zvinhu : [ 'Bold','Italic','Underline' ] },
                             { zita: 'Ndima', zvinhu : [ 'NumberedList','BulletedList' ] },
                             { zita: 'Ndima', zvinhu : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
                             { zita: 'Kuno-', zvinhu : [ 'Font','FontSize' ] },
                             { zita: 'Mavara', zvinhu : [ 'TextColor','BGColor' ] },
                             { zita: 'Clipboard', zvinhu : [ 'Chekai','Copy','Namatidza','PasteFromWord','-','Rokukunda','Redo' ] },                             
                             { zita: 'Ezvemutauro', zvinhu : [ 'Maximize','-','About' ] }
                           ],
                           upamhi: "740px",
                           urefu: "200px"}
                         );
    };
  </script>
</head>

(7) Textarea (CKEditor) pasi kunyorwa kuumba

Kana Textarea rako / CKeditor kuonekwa chena (chinhu) kana pasi chimiro, unogona kushandisa izvi “artifice” I akasika pazasi, izvo chaizvoizvo ari kushumira kubata zviri CKEditor uye kuridza runoenzanirana Textarea. Izvi zvinoitwa kushevedza mashandiro setCKEditorToTextarea() kana iwe tinya Tumira bhatani (bvuma ou bhatani), onclick chiitiko waasingawanzoshandisi() bhatani.

1
2
3
4
5
6
<script type="text/javascript">
      function setCKEditorToTextarea() {
        nokuti(aiva instanceName mu CKEDITOR.Muzviitiko)
          CKEDITOR.Muzviitiko[instanceName].updateElement();            
      }
</script>

Developer mashoko

CKEditor ari chinyorwa mupepeti kushandiswa mukati padandemutande mapeji. Chinhu WYSIWYG mupepeti, izvo zvinoreva kuti rugwaro kuitwa rakapepetwa inodzidzisa achava sezvo pedyo sezvinobvira kuti akabudiswa. Iye Zvinounza padandemutande vanhuwo fora zvinhu, kuwanikwa yagadzirwa pa-desktop fora zvikumbiro, Como O Microsoft Word, e OpenOffice. Kana CKEditor iri marezinesi pasi marezinesi “Open Source” uye vezvokutengeserana, uchikwanisa kurishandisa mukati chero kushanda. Ndiwo yakanaka mupepeti nokuda Developers, akasikwa kuti ape nyore uye simba mhinduro kune vanoshandisa dzavo.

dzimwe vapepeti

matura

Nokuti Mutange zviri! Ona yokuvaka kuti nzvimbo zvakawanda.

Uwandu kwakafanorongwa: 58776

27 Wongororo “Tendeukai TEXTAREA muparidzi (WYSIWYG | CKEditor)

  1. Very tonhorera romukova, chikamu icho ndinoda ultilizar zvinoreva nyaya 6, tikafunga kuti CKEditor vakaponeswa HTML kugutsikana kwako inorondedzerwa textarea vanofanira kuzviisa rugwaro Via e-mail pamwe HTML youduku Zvisinei vanoda salver muna BD mu TXT pamanyorerwo chete. Une chero mazano Ndinogona ultilizar? :)

  2. Ronaldo akati:

    nzira, Ndiri kuva chirongwa uye chimiro ane minda maviri textarea.
    Ndiri kushandisa CKEditor mune zvose.

    rekodhi – akasiya

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

    rekodhi – kodzero

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

    The mupepeti rikashandiswa nemazvo. Asi kana izvi kuumba PHP faira chete anopiwa wokutanga munda Data uye wechipiri achaita zviri.

    Idambudziko pamwe CKEditor? nekuti handina kuishandisa kuwana mashoko kubva kuminda maviri kazhinji
    .
    Ndaishandisa nemamiriro chinorehwa nemashoko chaizvo nzvimbo CKeditor.

    • Ola Ronaldo, Ndakaita kuongororwa pano uye hapana dambudziko. Ita zvinotevera, tora bumbiro remitemo pazasi, kuiswa faira “teste.php” mukati Server yako, asi kure kushandisirwa riri kupa dambudziko. Tapota ona kuti nokuzviisa pasi chimiro maviri textarea (CKEditor), humboo anowanzotumirwa kutumwa.

      test.php faira (Mawa TextAreas MBIRI)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <html>
        <head>
          <title>CKEditor</title>
          <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">Initial Kukosha 1</textarea>
            <textarea id="editor2" name="editor2">Initial ukoshi 2</textarea>
            <input type="submit" value="Submit" />
          </fomu>  
        </body>
      </html>
      <?PHP ungira 'Editor 1 ---> '.@$_REQUEST['editor1'].'<<br> />'; ?>
      <?PHP ungira 'Editor 2 ---> '.@$_REQUEST['Editor2'].'<<br> />'; ?>
  3. Ronaldo akati:

    Ndakaedza zvakaitika bumbiro remitemo asi ndinofunga kuti haina rakabudiswa. Asi iwe kunzwisisa chii zvakarurama dambudziko? CKEditor kushandisa chete mumwe textarea anotumira mashoko kune mumwe chinhu.

    • Ok, Ndinofunga kunzwisisa. Sezvaratidzwa pamusoro apa, Ndakanga ndisina dambudziko iroro. saka, rescan Bumbiro yako, ona kana hauna kupfuura mumwe munda (chiyamuro) pamwe chete zita (zita). kumbundirana!

      • Ronaldo akati:

        Ndakasarudza ake muromo…. (6) Textarea (CKEditor) pasi kunyorwa kuumba

        Zvakanga zvakakwana kuisa mashandiro ikoko uye OK :) Izvi fomu Q VC akapfuura kushandisa PHP kodzero? Kunyange mapeji vari kutumirwa PHP mupepeti uchishandisa JavaScript.
        Tinotenda kuti mazano

        kushandisa Kuziva Q haisi nyaya pambiru, I chirongwa kwenguva refu kuJava uye .com uye PHP shoma nguva and'm kunonga yazvakanyorwa kutendeuka tambo. Haina rakananga basa, nekuti tambo Data (strtotime) kana? Ini Q kuziva zvakawanda PHP Q I. Kana uchiziva kusungwa uyu zvaatuma shoko rangu Email ronaldodantas2@gmai.com

        No vanofanira kubudisa mashoko ichi. Tinotenda kuti mazano.

  4. Ola Taylor yakanaka chaizvo pambiru yake.

    Akatogadza uye ndiri kushandisa mabasa zvakanaka. Ndine mubvunzo, somuenzaniso muna Blog kwenyu panovigwa mabhokisi ari yeyero pamwe mumanyoro. Sei makazviitira? Uye rutivi ckeditor?

    ndatenda

  5. Fernando akati:

    Magadzirirwo rinokosha mutambi akwanise fung(FIRST 1) E ª(SECOND 2nd) PASINA US CLICK ON RUNOBATSIRA dzinoisa ZVIKURU REMUNHU? I kuita IZVI KUPINDA BASA CHANGU Keyboard ANOSHAYA hwindo VHURA.

    • nzira, I kuedzwe pano uye chete kuita kwakajairika nzira inoshanda, mune mamwe mazwi, abate pasi alt kiyi uye kutaipa kutevedzana nenhamba chaienzanirana achida chiratidzo. muenzaniso: Alt + 166 = ª E alt + 167 = º. akataura!

  6. James akati:

    zvakanaka mangwanani, mukomana akanaka chaizvo romukova yako, Ndiri kutanga kushanda JavaScript ikozvino, uye vanofanira kusika orugwaro mupepeti, Ndakafunga kushandisa ckeditor, asi kune zvakaoma kuwana kubata nayo, kutaipa chete dai maiva , kunze, itsva, nokubvisa makashu, remake, mhete, mufananidzo, uye kusarudza bhokisi mutauro, chete pane rudzi kunyora, zvingava zvirongwa mitauro, uye zvadaro aifanira kubata vakapiwa mashoko, vorudzii vakaita zvisingatomboiti tsime yekubvuma mupepeti, paIndaneti chete, kana muchikwanisa kundibatsira.

  7. Buddy, I iiswe zvakanaka, zvishoma dambudziko asi zvandiri kutarisana ndechokuti kunochinja chaiwo vatambi vari HTML Codes ndiyo mhando â a uye ndaida kuti kufanana kuti Database yangu, It ane sezvo?

    • Opa, kuti pangava chinhu pamwe mupepeti auri kushandisa kunyora bumbiro. Edza kushandisa chidhina nevakawanda manotsi uye kupinda zvizere HTML remitemo muenzaniso, uye ona kana dambudziko anoramba.

      Edzai zvakare kuisa mitemo kuti kuudza peji wenyu charset kuisa kushandisa (ISO-8859-1 ou UTF-8).

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

      Kana uri kushandisa PHP, charset akaratidza mangwanani remitemo, asati chinhu:

      1
      
        <?PHP Header("Content-Type: chinyorwa / HTML;  charset = ISO-8859-1",zvechokwadi) ?>

      kana, edza kubata zviri zvikumbiro uchishandisa yakarurama charset:

      1
      
        htmlentities( utf8_decode($_POST['Shanduka']) );

      Chokwadi ndechokuti dambudziko iwe kutaurwa zvinoita sezvisina kuva CKEditor, kuti sei I kurishandisa mafomu siyana uye havana dambudziko chaizvo vatambi. uyewo kuedzwe Demo pamusoro yokuvaka kuti Website, uye handina kuona dambudziko. ona pano: http://ckeditor.com/demo

  8. masikati akanaka.
    I kuronga pamusoro kushandisa mudziyo iyi yokurapa inonyorwa – chinhu sooo kunyange nyore.
    – Ndaida kuziva kuti kuisa kubhawa yepamusorosoro (riripi functionality) zvikasazikamwa (somwana muduku bhatani chinoita kuti kubviswa pashure Editing rugwaro)
    – Uyewo sei ini ndiende navo pasi nomuzariro (iro rinowanika “body” uye nezvimwe Tags) ?
    – sei ndaita mashoko bhokisi ane “urefu” otomatiki: mhando, kana I varayire 10 mishonga bhokisi kuchaita nezvishoma apo ndiri achitaipa… Kana ini chete kutaipa 1 mishonga bhokisi riri panguva I mhando…

    • makadii, urombo, paiva maronda (kukundikana) mubumbiro yako, saka dzichibvisa zvinongoreva.

      Panyaya iyi unoda, zviri zvachose zvichiita, asi ini hunoratidza kutsvaka nyanzvi anonzwisisa JavaScript kukubatsira.

      Ndichaudza ingotaurai tambo:

      – Hide Toolbar (Toolbar):

      1
      2
      3
      
      aiva mupepeti = CKEDITOR.Inline( 'editor1', {
          removePlugins: 'Toolbar'
      } );

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

      – Kuwedzera nokukwirira zvaitika (autogrow):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (kuratidzira)

      muenzaniso:

      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>
          <title>CKEditor</title>
          <Meta gutsikana="text/html; charset=utf-8" http:-equiv="content-type" />
          <chinyorwa src="http:////cdn.ckeditor.com/4.5.3/basic/ckeditor.js"></script>
          <chinyorwa src="plugin.js"></script>  <!-- kuwana plugin.JS no http:://ckeditor.com/addon/autogrow ->  
          <script type="text/javascript">
           window.onload = function()  {
              CKEDITOR.replace( 'editor1', {             
                  removePlugins: 'Elementspath', 
                  removePlugins: 'Toolbar',
                  extraPlugins: 'Autogrow',
                  autoGrow_minHeight: 70,
                  urefu: '70px'
              });
           };
          </script>
        </head>
        <body>
          <chimiro chiito="request.php" nzira="post">
            <textarea id="editor1" zita="editor1">kutanga chinyorwa.</textarea>
            <chiyamuro mhando="submit" ukoshi="Submit" />
          </fomu>  
        </body>
      </html>
  9. odilon akati:

    Handigoni kupinda wenyaya ari Database nemazvo, nekuti zvose chinoshamisa

    aimbova:
    <p>&aacute; &eacute; &iacute;asd</p>
    achaita zviri

  10. Claudio akati:

    Ola Taylor, makorokoto pamusoro akatsanangura zvakanaka romukova. Ndinoda kushandisa mupepeti ichi ari PHP kushanda uye tinoda kuziva kuti pave combo (kana bhatani) ari Toolbar kuunza BD umboo kuti dzinoisa mundima? mune mamwe mazwi, kupfurikidza nekudzvanya bhatani kuti uvhure nhaurirano bhokisi pamwe mugumisiro mumwe mubvunzo iri Database yokusarudzira zvinyorwa.
    Unogona?

  11. Glaydison Silva akati:

    makadii, kukuru romukova. Aigona I anoratidza mutsva mumhanyi? I rubatsiro kushandisa bhatani kuti Upload mifananidzo, Demo yakaenzana apo unogona kukwira server vakadaro. Handigoni zvachose.

Leave a Reply

kero email havazobvumirwi ichibudiswa. Raida minda anozivikanwa ne *