Tour TEXTAREA Verlag (WYSIWYG | CKEditor)

Hei ass eng séier Hëllef Dir CKEditor mat hiren Web Applikatiounen an just dräi Schrëtt intégréieren.

Presentatioun

Tour Är Tags TEXTAREA op engem Web Redakter ass net méi eng komplizéiert Aufgab. Vun de ville Redaktoren datt Dir um Internet fannen kann, mer gesinn oder benotzen CKEditor maachen. Gesinn de Redakter am Aktioun dës DEMO.

Installatioun

Download der CKEditor an http://ckeditor.com/download. D'Versioun vun dësem Post benotzt gouf 3.6.4, vun 17 juli 2012. Extrait vum Fichier ckeditor_3.6.4.zip mat Ärer Demande. engem Dossier ckeditor wäert hunn. geschwënn, Elo maachen just e Opruff bannent Är Source Code!

Integratioun

D'CKEditor ass eng Javascript Applikatioun. Ze liesen et, maachen just eng einfach ruffen him am Tags Chef vum Är Source Code. gemaach dës, API CKEditor Javascript ass scho prett fir benotzen. Erënneren der Datei Wee ze ajustéieren ckeditor.js fir den Directoire wou Dir opgemaach.

Schrëtt 1 – VergréisserenD 'appel un CKEditor
1
2
3
  <Kapp>
    <Schrëft Typ="text/javascript" src="ckeditor/ckeditor.js"></Schrëft>
  </Kapp>
Schrëtt 2 – Schafen eng textarea Terrain
1
2
3
  <Kierper>
    <textarea ID="editor1" Numm="editor1">&dra;p&GT;éischter Wäert.&dra;/p&GT;</textarea>
  </Kierper>
Schrëtt 3 – Soen wat TEXTAREA (ID) Et gëtt vun CKEditor ersat ginn
1
2
3
4
5
6
7
  <Kapp>
    <Schrëft Typ="text/javascript">
      Fënster.onload = Funktioun()  {
        CKEDITOR.schounen( "Editor1" );
      };
    </Schrëft>    
  </Kapp>

geschwënn, méi Wierker! net gleewen? Salve, et ginn “F5” am Browser a gesinn fir selwer… voll Code gesäit wéi dës:

komplett Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<HTML>
  <Kapp>
    <Titel>CKEditor</Titel>
    <meta content="text/html; charset = UTF-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></Schrëft>
    <Schrëft Typ="text/javascript">
      Fënster.onload = Funktioun()  {
        CKEDITOR.schounen( "Editor1" );
     };
    </Schrëft>
  </Kapp>
  <Kierper>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&dra;p&GT;Éischter Wäert.&dra;/p&GT;</textarea>
      <input type="submit" value="Submit" />
    </Form>  
  </Kierper>
</HTML>

kloer, elo brauchen Dir Ännerung als Är Demande ze maachen, ze fänken de Kader Aktioun Är Saachen, besot der Säit, datt d'Daten via POST proposéiert gëtt recuperéieren an Prozess.

Den Artikel goung hei, mee ech e puer méi Pärelen fir de virwëtzeg verloossen:

Tipps

(1) Sem evento onload, COM Klass =”ckeditor”

Wann Dir der Klass uginn “ckeditor” op Är textarea, automatesch muss et an engem CKEditor ëmgerechent, ouni mussen d'Schrëft vum Event genannt ze benotzen “onload”, an einfach:

1
2
3
4
5
6
7
8
9
10
11
12
13
<HTML>
  <Kapp>
    <Titel>CKEditor</Titel>
    <meta Inhalt="text/html; charset = UTF-8" http-equiv="content-type" />
    <Schrëft Typ="text/javascript" src="ckeditor/ckeditor.js"></Schrëft>
  </Kapp>
  <Kierper>
    <Form Aktioun="request.php" Method="post">
      <textarea Klass="ckeditor" ID="editor1" Numm="editor1">&dra;p&GT;éischter Wäert.&dra;/p&GT;</textarea>
      <Input Typ="submit" Wäert="Submit" />
    </Form>  
  </Kierper>
</HTML>

(2) Exchange Linn Paus <p> vun <br />

Ech gemierkt zwou Méiglechkeeten vun P BR ze änneren wann teclamos UNZUEHL. déi éischt, Et ass de Parameter ze setzen enterMode mat Wäert 2, zënter 1 = P, 2 = BR an 3 = Divisiounen.

1
2
3
4
5
6
7
  <Kapp>  
    <Schrëft Typ="text/javascript">
      Fënster.onload = Funktioun() {
        CKEDITOR.schounen( "Editor1", {enterMode: Zuel(2)} );
      };
    </Schrëft>
  </Kapp>

oder, oppen der Datei config.js an definéieren eppes wéi:

1
2
3
CKEDITOR.editorConfig = Funktioun( Configuratiounsdatei ) {
  Configuratiounsdatei.enterMode = CKEDITOR.ENTER_BR;
};

an dësem Fall, zu Typ UNZUEHL, Mir hunn Optiounen:
CKEDITOR.ENTER_P - neien Paragraph P hunn ass;
CKEDITOR.ENTER_BR - Linn Stand mat BR;
CKEDITOR.ENTER_DIV - nei Spär ass mat Divisiounen hunn.

Ech recommandéieren no an oppen de Browser d'Resultat ze gesinn

dës Ännerung, well Dir kënnt tëschegesäichert kréien! Wann et heescht Aarbecht nach net, de Browser Cache kloer.

(3) Änneren d'Hannergrondfaarf vun der CKEditor uewe riets

Wéi Dir gemierkt, Mir kënnen eis CKEditor Attributiounsregele Parameteren direkt ze ckeditor Objet oder via Fichier maachen Ännerungen an config.js. dofir, Ech just ee vun de Weeër weisen:

1
2
3
4
5
6
7
  <Kapp>  
    <Schrëft Typ="text/javascript">
      Fënster.onload = Funktioun() {
        CKEDITOR.schounen( "Editor1", {Nordwestlicher: "# Ff0000"} );
      };
    </Schrëft>
  </Kapp>

(4) Kombinéiert der CKEditor Configuratioun Parameteren

D'CKEditor Configuratioun Parameteren kënnen kombinéiert ginn. Wëssen, d'Méiglechkeeten, huelen e Bléck op API ConfigLanguage. Beispill:

1
2
3
4
5
6
7
8
9
10
11
12
  <Kapp>  
    <Schrëft Typ="text/javascript">
      Fënster.onload = Funktioun() {
        CKEDITOR.schounen( "Editor1", {  Nordwestlicher: "Ccc",
                                        enterMode: CKEDITOR.ENTER_P,
                                        customConfig : "Ckeditor / outroConfig.js",
                                        Sprooch: "Pt-br"        
                                      } 
                        );
      };
    </Schrëft>
  </Kapp>

(5) Sproochen ënnerstëtzt vun CKEditor

O CKEditor suporta 58 Sproochen, inklusiver oder “pt-br”. Gesinn méi zu Benotzer-Astellungen Sproochen. D'virun Beispill weist seng benotzen.

(6) Ugebueden der Toolbar

– Basis

Dir kënnt net all Funktiounen vun CKEditor fir wëllt. dann, firwat net den uewe riets optimiséieren als waren? E Beispill gutt Basis Redakter verloosse.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <Kapp>  
    <Schrëft Typ="text/javascript">
      Fënster.onload = Funktioun() {
        CKEDITOR.schounen( "Editor1", {
                           uewe riets:
                           [
                             { Numm: "Basicstyles", heizou : [ 'Kéngen',"Kursiv" ] },
                             { Numm: "Paragraph", heizou : [ "NumberedList","BulletedList" ] },
                             { Numm: "Tools", heizou : [ "& Grouss","-","Iwwert" ] }
                           ]}         
                         );
      };
    </Schrëft>
  </Kapp>

– voll

Drënner ass eng méi komplett Beispill. Ewechzehuelen d'Knäppercher dass Dir net wëllt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <Kapp>  
    <Schrëft Typ="text/javascript">
      Fënster.onload = Funktioun() {
        CKEDITOR.schounen( "Editor1", {
                           uewe riets: [
                             { Numm: "Dokument", heizou : [ "Source","-","Späicheren","Newpage","DocProps","Preview","Drécken","-","Schablounen" ] },
                             { Numm: "Numm", heizou : [ 'Glasur ","Kopéieren","Peschen","Fréier Text","PasteFromWord","-","Réckgängeg","Nees zeréck" ] },
                             { Numm: 'Redaktioun', heizou : [ "Bléck","Ignoréieren","-","SelectAll","-","SpellChecker", "Scayt" ] },
                             { Numm: 'Forme ", heizou : [ "Form", "Haischen", "Radio", "TextField", "Textarea", "En", "Button", "ImageButton", "HiddenField" ] },
                             "/",
                             { Numm: "Basicstyles", heizou : [ 'Kéngen',"Kursiv","Ënnersträichen",'Schrack ","Subscript","Superscript","-","RemoveFormat" ] },
                             { Numm: "Paragraph", heizou : [ "NumberedList","BulletedList","-","Outdent","Action","-","Blockquote","CreateDiv", "-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock","-","BidiLtr","BidiRtl" ] },
                             { Numm: "Linken", heizou : [ "Link","Unlink","Politiker" ] },
                             { Numm: 'G', heizou : [ "Image","Flash","Table","HorizontalRule","Smiley","SpecialChar","PageBreak","Blockéieren" ] },
                             "/",
                             { Numm: "Ënnerstëtzen", heizou : [ "Stiler",'Format ",'Schrëft ","FontSize" ] },
                             { Numm: "Faarwen", heizou : [ "TextColor","BGColor" ] },
                             { Numm: "Tools", heizou : [ "& Grouss", "ShowBlocks","-","Iwwert" ] }                            
                           ]}         
                         );
      }; 
    </Schrëft>
  </Kapp>

– moderéiert

Dëst ass ee méi Beispill MODERÉIERT, mat engem Instrument Bar nëmmen, mä mat de Schlëssel Fonctiounen. Bedenkt datt, inklusiver, et ass méiglech ze kombinéieren an der Héicht ze bestëmmen an Breet Redakter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<Kapp>  
  <Schrëft Typ="text/javascript">
    Fënster.onload = Funktioun() {       
        CKEDITOR.schounen( "Editor1", {
                           uewe riets:
                           [
                             { Numm: "Basicstyles", heizou : [ 'Kéngen',"Kursiv","Ënnersträichen" ] },
                             { Numm: "Paragraph", heizou : [ "NumberedList","BulletedList" ] },
                             { Numm: "Paragraph", heizou : [ "JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"] },
                             { Numm: "Ënnerstëtzen", heizou : [ 'Schrëft ","FontSize" ] },
                             { Numm: "Faarwen", heizou : [ "TextColor","BGColor" ] },
                             { Numm: "Numm", heizou : [ 'Glasur ","Kopéieren","Peschen","PasteFromWord","-","Réckgängeg","Nees zeréck" ] },                             
                             { Numm: "Tools", heizou : [ "& Grouss","-","Iwwert" ] }
                           ],
                           Breet: "740px",
                           Héicht: "200px"}
                         );
    };
  </Schrëft>
</Kapp>

(7) Textarea (CKEditor) déi eidel subjecting zu Form

Wann Är Textarea / CKeditor schéngen wäiss (eidel) wann Propositioune der Form, Dir kënnt dës benotzen “artifice” Ech hunn ënner, déi déngt eigentlech den Inhalt vun CKEditor ze verdreiwen an den entspriechende Textarea Leeschtung. Dëst ass duerch Vocatioun der Funktioun gemaach setCKEditorToTextarea() wann Dir op de Knäppchen klickt schécken (Copie ou Knäppchen), onclick Event net normalerweis() Knäppchen.

1
2
3
4
5
6
<Schrëft Typ="text/javascript">
      Funktioun setCKEditorToTextarea() {
        fir(war instanceName an CKEDITOR.Mat Momenter)
          CKEDITOR.Mat Momenter[instanceName].updateElement();            
      }
</Schrëft>

Entwéckler d'Wierder

CKEditor ass en Text Redakter bannen Web Säiten benotzt gin. Et ass eng WYSIWYG Redakter, dat heescht, datt den Text vun de Benotzer verännert ginn wäert wéi no wéi méiglech un der publizéiert. Hien bréngt dem Web gemeinsam Redaktioun Fonctiounen, op Desktop Redaktioun Uwendungen fonnt, Swärdby o Microsoft Wuert E OpenOffice. Eemol ass de CKEditor ënner Lizenzen lizenzéierte “Open Source” a kommerziell, Dir konnt et bannent all Applikatioun ze benotzen. Dat ass déi ideal Redakter fir Entwéckler, geschaf fir hir Benotzer einfach a mächteg Léisungen fir.

aner Redaktoren

Quellen

Fir Entreeën ass et! Gesinn de Site d'Entwéckler fir méi Detailer.

Total vun Hits: 58755

27 Rezensiounen “Tour TEXTAREA Verlag (WYSIWYG | CKEditor)

  1. Ronaldo gesot:

    Manéier, Ech Entwécklungslänner e Projet an enger Form huet zwee Felder textarea.
    Ech benotzen CKEditor zu souwuel.

    Rekord – lénks

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

    Rekord – Recht

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

    De Redakter ass richteg applizéiert. Mä wann de Prozess engem PHP Fichier Form kritt et nëmmen déi éischt Plaz Daten an der zweeter wäerten eidel.

    Et ass e Problem mat der CKEditor? well ech et net Daten aus zwee Felder benotzen kritt normalerweis
    .
    Ech benotzt der Struktur vun de ganz Site CKeditor ugeholl.

    • Ola Ronaldo, Ech hat hei engem Test an et war kee Problem. Maachen déi folgend, huelen de Code ënnert, huet an engem Fichier “teste.php” bannent äre Server, mee vu senger Applikatioun isoléiert deen Problem ass Féierung. Weg drun, dass déi Form mat zwee textarea Propositioune (CKEditor), d'Donnéeë gëtt normalerweis geschéckt ginn.

      test.php Fichier (ZWEE simultan TextAreas)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <HTML>
        <Kapp>
          <Titel>CKEditor</Titel>
          <meta content="text/html; charset = UTF-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></Schrëft>
          <script type="text/javascript">
            window.onload = Funktioun()  {
              CKEDITOR.replace( "Editor1" );
              CKEDITOR.replace( "Editor2" );
           };
          </Schrëft>
        </Kapp>
        <Kierper>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">Éischter gëllt 1</textarea>
            <textarea id="editor2" name="editor2">Éischter Wäert vun 2</textarea>
            <input type="submit" value="Submit" />
          </Form>  
        </Kierper>
      </HTML>
      <?PHP ECHO "Redakter 1 ---> ".@$_REQUEST["Editor1"]."<br />"; ?>
      <?PHP ECHO "Redakter 2 ---> ".@$_REQUEST["Editor2"]."<br />"; ?>
  2. Ronaldo gesot:

    Ech probéiert de Code ze Ugrëff mee ech mengen huet et net publizéiert ginn. Mä Dir verstitt, wat déi riets Problem? CKEditor benotzen nëmmen ee vun de textarea schéckt Donnéeën en anert eidel ass.

    • Ok, Ech mengen ech verstoen. Wéi virun dës Distanz, Ech gemaach hunn net déi selwecht Problem. dofir, rescan Är Code, gesinn, wann Dir kee méi wéi ee Beräich hunn (Input) mam selwechten Numm (Numm). machen!

      • Ronaldo gesot:

        Ech décidéiert mat sengem eegenen Tipp…. (6) Textarea (CKEditor) déi eidel subjecting zu Form

        Et war genuch der Funktioun do fir säi a ok :) Dës Form q VC ass mat PHP Recht huet? Och d'Säiten am PHP Redakter Wiesen Javascript mat agesat.
        Merci fir d'Tipps

        Virdeel vun wëssen q huelen ass net d'Thema vun der Post, Ech Programm eng laang Zäit mat nei Adress an .net an PHP manner Zäit and'm plécke vum Konversioun String. Et heescht net eng direkt Funktioun, wéi fir String Donnéeën (strtotime) weder? Ech q U wëssen vill PHP q ech. Wann Dir dëst verhaft wëssen Condé meng Email ronaldodantas2@gmai.com

        Nee brauchen dëse Kommentar publizéieren. Merci fir d'Tipps.

  3. Ola Taylor ganz gutt sengem Post.

    Schonn installéiert a schafft och ech mat. Ech hunn Zweiwel, zum Beispill an Ärer Blog koum Dir de Këschte vun giel mat Scripten. Wéi Dir et gemaach? An engem Fonktioun vun ckeditor?

    merci

  4. Fernando gesot:

    Wéi de spezielle Charakter maachen aktivéiert September(FIRST 1) E ª(SECOND 2.) OUNI US ON Instrument ASCHREIWEN SPECIAL Charakter LIEST? Ech wëll responsabel BIS DO AN DEN EEGENE Keyboard MAT KENG Fënster OPEN UNZUEHL.

    • Manéier, Ech getest hei an just d'konventionell Aart a Weis maachen, datt Wierker, an anere Wierder, Emprise der Alt Schlëssel verwandelt an der Haaptrei vun Zuelen Typ un déi gewënscht Symbol entspriechend. Beispill: Alt + 166 = ª E Alt + 167 = °. geschwat!

  5. James gesot:

    gudde moien, ganz gutt Guy Är Post, Ech ugefaange mat Javascript ze schaffen elo, a muss e Text Redakter ze schafen, Ech geduecht vun benotzt ckeditor, awer ze schwéier ze kréien et packen, Typ nëmmen wënschen Iech no , spueren, nei, réckgängeg, Remake, Halskette, Kopie, an engem Choix vun Sprooch Këscht, nëmmen amplaz vun enger Form vu Schreiwen ginn, wier Sproochen programméiere, an dann hätt der scho Donnéeën ze verschaffen, Zort wéi eng normal Source Code Redakter, nëmmen online, wann Dir kënnt mech Hëllef.

  6. Buddy, Ech installéiert gutt, e klenge Problem, mä wat mat denen ech mech ass dat de speziellen Zeechen an HTML Coden transforméiert ass den Typ â D'engem an ech wollt se wëll datt mengem Datebank gin, Dat huet als?

    • Opa, datt et kéint eppes mat de Redakter ginn Iech Code benotzt ze schreiwen. Probéieren eng Spär vun gemeinsam Noten mat a gitt de voll HTML Code Beispill, a gesinn, wann de Problem bleift.

      Probéiert och Politiken Formatioun datt Är Säit soen déi benotzt charset Formatioun ze (ISO-8859-1 ou UTF-8).

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

      Wann Dir Hëllef PHP, charset Formatioun der fréi Code, ier eppes:

      1
      
        <?PHP Kappball("Content-Type: Text / HTML;  charset = ISO-8859-1",richteg) ?>

      oder, probéieren d'Inhalter vun der Demanden benotzt déi richteg charset unzegesin:

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

      D'Tatsaach ass, dass de Problem Dir net ernimmt schéngen der CKEditor gin, zu firwat ech et an verschidde Programmer benotzt a kee Problem mat speziellen Zeechen hunn. och getest der DEMO op der Websäit d'Entwéckler, an ech hat gesinn net Problem. gesinn hei: http://ckeditor.com/demo

  7. Marcio gesot:

    Gudde Mëtteg ech versicht den Text an textArea opmëcht schrëftlech ze kréien op d'Datebank ze schécken mee ech kann net, Et huet e puer Method den Text ze kréien?
    merci

  8. gudde Mëtteg.
    Ech plangen dësem Apparat fir medezinesch Rezept op benotzt – eppes Munch och einfach.
    – Ech wollt wëssen, wéi d'Lat ze setzen héich (wou ass d'Funktionalitéit) ginn verstoppt (wëll e bëssen Knäppchen, datt et an der Redaktioun den Text verschwannen mécht)
    – Och wéi do ginn ech fort mat ënnen Bar (dee schéngt “Kierper” an aner Tags) ?
    – Wéi maachen ech den Text Këscht mat enger maachen “Héicht” automatesch: Typ, wann ech prescribe 10 Medikament lengthening d'Linn drécke misst gëtt iwwerdeems ech per… Wann ech Typ just 1 Medikamenter Këscht ass bei der Zäit vun der ech Typ…

    • Hallo, entschëllegt, do waren puer Schnëtt (opginn) an Ärer Code, sou Stoppen et just.

      An deem wat muss Dir, et ass ganz méiglech, mee ech proposéiere sicht eng berufflech deen Javascript versteet Iech ze hëllefen.

      Ech soen just den Seeler:

      – verstoppen Toolbar (uewe riets):

      1
      2
      3
      
      war Editeur = CKEDITOR.an der Schlaang( "Editor1", {
          removePlugins: "Uewe riets"
      } );

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

      – Erhéijung Héicht automatesch (autogrow):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (Manifestatioun)

      Beispill:

      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>
        <Kapp>
          <Titel>CKEditor</Titel>
          <meta Inhalt="text/html; charset = UTF-8" http-equiv="content-type" />
          <Schrëft src="http:////cdn.ckeditor.com/4.5.3/basic/ckeditor.js"></Schrëft>
          <Schrëft src="plugin.js"></Schrëft>  <!-- kréien Plugin.JS em http://ckeditor.com/addon/autogrow ->  
          <Schrëft Typ="text/javascript">
           Fënster.onload = Funktioun()  {
              CKEDITOR.schounen( "Editor1", {             
                  removePlugins: "Elementspath", 
                  removePlugins: "Uewe riets",
                  extraPlugins: "Autogrow",
                  autoGrow_minHeight: 70,
                  Héicht: "70px"
              });
           };
          </Schrëft>
        </Kapp>
        <Kierper>
          <Form Aktioun="request.php" Method="post">
            <textarea ID="editor1" Numm="editor1">initialen Text.</textarea>
            <Input Typ="submit" Wäert="Submit" />
          </Form>  
        </Kierper>
      </HTML>
  9. Claudio gesot:

    Ola Taylor, Gratulatioun ganz gutt erklärt Post. Ech wëll dës Redakter an engem PHP Applikatioun ze benotzen a géif gären wëssen wéi eng Combo ze schafen (oder Knäppchen) am uewe riets BD Donnéeën ze bréngen an den Text ze setzen? an anere Wierder, vun engem Knäppchen Dir géift oppen engem Dialog Këscht mat dem Resultat vun engem Paieziedel an der Datebank e Rekord ze wielen.
    Dir kënnt?

  10. Glaydison Silva gesot:

    Hallo, super Post. Kënnt ech virschloen en neien Post? Ech brauch Hëllef e Knäppchen ze realiséieren Biller ze eropluede, DEMO t'selwecht wou Dir op d'Server goen an kann an esou. Ech kann guer net.

Verloossen engem Antwort

Är Email Adress gëtt net publizéiert. Néideg Felder sinn markéiert mat *