TEXTAREA naşir dönün (WYSIWYG | CKEditor)

Burada yalnız üç addımlar öz Web ərizə ilə CKEditor inteqrasiya tez yardım edir.

təqdimat

Öz növbəsində tags Web redaktoru TEXTAREA artıq mürəkkəb vəzifədir. İnternet tapa bilərsiniz çox redaktorları arasında, görək və ya istifadə CKEditor etmək. fəaliyyət bu redaktoru bax DEMO.

quraşdırma

da CKEditor Download http://ckeditor.com/download. Bu ismarıcda istifadə versiyası idi 3.6.4, of 17 Jul 2012. fayl çıxarış ckeditor_3.6.4.zip Sizin tətbiqi ilə. bir qovluq ckeditor yaradılacaq. yaxında, İndi yalnız mənbə kodu daxilində zəng!

inteqrasiya

CKEditor bir JavaScript proqram. oxumaq üçün, yalnız ona bir sadə zəng tags mənbə kodu HEAD. bunu, API CKEditor JavaScript artıq istifadə üçün hazırdır. fayl yolunu tənzimləmək üçün saxla ckeditor.js Siz unzipped kataloq.

addım 1 – CKEditor üçün zəng edin
1
2
3
  <baş>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></yazı>
  </baş>
addım 2 – bir textarea sahəsində yaradın
1
2
3
  <bədən>
    <textarea id="editor1" ad="editor1">&lt;p&gt;ilkin dəyəri.&lt;/p&gt;</textarea>
  </bədən>
addım 3 – nə TEXTAREA De (id) Bu CKEditor ilə əvəz olunacaq
1
2
3
4
5
6
7
  <baş>
    <script type="text/javascript">
      pəncərə.onload = funksiyası()  {
        CKEDITOR.dəyişdirmək( "Editor1" );
      };
    </yazı>    
  </baş>

yaxında, artıq işlər! inanmır? sakitləşdirmək, orada vermək “F5” və brauzerinizin özünüz baxın… tam code bu kimi görünür:

tam code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
  <baş>
    <başlıq>CKEditor</başlıq>
    <meta content="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></yazı>
    <script type="text/javascript">
      pəncərə.onload = funksiyası()  {
        CKEDITOR.dəyişdirmək( "Editor1" );
     };
    </yazı>
  </baş>
  <bədən>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&lt;p&gt;İlkin dəyər.&lt;/p&gt;</textarea>
      <input type="submit" value="Submit" />
    </forma>  
  </bədən>
</html>

aydın, indi sizin proqram kimi düzəlişlər etmək lazımdır, qəbulu başlayacaq fəaliyyət sizin FORM, almaq və POST vasitəsilə təqdim data emal səhifə ifadə.

məqalə burada bitir, amma maraqlı bir neçə mirvari tərk edəcəyik:

tips

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

Siz sinif təyin varsa “ckeditor” Sizin textarea üçün, avtomatik olaraq bir CKEditor çevrilir olacaq, hadisə adlı script istifadə etmədən “onload”, və sadə:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
  <baş>
    <başlıq>CKEditor</başlıq>
    <meta content="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></yazı>
  </baş>
  <bədən>
    <forma fəaliyyət="request.php" üsul="post">
      <textarea sinif="ckeditor" id="editor1" ad="editor1">&lt;p&gt;ilkin dəyəri.&lt;/p&gt;</textarea>
      <input type="submit" dəyər="Submit" />
    </forma>  
  </bədən>
</html>

(2) Exchange line break <p> ilə <br />

Mən teclamos ENTER zaman P BR ilə dəyişdirmək üçün iki yol fərq. ilk, Bu parametri müəyyən edir enterMode dəyəri 2, çünki 1 = P, 2 = BR və 3 = DIV.

1
2
3
4
5
6
7
  <baş>  
    <script type="text/javascript">
      pəncərə.onload = funksiyası() {
        CKEDITOR.dəyişdirmək( "Editor1", {enterMode: nömrə(2)} );
      };
    </yazı>
  </baş>

və ya, faylı açmaq config.js və kimi bir şey müəyyən:

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

Bu halda, ENTER yazın, Biz variantları:
CKEDITOR.ENTER_P - Yeni maddə P yaradılmışdır;
CKEDITOR.ENTER_BR - BR ilə line break;
CKEDITOR.ENTER_DIV - Yeni blok DIV ilə yaradılmışdır.

Mən yaxın gəlir və nəticə görmək üçün brauzeri açmaq

bu dəyişiklik, Siz cached ola bilər, çünki! hələ də iş deyilsə, browser cache temizlemek.

(3) CKEditor toolbar fon rəngini dəyişdirin

Fark kimi, Biz birbaşa ckeditor obyekt və ya fayl vasitəsilə bizim CKEditor təyin parametrləri dəyişiklik edə bilər config.js. Buna görə də, Mən yollarından yalnız bir nümayiş lazımdır:

1
2
3
4
5
6
7
  <baş>  
    <script type="text/javascript">
      pəncərə.onload = funksiyası() {
        CKEDITOR.dəyişdirmək( "Editor1", {Nordwestlicher: "# Ff0000"} );
      };
    </yazı>
  </baş>

(4) CKEditor konfiqurasiya parametrləri birləşdirərək

CKEditor konfiqurasiya parametrləri birləşdirilə bilər. imkanları bilmək, nəzər API Config. misal:

1
2
3
4
5
6
7
8
9
10
11
12
  <baş>  
    <script type="text/javascript">
      pəncərə.onload = funksiyası() {
        CKEDITOR.dəyişdirmək( "Editor1", {  Nordwestlicher: "Ccc",
                                        enterMode: CKEDITOR.ENTER_P,
                                        customConfig : "Ckeditor / outroConfig.js",
                                        dil: "Pt-br"        
                                      } 
                        );
      };
    </yazı>
  </baş>

(5) Dillər CKEditor tərəfindən dəstəklənir

O CKEditor suporta 58 dilləri, daxil və ya “pt-br”. daha bax User Interface Dillər. Yuxarıda misal istifadə nümayiş etdirir.

(6) toolbar özelleştirme

– əsas

Siz CKEditor bütün xüsusiyyətləri təmin etmək istəyirəm bilər. sonra, lazım niyə toolbar optimize deyil? yaxşı BASIC redaktoru tərk nümunəsi.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <baş>  
    <script type="text/javascript">
      pəncərə.onload = funksiyası() {
        CKEDITOR.dəyişdirmək( "Editor1", {
                           toolbar:
                           [
                             { ad: "Basicstyles", maddələr : [ "Bold","Italic" ] },
                             { ad: "Bəndində", maddələr : [ "NumberedList","BulletedList" ] },
                             { ad: "Tools", maddələr : [ "Artırın",'-',"Haqqında" ] }
                           ]}         
                         );
      };
    </yazı>
  </baş>

– tam

Aşağıda bir daha tam nümunəsidir. Siz istəmirəm ki, düymələri çıxarın.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <baş>  
    <script type="text/javascript">
      pəncərə.onload = funksiyası() {
        CKEDITOR.dəyişdirmək( "Editor1", {
                           toolbar: [
                             { ad: "Sənəd", maddələr : [ "Source",'-','Yadda saxla',"NewPage","DocProps","Preview","Print ','-','Şablonlar' ] },
                             { ad: "Pano", maddələr : [ "Cut","Copy",'Yapışdır',"Keçmiş Text","PasteFromWord",'-',"Al","Yeniden" ] },
                             { ad: "Redaktə", maddələr : [ "Tap","Dəyişdirin",'-',"SelectAll",'-',"Imla kontrolü yapma", 'Scayt' ] },
                             { ad: "Formaları", maddələr : [ "Form", "Onay", "Radio", "TextField", "Textarea", Seçin ", "Button", "ImageButton", "HiddenField" ] },
                             '/',
                             { ad: "Basicstyles", maddələr : [ "Bold","Italic","Çizgi","Strike","Simge","Üst",'-',"RemoveFormat" ] },
                             { ad: "Bəndində", maddələr : [ "NumberedList","BulletedList",'-',"Outdent","Girinti",'-',"Blockquote","CreateDiv", '-',"JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock",'-','BidiLtr','BidiRtl' ] },
                             { ad: "Links", maddələr : [ "Link","Şəbəkədən ayrılmaq","Anchor" ] },
                             { ad: "Daxil", maddələr : [ "Image ','Flash',"Table","HorizontalRule","Smiley","SpecialChar","PageBreak","Iframe" ] },
                             '/',
                             { ad: "Üslub", maddələr : [ "Styles","Format","Font","Yazı tipi ölçüsü" ] },
                             { ad: "Rəng", maddələr : [ "Textcolor","Bgcolor" ] },
                             { ad: "Tools", maddələr : [ "Artırın", "ShowBlocks",'-',"Haqqında" ] }                            
                           ]}         
                         );
      }; 
    </yazı>
  </baş>

– mülayim

Bu daha bir nümunəsidir mülayim, bir alət bar ilə yalnız, lakin əsas xüsusiyyətləri ilə. Qeyd edək ki,, daxil, Bu birləşdirmək və redaktoru hündürlüyü müəyyən və eni etmək mümkündür.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<baş>  
  <script type="text/javascript">
    pəncərə.onload = funksiyası() {       
        CKEDITOR.dəyişdirmək( "Editor1", {
                           toolbar:
                           [
                             { ad: "Basicstyles", maddələr : [ "Bold","Italic","Çizgi" ] },
                             { ad: "Bəndində", maddələr : [ "NumberedList","BulletedList" ] },
                             { ad: "Bəndində", maddələr : [ "JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"] },
                             { ad: "Üslub", maddələr : [ "Font","Yazı tipi ölçüsü" ] },
                             { ad: "Rəng", maddələr : [ "Textcolor","Bgcolor" ] },
                             { ad: "Pano", maddələr : [ "Cut","Copy",'Yapışdır',"PasteFromWord",'-',"Al","Yeniden" ] },                             
                             { ad: "Tools", maddələr : [ "Artırın",'-',"Haqqında" ] }
                           ],
                           en: "740px",
                           hündürlük: "200px"}
                         );
    };
  </yazı>
</baş>

(7) textarea (CKEditor) boş məruz yaratmaq üçün

Sizin textarea varsa / CKeditor ağ görünür (boş) şəklində təqdim zaman, Siz istifadə edə bilərsiniz “kələk” Mən aşağıda yaradılmışdır, hansı həqiqətən CKEditor məzmunu tutmaq və müvafiq textarea oynamaq üçün xidmət. Bu funksiyası zəng edilir setCKEditorToTextarea() Siz göndərmək düyməsini basın zaman (ou gönder düyməsini), onclick hadisə normal() düymə.

1
2
3
4
5
6
<script type="text/javascript">
      funksiyası setCKEditorToTextarea() {
        üçün(idi instanceName ilə CKEDITOR.hallarda)
          CKEDITOR.hallarda[instanceName].updateElement();            
      }
</yazı>

Geliştirici sözləri

CKEditor web pages daxilində istifadə etmək üçün bir mətn redaktoru. Bu WYSIWYG redaktoru var, hansı mətn dərc üçün mümkün qədər yaxın olacaq istifadəçi tərəfindən tanınması deməkdir. O, web ümumi editing xüsusiyyətləri gətirir, masa üstü editing proqramları aşkar, Microsoft Word e OpenOffice o como. CKEditor lisenziya altında lisenziya sonra “Açıq mənbə” və kommersiya, Əgər hər hansı bir proqram çərçivəsində istifadə edə bilərlər. Bu developers üçün ideal redaktoru, istifadəçilər üçün asan və güclü həllər təmin etmək üçün yaradılmışdır.

digər redaktorlar

mənbələri

Başlatıcı üçün bu! Daha ətraflı məlumat üçün geliştirici site baxın.

Total icazə: 58778

27 rəylər “TEXTAREA naşir dönün (WYSIWYG | CKEditor)

  1. Çox sərin post, ultilizar mövzu istinad olan diləyirəm hissəsi 6, html saxlanılır CKEditor textarea təsvir content html formatında e-mail vasitəsilə mətn təqdim etməlidir nəzərə alaraq, lakin txt formatında eyni BD Sini lazımdır. Mən ultilizar edə bilərsiniz hər hansı bir təklifiniz? :)

  2. Ronaldo dedi:

    yol, Mən bir layihə inkişaf alıram və bir forma iki sahələri textarea var.
    Mən həm də CKEditor istifadə edirəm.

    rekord – sol

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

    rekord – sağ

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

    redaktor doğru tətbiq. prosesi php faylı yaratmaq zaman yalnız ilk sahəsində data alır və ikinci boş olacaq.

    Bu CKEditor ilə bir problem? Mən istifadə etməyin, çünki adətən iki sahələrdə məlumat almaq
    .
    Mən çox site CKeditor təklif strukturu istifadə.

    • Olá Ronaldo, Mən burada bir test idi və heç bir məsələ var idi. aşağıdakı, Aşağıdakı kodu almaq, bir fayl qoymaq “teste.php” Sizin server ərzində, lakin problem verir tətbiqi təcrid. iki textarea formu göndererek Qeyd edək ki, (CKEditor), data normal göndəriləcək.

      test.php fayl (Eyni zamanda iki textareas)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <html>
        <baş>
          <başlıq>CKEditor</başlıq>
          <meta content="text/html; charset = utf-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></yazı>
          <script type="text/javascript">
            window.onload = funksiyası()  {
              CKEDITOR.replace( "Editor1" );
              CKEDITOR.replace( "Editor2" );
           };
          </yazı>
        </baş>
        <bədən>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">İlkin dəyər 1</textarea>
            <textarea id="editor2" name="editor2">2 ilkin dəyəri</textarea>
            <input type="submit" value="Submit" />
          </forma>  
        </bədən>
      </html>
      <?php əks-səda 'Redaktor 1 ---> ".@$_REQUEST["Editor1"]."<br />"; ?>
      <?php əks-səda 'Redaktor 2 ---> ".@$_REQUEST["Editor2"]."<br />"; ?>
  3. Ronaldo dedi:

    Mən kodu keçməyə çalışdı amma nəşr olunmayıb edirəm. Amma doğru problem anlamaq? yalnız bir textarea of ​​CKEditor istifadə başqa data boş göndərir.

    • Tamam, Mən dərk edirəm. Yuxarıda göstərildiyi kimi, Mən eyni problem yox idi. Buna görə də, kodu rescan, Siz heç bir daha çox sahə var görmek (input) Eyni adı ilə (ad). hugs!

      • Ronaldo dedi:

        Mən öz ucu ilə qərar…. (6) textarea (CKEditor) boş məruz yaratmaq üçün

        Orada funksiyası qoymaq üçün kifayət qədər idi və ok :) Bu forma q vc php haqqını istifadə keçdi? Hətta pages JavaScript istifadə php redaktoru səfərbər olunur.
        ipuçları üçün təşəkkür edirik

        bilmədən q istifadə edərək vəzifəsindən mövzusu deyil, Mən java və .net və php az vaxt and'm aldığınız tarixli dönüşüm simli ilə uzun müddət proqram. Bu birbaşa funksiyası yoxdur, string data kimi (strtotime) nə? Mən q u çox php q I bilirik. Əgər bilirsinizsə, bu həbs mənim e-poçt göndərir ronaldodantas2@gmai.com

        Bu şərh dərc ehtiyac yoxdur. ipuçları üçün təşəkkür edirik.

  4. Ola Taylor çox yaxşı onun post.

    Artıq quraşdırılmış və əsərləri istifadə edirəm. Mən şübhə etmirəm, Sizin blog misal üçün scripts ilə sarı qutuları daxil. Siz bunu necə? Və ckeditor bir xüsusiyyət?

    təşəkkür edirəm

  5. Fernando dedi:

    xüsusi xarakter ci imkan etmək üçün necə(FIRST 1) e ª(İKİNCİ 2) ABŞ OLMADAN TOOL INSERT XÜSUSİ xarakter basın? Mən NO WINDOW açıq ÖZ klaviatura ENTER BU etmək istəyirəm.

    • yol, Mən burada test və yalnız çalışır şərti şəkildə etmək, digər sözlə, ALT düyməsini basıb saxlayın və istədiyiniz simvolu uyğun nömrələri ardıcıllıqla yazın. misal: ALT + 166 = ª e ALT + 167 = º. danışıb!

  6. James dedi:

    Sabahın xeyir, çox yaxşı oğlan post, İndi javascript ilə işləmək üçün başlayan alıram, və bir mətn redaktoru yaratmaq lazımdır, Mən ckeditor istifadə fikir, lakin ağır onu idarə almaq üçün, növü yalnız idi arzulayıram , saxlamaq, yeni, əvvəlki halına qaytar, yeniden yapmak, boyunbağı, köçürmək, və dil qutusu seçimi, yalnız əvəzinə yazılı formasıdır olan, proqramlaşdırma dilləri olacaq, və sonra qəbul data idarə etmək olardı, belə bir normal mənbə kodu redaktoru kimi, yalnız online, Siz mənə kömək edə bilər, əgər.

  7. dost, Mən yaxşı yüklü, bir az problem amma nə mən üzləşdiyi alıram ki, html kodları xüsusi simvol çevirir ki, bir və mən onlara mənim bazası kimi olmaq istəyirdi â növü, Bu var?

    • Opa, Əgər siz kodu yazmaq üçün istifadə olunur redaktoru ilə bir şey ola bilər ki,. ümumi qeydlər blok istifadə edin və tam HTML code nümunə daxil, problem olaraq qalır əgər siz görə.

      istifadə üçün müəyyən charset sizin səhifə demək də müəyyən siyasəti edin (ISO-8859-1 ou UTF-8).

      1
      2
      3
      4
      5
      
      <bədən>
        <baş>
            <meta charset="UTF-8">
        </baş> 
      ...

      Siz PHP istifadə edirsinizsə, charset erkən kodu müəyyən, bir şey əvvəl:

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

      və ya, düzgün charset istifadə sorğu məzmunu müalicə üçün cəhd edin:

      1
      
        htmlentities( utf8_decode($_POST["Dəyişən"]) );

      fakt qeyd problem CKEditor görünür deyil ki, Mən müxtəlif applications istifadə və xüsusi simvol ilə heç bir problem yoxdur, niyə. də geliştirici web DEMO test, və mən problem görmədim. burada görmək: http://ckeditor.com/demo

  8. Marcio dedi:

    Salam mən bazasında göndər javascript vasitəsilə textarea yazılmış mətn almaq üçün çalışıram amma olmur, Bu mətn almaq üçün bəzi metodu var?
    təşəkkür edirəm

  9. Salam.
    Mən tibb resept üçün bu cihaz istifadə planlaşdırırıq – performance hətta sadə bir şey.
    – Mən ali bar qurmaq üçün necə bilmək istəyirdi (harada funksionallığı) gizli ola (Bu mətn redaktə sonra yox edir bir az düyməsinə kimi)
    – Həmçinin necə alt bar ilə getmək yoxdur (hansı görünür “bədən” və digər tags) ?
    – Mən ilə mətn qutusu edə bilərəm “hündürlük” avtomatik: növü, Mən müəyyən əgər 10 Mən yazaraq edirəm isə qutusu uzun olacaq dərman… Mən yazın 1 dərmanlar qutusu Mən tipli zamanda…

    • salam, üzr, bəzi seqmentlər var idi (uğursuzluqlar) Sizin kodu, belə ki, yalnız aradan qaldırılması.

      Bu baxımdan sizə lazım, Bu tamamilə mümkündür, amma sizə yardım etmək üçün JavaScript anlayan bir professional axtarır gəlir.

      Mən halatlar demək lazımdır:

      – Toolbar gizlət (toolbar):

      1
      2
      3
      
      idi Redaktor = CKEDITOR.xətdə( "Editor1", {
          removePlugins: "Toolbar '
      } );

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

      – avtomatik hündürlüyü artırılması (autogrow):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (nümayiş)

      misal:

      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>
        <baş>
          <başlıq>CKEditor</başlıq>
          <meta content="text/html; charset = utf-8" http-equiv="content-type" />
          <script src="http:////cdn.ckeditor.com/4.5.3/basic/ckeditor.js"></yazı>
          <script src="plugin.js"></yazı>  <!-- plugin almaq.em js http://ckeditor.com/addon/autogrow ->  
          <script type="text/javascript">
           pəncərə.onload = funksiyası()  {
              CKEDITOR.dəyişdirmək( "Editor1", {             
                  removePlugins: "Elementspath", 
                  removePlugins: "Toolbar ',
                  extraPlugins: "Autogrow",
                  autoGrow_minHeight: 70,
                  hündürlük: "70px"
              });
           };
          </yazı>
        </baş>
        <bədən>
          <forma fəaliyyət="request.php" üsul="post">
            <textarea id="editor1" ad="editor1">ilkin mətn.</textarea>
            <input type="submit" dəyər="Submit" />
          </forma>  
        </bədən>
      </html>
  10. Claudio dedi:

    Olá Taylor, çox yaxşı izah post təbrik. Mən PHP tətbiqi bu redaktoru istifadə etmək istədiyiniz və bir Combo yaratmaq üçün necə bilmək istərdik (və ya düyməsinə) toolbar mətn daxil BD məlumat gətirmək? digər sözlə, bir düyməsini basmaqla bir rekord seçin bazasında bir sorğu nəticəsində bir informasiya qutusu açmaq olardı ilə.
    Siz?

  11. Glaydison Silva dedi:

    salam, böyük post. Mən yeni bir yazı təklif edə bilər? Mən images yüklemek üçün düyməsini həyata keçirilməsi üçün yardım lazımdır, Siz server və qədər getmək bilər bərabər DEMO. Mən bilməz.

Cavab yaz

E-poçt ünvanından dərc olunmayacaq. Lazım alanlar qeyd olunur *