Kthejeni textarea botues (WYSIWYG | CKEditor)

Këtu është një ndihmë e shpejtë që të integrohen CKEditor me Web aplikacionet e tyre në vetëm tre hapa.

prezantim

rradha juaj tags Textarea në një redaktor web nuk është më një detyrë e komplikuar. Në mesin e shumë redaktorët e që ju mund të gjeni në internet, ne shohim apo e përdorim CKEditor. Shih redaktor në veprim këtë DEMO.

instalim

Shkarko CKEditor në http://ckeditor.com/download. Versioni i përdorur në këtë post ishte 3.6.4, të 17 korrik 2012. Ekstrakt file ckeditor_3.6.4.zip me kërkesën tuaj. një dosje CKEditor Ajo do të krijohet. shpejt, Tani vetëm të kryer një thirrje brenda kodin tuaj burim!

integrim

CKEditor është një aplikim JavaScript. Për të lexuar, vetëm të bëjë një telefonatë të thjeshtë të tij në tags HEAD e kodit tuaj burim. bërë këtë, API JavaScript CKEditor tashmë është gati për përdorim. Mos harroni për të rregulluar rrugën e file ckeditor.js në dosjen ku ju Unzipped.

hap 1 – Bëni thirrje për CKEditor
1
2
3
  <kokë>
    <Lloji script="text/javascript" src="ckeditor/ckeditor.js"></dorëshkrim>
  </kokë>
hap 2 – Krijo një fushë textarea
1
2
3
  <trup>
    <textarea id="editor1" emër="editor1">&lt;p&gt;vlera fillestare.&lt;/p&gt;</textarea>
  </trup>
hap 3 – Thuaj çfarë TEXTAREA (id) Ajo do të zëvendësohet nga CKEditor
1
2
3
4
5
6
7
  <kokë>
    <Lloji script="text/javascript">
      dritare.onload = funksion()  {
        CKEditor.zëvendësoj( 'Editor1' );
      };
    </dorëshkrim>    
  </kokë>

shpejt, tashmë punon! nuk beson? balsam, ka dhënë “F5” në shfletuesin dhe të shohim për veten tuaj… Kodi i plotë duket si ky:

Kodi i plotë

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
  <kokë>
    <titull>CKEditor</titull>
    <meta content="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></dorëshkrim>
    <Lloji script="text/javascript">
      dritare.onload = funksion()  {
        CKEditor.zëvendësoj( 'Editor1' );
     };
    </dorëshkrim>
  </kokë>
  <trup>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&lt;p&gt;Vlera fillestare.&lt;/p&gt;</textarea>
      <input type="submit" value="Submit" />
    </formë>  
  </trup>
</html>

qartë, tani ju duhet për të bërë ndryshime, si aplikimin tuaj, për të filluar vendosjen e veprim FORMULARI tuaj, duke treguar faqen që do të rifitoj dhe të përpunuar të dhënat e paraqitura nëpërmjet POST.

Artikulli përfundon këtu, por unë do të lënë disa perla më shumë për kurioz:

këshilla

(1) Sem evento onload, klasë com =”CKEditor”

Nëse ju caktojë klasën “CKEditor” të textarea tuaj, pasi ajo do të konvertohen automatikisht në një CKEditor, pa pasur nevojë të përdorni të shkrimit të quajtur nga ngjarje “onload”, dhe të thjeshtë:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
  <kokë>
    <titull>CKEditor</titull>
    <përmbajtja meta="text/html; charset = utf-8" http-equiv="content-type" />
    <Lloji script="text/javascript" src="ckeditor/ckeditor.js"></dorëshkrim>
  </kokë>
  <trup>
    <Veprimi formë="request.php" metodë="post">
      <textarea klasë="ckeditor" id="editor1" emër="editor1">&lt;p&gt;vlera fillestare.&lt;/p&gt;</textarea>
      <lloj input="submit" vlerë="Submit" />
    </formë>  
  </trup>
</html>

(2) Ndryshimi linjës pushim <p> nga <br />

Kam vënë re dy mënyra për të shkëmbyer P nga BR, kur teclamos ENTER. i parë, Kjo është për të vendosur parametrin enterMode me vlerë 2, që prej 1 = P, 2 BR dhe = 3 = DIV.

1
2
3
4
5
6
7
  <kokë>  
    <Lloji script="text/javascript">
      dritare.onload = funksion() {
        CKEditor.zëvendësoj( 'Editor1', {enterMode: numër(2)} );
      };
    </dorëshkrim>
  </kokë>

ose, të hapur dosjen config.js dhe të përcaktojë diçka si:

1
2
3
CKEditor.editorConfig = funksion( config ) {
  config.enterMode = CKEditor.ENTER_BR;
};

në këtë rast, të tipit ENTER, Ne kemi opsione:
CKEDITOR.ENTER_P - paragraf i ri P është krijuar;
CKEDITOR.ENTER_BR - pushim linjë me BR;
CKEDITOR.ENTER_DIV - bllok i ri është krijuar me DIV.

Unë rekomandoj të ngushtë dhe të hapur shfletuesin për të parë rezultatin

ky ndryshim, sepse gjëja mund të kopje! Në qoftë se ajo ende nuk punon, të qartë cache shfletuesit.

(3) Të ndryshojë ngjyra e sfondit të CKEditor toolbar

Siç keni vënë re, ne mund të bëjë ndryshime në parametrat tona CKEditor caktimin direkt në objektin CKEditor ose nëpërmjet skedar config.js. prandaj, Unë do të demonstrojë vetëm një nga mënyrat:

1
2
3
4
5
6
7
  <kokë>  
    <Lloji script="text/javascript">
      dritare.onload = funksion() {
        CKEditor.zëvendësoj( 'Editor1', {uicolor: "# Ff0000"} );
      };
    </dorëshkrim>
  </kokë>

(4) Kombinimi parametrat e konfigurimit CKEditor

Parametrat e konfigurimit CKEditor mund të kombinohen. Për të ditur mundësitë, hidhini një sy në API Config. shembull:

1
2
3
4
5
6
7
8
9
10
11
12
  <kokë>  
    <Lloji script="text/javascript">
      dritare.onload = funksion() {
        CKEditor.zëvendësoj( 'Editor1', {  uicolor: 'Ccc',
                                        enterMode: CKEditor.ENTER_P,
                                        customConfig : "CKEditor / outroConfig.js ',
                                        gjuhe: 'Pt-br'        
                                      } 
                        );
      };
    </dorëshkrim>
  </kokë>

(5) Gjuhë të mbështetur nga CKEditor

O CKEditor suporta 58 languages, përfshirëse ose “pt-br”. Shih më shumë User Interface Gjuhë. Shembulli i mësipërm tregon përdorimin e saj.

(6) Customizing toolbarin

– themelor

Ju nuk mund të doni për të siguruar të gjitha tiparet e CKEditor. pastaj, pse nuk e zgjedh toolbar sipas nevojës? Këtu është një shembull i lënë redaktor të mirë BASIC.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <kokë>  
    <Lloji script="text/javascript">
      dritare.onload = funksion() {
        CKEditor.zëvendësoj( 'Editor1', {
                           toolbar:
                           [
                             { emër: '' basicstyles, artikuj : [ 'Bold',"Italic" ] },
                             { emër: 'paragraf', artikuj : [ 'NumberedList','BulletedList' ] },
                             { emër: 'mjete', artikuj : [ 'Maximize','-','Rreth' ] }
                           ]}         
                         );
      };
    </dorëshkrim>
  </kokë>

– i plotë

Më poshtë është një shembull shumë FULL. Hiq butonat që ju nuk dëshironi.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <kokë>  
    <Lloji script="text/javascript">
      dritare.onload = funksion() {
        CKEditor.zëvendësoj( 'Editor1', {
                           toolbar: [
                             { emër: 'Dokument', artikuj : [ "Burimi",'-','Save','Newpage','' DocProps,'Preview','Print','-','' Templates ] },
                             { emër: "Clipboard ', artikuj : [ 'Prerje','Copy','Ngjit','Text Past','PasteFromWord','-',"Undo","Redo" ] },
                             { emër: 'Editing', artikuj : [ 'Gjej','Replace','-','Selektoj të gjitha','-','SpellChecker', 'Scayt' ] },
                             { emër: 'forma', artikuj : [ 'Forma', "Kutia e zgjedhjes ', 'Radio', 'TextField', 'Textarea', 'Përzgjidh', "Button", 'Simple', 'HiddenField' ] },
                             '/',
                             { emër: '' basicstyles, artikuj : [ 'Bold',"Italic","Underline","Strike",'Kaloje','Indeksuar','-','RemoveFormat' ] },
                             { emër: 'paragraf', artikuj : [ 'NumberedList','BulletedList','-','Outdent','Largoj','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
                             { emër: 'lidhje', artikuj : [ 'Link','Shkëput',"Anchor" ] },
                             { emër: 'Futur', artikuj : [ "Image",'Flash',"Tabela",'HorizontalRule','Smiley','SpecialChar','Pagebreak','Iframe' ] },
                             '/',
                             { emër: 'stile', artikuj : [ "Styles","Format","Font",'Përmasa e germave' ] },
                             { emër: 'colors', artikuj : [ 'TextColor','Bëni kërkesën' ] },
                             { emër: 'mjete', artikuj : [ 'Maximize', '' ShowBlocks,'-','Rreth' ] }                            
                           ]}         
                         );
      }; 
    </dorëshkrim>
  </kokë>

– mesatar

Ky është një shembull më i moderuar, me një bar mjet vetëm, por me karakteristikat kryesore. Vini re se, gjithëpërfshirës, Ju mund të kombinohen dhe për të përcaktuar lartësinë dhe gjerësinë e Editor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<kokë>  
  <Lloji script="text/javascript">
    dritare.onload = funksion() {       
        CKEditor.zëvendësoj( 'Editor1', {
                           toolbar:
                           [
                             { emër: '' basicstyles, artikuj : [ 'Bold',"Italic","Underline" ] },
                             { emër: 'paragraf', artikuj : [ 'NumberedList','BulletedList' ] },
                             { emër: 'paragraf', artikuj : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
                             { emër: 'stile', artikuj : [ "Font",'Përmasa e germave' ] },
                             { emër: 'colors', artikuj : [ 'TextColor','Bëni kërkesën' ] },
                             { emër: "Clipboard ', artikuj : [ 'Prerje','Copy','Ngjit','PasteFromWord','-',"Undo","Redo" ] },                             
                             { emër: 'mjete', artikuj : [ 'Maximize','-','Rreth' ] }
                           ],
                           gjerësi: "740px",
                           lartësi: "200px"}
                         );
    };
  </dorëshkrim>
</kokë>

(7) Textarea (CKEditor) bosh kur paraqitjes formë

Nëse Textarea tuaj / CKEditor duket e bardhë (bosh) Kur paraqitjes formë, ju mund të përdorni këtë “dredhi” I krijuar më poshtë, e cila në fakt shërben për të marrë përmbajtjen e CKEditor dhe luajtur textarea përkatës. Kjo është bërë duke e quajtur funksionin setCKEditorToTextarea() kur ju klikoni butonin për të dërguar (submit button ou), onClick ngjarje nuk normalisht() buton.

1
2
3
4
5
6
<Lloji script="text/javascript">
      funksion setCKEditorToTextarea() {
        për(ishte instanceName  CKEditor.raste)
          CKEditor.raste[instanceName].updateElement();            
      }
</dorëshkrim>

Fjalët e programuesit

CKEditor është një editor teksti për t'u përdorur brenda faqet e internetit. Kjo është një editor WYSIWYG, që do të thotë se teksti u redaktuar nga ana e përdoruesit do të jetë sa më afër të jetë e mundur të publikohet. Ai sjell në web përbashkët karakteristika të redaktimi, gjenden në aplikimet redaktimi desktop, como o Microsoft Word e OpenOffice. Pasi CKEditor lejohet sipas kushteve të licencave “Open Source” dhe komerciale, ju jeni në gjendje të përdorin atë brenda çdo aplikim. Kjo është redaktor ideal për zhvilluesit, krijuar për të siguruar zgjidhje të lehtë dhe të fuqishme për përdoruesit e tyre.

redaktorët e tjerë

burime

Për starters, kjo është! Shih faqen e zhvilluesit për detaje.

gjithsej accesses: 59312

27 komente “Kthejeni textarea botues (WYSIWYG | CKEditor)

  1. pas Very cool, pjesa për të cilën unë dëshiroj ultilizar lidhet me temën 6, duke pasur parasysh se CKEditor ruajtur në html përmbajtja e saj të përshkruara në textarea duhet të paraqesë tekstin me e-mail me html megjithatë duhet tabaka në BD në format txt njëjtën. Keni ndonjë sugjerime mund ultilizar? :)

  2. Ronaldo tha:

    mënyrë, Unë jam duke zhvilluar një projekt dhe një formë ka dy fusha textarea.
    Unë jam duke përdorur CKEditor në të dy.

    rekord – majtas

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

    rekord – e drejtë

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

    Redaktori është aplikuar në mënyrë korrekte. Por kur procesi të formojë një skedar php ajo vetëm merr fushën e parë e të dhënave dhe e dyta do të zbrazet.

    Ky është një problem me CKEditor? sepse në qoftë se ju nuk e përdorni të marr të dhëna nga dy fusha zakonisht
    .
    I përdorur strukturën e sugjeruar nga vend CKEditor shumë.

    • përshëndetje Ronaldo, Unë bëra një provë këtu dhe nuk kishte asnjë problem. Veproni si më poshtë, të marrë kodin e mëposhtëm, vënë në një skedar “teste.php” në serverin tuaj, por izolohet nga zbatimi i saj i cili është duke i dhënë problemin. Ju lutem vini re se duke dorëzuar formularin me dy textarea (CKEditor), të dhënat normalisht do të dërgohet.

      fotografi test.php (DY TextAreas njëkohshëm)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <html>
        <kokë>
          <titull>CKEditor</titull>
          <meta content="text/html; charset = utf-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></dorëshkrim>
          <script type="text/javascript">
            window.onload = Funksioni()  {
              CKEDITOR.replace( 'Editor1' );
              CKEDITOR.replace( 'Editor2' );
           };
          </dorëshkrim>
        </kokë>
        <trup>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">Vlera fillestare 1</textarea>
            <textarea id="editor2" name="editor2">Vlera fillestare 2</textarea>
            <input type="submit" value="Submit" />
          </formë>  
        </trup>
      </html>
      <?php jehonë 'Redaktor 1 ---> '.@$_KËRKESË['Editor1'].'<br />'; ?>
      <?php jehonë 'Redaktor 2 ---> '.@$_KËRKESË['Editor2'].'<br />'; ?>
  3. Ronaldo tha:

    Unë u përpoq për të kaluar kodin, por unë mendoj se nuk është publikuar. Por, ju e kuptoni se çfarë problemi drejtë? Përdorni CKEditor vetëm një nga textarea dërgon të dhënat në një tjetër është bosh.

    • Ne rregull, Unë mendoj se unë e kuptoj. Siç tregohet më lart, Unë nuk kam të njëjtin problem. prandaj, rescan kodin tuaj, të parë nëse ju keni më shumë se një fushë (të dhëna) me të njëjtin emër (emër). hugs!

      • Ronaldo tha:

        I vendosur me tip tij…. (6) Textarea (CKEditor) bosh kur paraqitjes formë

        Kjo ishte e mjaftueshme për të vënë në funksion atje dhe ok :) Kjo vc formë q kalon duke përdorur të drejtën php? Edhe faqet e duke u vendosur në editor php përdorur javascript.
        Faleminderit për këshilla

        duke përfituar nga q njohura më nuk është temë e postit, I programit një kohë të gjatë me java dhe .net dhe php më pak kohë dhe unë jam picking up konvertimin datuara në varg. Ajo nuk ka një funksion të drejtpërdrejtë, si për vargun e të dhënave (strtotime) as? I vc q di shumë php q I. Nëse ju e dini këtë arrestim dërgon në email tim ronaldodantas2@gmai.com

        Nuk ka nevojë për të publikuar këtë koment. Faleminderit për këshilla.

  4. Përshëndetje Taylor shumë të mirë pas tij.

    instaluar tashmë dhe jam duke përdorur veprat e mirë. Unë kam një dyshim, për shembull në blogun tuaj keni hyrë kutitë në të verdhë me scripts. Siç ju e bëri atë? Dhe një tipar i CKEditor?

    falemnderit

  5. Fernando tha:

    Si mundem me aftësuar karakterin e veçantë të th(FIRST 1) e ª(2 DYTË) PA SHBA CLICK ON TOOL INSERT karakteri të veçantë? Do të pëlqente të bëjë këtë duke hyrë Keyboard VET ME JO hapur dritaren.

    • mënyrë, I testuar këtu dhe vetëm të bëjë rrugën konvencionale që punon, me fjalë të tjera, mbani të shtypur butonin ALT dhe shtypni sekuencë të numrave që korrespondon me simbolin e dëshiruar. shembull: ALT + 166 = ª e ALT + 167 = º. foli!

  6. James tha:

    mirëmëngjes, djalë shumë i mirë postimi juaj, Unë jam duke filluar për të punuar me javascript tani, dhe për të duhet të krijoni një editor teksti, Mendova e përdorimit CKEditor, por të vështirë për të marrë të trajtuar atë, shkruani vetëm dëshiroj që ai kishte , ruaj, i ri, prish, ribërje, gjerdan, kopje, dhe një kuti përzgjedhje gjuhë, por në vend të shkruhet si, do të jetë gjuhë programimi, dhe pastaj kishte për të manipuluar të dhënat e marra, lloj si një redaktor normal kod burim, vetëm online, në qoftë se ju mund të më ndihmoni.

  7. Amigão, I instaluar mirë, por një problem të vogël ajo që unë jam përballur është se ajo transformon karaktere të veçanta në kodet html tip është â Â Á dhe kam kërkuar që ata të jenë ashtu të dhënave tim, ka të?

    • Opa, se nuk mund të jetë diçka me redaktorin ju jeni duke përdorur për të shkruar kodin. Provoni të përdorni një bllok të vë në dukje të zakonshme dhe të hyjë në kodin shembullin e plotë HTML, dhe të shohim nëse problemi mbetet.

      Mundohuni të vendosur edhe politikat që thonë se faqja juaj e cila charset vendosur për të përdorur (ISO-8859-1 ou UTF-8).

      1
      2
      3
      4
      5
      
      <trup>
        <kokë>
            <charset meta="UTF-8">
        </kokë> 
      ...

      Nëse jeni duke përdorur PHP, vendosur charset në fillim të kodit, para se çdo gjë:

      1
      
        <?php arkitra("Content-Type: text / html;  charset = ISO-8859-1",i vërtetë) ?>

      ose, të përpiqet për të trajtuar përmbajtjen e kërkesave përdorimit të karaktereve saktë:

      1
      
        htmlentities( utf8_decode($_POST["Ndryshueshme"]) );

      Fakti është se problemi që ju cituar nuk duket të jetë CKEditor, pse unë e përdorin atë në aplikacione të ndryshme dhe unë nuk kam asnjë problem me karaktere speciale. gjithashtu testuar DEMO në faqen e internetit zhvilluesit, dhe nuk e shohin problemin. shikoni këtu: http://ckeditor.com/demo

  8. Marcio tha:

    Mirëdita unë jam duke u përpjekur për të marrë tekstin e shkruar në Textarea via javascript për të dërguar në bazën e të dhënave, por unë nuk mund të, Ajo ka disa metoda për të marrë tekstin?
    falemnderit

  9. mirëdita.
    Kam ndërmend të përdorur këtë pajisje për të recetës mjekësore – diçka sooooo edhe e thjeshtë.
    – Doja të di se si për të ngritur për bar të lartë (ku është karakteristika) të fshihet (si një buton të vogël që e bën të zhduken pas redaktimi i tekstit)
    – Gjithashtu si mund të shkojnë larg me bar e poshtme (e cila duket “trup” dhe tags tjera) ?
    – Si mund ta bëjë një kuti teksti me një “lartësi” automatik: lloj, në qoftë se unë përshkruajnë 10 Medikamente kutia do të zgjatur, ndërsa unë jam i shtypur… Nëse unë vetëm lloji 1 kuti mjekim është në kohën e I tipit…

    • Përshëndetje, Më vjen keq, ka pasur disa shkurtime (dështimet) në kodin tuaj, kështu që unë përfundoi duke hequr atë.

      Në lidhje me atë që ju duhet, kjo është krejtësisht e mundur, por unë sugjeroj që duke kërkuar për një profesionist i cili e kupton JavaScript për t'ju ndihmuar.

      Unë vetëm do të them litarë:

      – Fshih Toolbar (toolbar):

      1
      2
      3
      
      ishte redaktor = CKEditor.ne rresht( 'Editor1', {
          removePlugins: 'Toolbar'
      } );

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

      – Rritur lartësi automatikisht (autogrow):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (demonstrim)

      shembull:

      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>
        <kokë>
          <titull>CKEditor</titull>
          <përmbajtja meta="text/html; charset = utf-8" http-equiv="content-type" />
          <script src="http:////cdn.ckeditor.com/4.5.3/basic/ckeditor.js"></dorëshkrim>
          <script src="plugin.js"></dorëshkrim>  <!-- të plugin.js em http://ckeditor.com/addon/autogrow ->  
          <Lloji script="text/javascript">
           dritare.onload = funksion()  {
              CKEditor.zëvendësoj( 'Editor1', {             
                  removePlugins: 'Elementspath', 
                  removePlugins: 'Toolbar',
                  extraPlugins: 'Autogrow',
                  autoGrow_minHeight: 70,
                  lartësi: '70px'
              });
           };
          </dorëshkrim>
        </kokë>
        <trup>
          <Veprimi formë="request.php" metodë="post">
            <textarea id="editor1" emër="editor1">Teksti fillestar.</textarea>
            <lloj input="submit" vlerë="Submit" />
          </formë>  
        </trup>
      </html>
  10. Odilon tha:

    Unë nuk mund të futni tekst në bazën e të dhënave në mënyrë korrekte, sepse çdo gjë është e çuditshme

    ish:
    <p>&aacute; &eacute; &iacute;asd</p>
    do të është

  11. Claudio tha:

    përshëndetje Taylor, urime për postin e shpjegoi shumë mirë. Unë dua që të përdorin këtë redaktor në një aplikim PHP dhe duan të dinë se si për të krijuar një combo (ose butonin) në shiritin e veglave për të sjellë të dhëna të BD të futur në tekst? me fjalë të tjera, duke klikuar një buton do të hapë një kuti dialogu me rezultatin e një pyetje në bazën e të dhënave për të zgjedhur një rekord.
    Është e mundur?

  12. Glaydison Silva tha:

    Përshëndetje, post i madh. Mund Unë sugjeroj një post të ri? Kam nevojë për ndihmë për të zbatuar një buton për të ngarkoni imazhe, DEMO barabartë me ku ju mund të shkoni deri në server dhe të tilla. Unë nuk mund në të gjitha.

Lini një Përgjigju

Adresa juaj e emailit nuk do të publikohet. Fusha e kërkuar janë shënuar me *