Z kolei TEXTAREA w edytorze (WYSIWYG | CKE)

Oto szybka pomoc, aby zintegrować CKE z aplikacji sieci Web w trzech krokach.

Prezentacja

Skręć w swoim Tagi TEXTAREA w sieci Web Edytor jest już skomplikowane zadanie. Wśród wielu redaktorów, które można znaleźć w Internecie, Widzimy, że korzystanie z CKE. Zobacz Edytor w akcji w tym DEMO.

Instalacja

Pobierz CKE w http://ckeditor.com/download. Wersja używana w tym poście 3.6.4, z 17 Lip 2012. Wyodrębnij plik ckeditor_3.6.4.zip wraz z aplikacji. Folderze CKE zostanie utworzony. Gotowe, teraz po prostu zrobić rozmowy w ramach kodu źródłowego!

Integracja

CKE jest aplikacją JavaScript. Aby ją przeczytać, po prostu zrobić proste wywołanie go w Tagi Głowica z kodu źródłowego. To zrobione, API Javascript z CKE już będzie gotowe do użytku. Pamiętaj, aby dopasować ścieżkę pliku CKEditor.js do katalogu, w którym rozpakowane.

Krok 1 – Zadzwonić do CKE
1
2
3
  <Głowica>
    <Typ skryptu="text/javascript" SRC="ckeditor/ckeditor.js"></skrypt>
  </Głowica>
Krok 2 – Utwórz pole TEXTAREA
1
2
3
  <ciało>
    <Identyfikator TextArea="editor1" Nazwa="editor1">&Lt;p&GT;Wartość początkowa.&Lt;/p&GT;</TextArea>
  </ciało>
Krok 3 – Stan TEXTAREA (IDENTYFIKATOR) zostaną zastąpione CKE
1
2
3
4
5
6
7
  <Głowica>
    <Typ skryptu="text/javascript">
      okno.OnLoad = Funkcja()  {
        CKE.Zamień( 'editor1' );
      };
    </skrypt>    
  </Głowica>

Gotowe, już działa! Nie wierzę? Zapisz, niezależnie od “F5” w przeglądarce i zobacz sam… Kompletny kod wygląda tak:

Kompletny kod

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<HTML>
  <Głowica>
    <tytuł>CKE</tytuł>
    <meta content="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></skrypt>
    <Typ skryptu="text/javascript">
      okno.OnLoad = Funkcja()  {
        CKE.Zamień( 'editor1' );
     };
    </skrypt>
  </Głowica>
  <ciało>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&Lt;p&GT;Wartość początkowa.&Lt;/p&GT;</TextArea>
      <input type="submit" value="Submit" />
    </formularz>  
  </ciało>
</HTML>

Oczywiście, Teraz trzeba wprowadzić korekty jako aplikacji, Zaczynając przez ustawienie działania z formularza, procesu i wskazując, że strona będzie pobierać dane przekazywane pocztą.

Artykuł kończy się tutaj, ale ja zostawię kilka więcej pereł dla ciekawskich:

Porady

(1) Nie zdarzenia onload, Klasa =”CKE”

Jeśli przypiszesz Klasa “CKE” Aby Twój TEXTAREA, Zostaną automatycznie przekonwertowane do CKE, bez konieczności użycia skryptu wywołana przez zdarzenie “OnLoad”, No proste:

1
2
3
4
5
6
7
8
9
10
11
12
13
<HTML>
  <Głowica>
    <tytuł>CKE</tytuł>
    <zawartość meta="text/html; charset = utf-8" http-equiv="content-type" />
    <Typ skryptu="text/javascript" SRC="ckeditor/ckeditor.js"></skrypt>
  </Głowica>
  <ciało>
    <formy działania="request.php" Metoda="post">
      <TextArea Klasa="ckeditor" IDENTYFIKATOR="editor1" Nazwa="editor1">&Lt;p&GT;Wartość początkowa.&Lt;/p&GT;</TextArea>
      <Typ danych wejściowych="submit" wartość="Submit" />
    </formularz>  
  </ciało>
</HTML>

(2) Zmiana podziału wiersza <p> przez <br />

Zauważyłem, że dwa sposoby wymiany P BR, kiedy teclamos wejść. Pierwszy, jest ustawiony parametr enterMode z wartością 2, Od 1 = P, 2 = BR i 3 = DIV.

1
2
3
4
5
6
7
  <Głowica>  
    <Typ skryptu="text/javascript">
      okno.OnLoad = Funkcja() {
        CKE.Zamień( 'editor1', {enterMode: Numer(2)} );
      };
    </skrypt>
  </Głowica>

I tak, Otwórz plik config.js i ustawić coś takiego:

1
2
3
CKE.editorConfig = Funkcja( config ) {
  config.enterMode = CKE.ENTER_BR;
};

W takim przypadku, Po wpisaniu ENTER, Mamy opcje:
CKE. ENTER_P – jest tworzony nowy akapit P;
CKE. ENTER_BR-linia break z BR;
CKE. ENTER_DIV-nowy blok z DIV jest tworzony.

Microsoft zaleca Zamknij i Otwórz w przeglądarce, aby zobaczyć wynik

Ta zmiana, ponieważ mogą być buforowane! Jeśli nadal nie działa, Wyczyść pamięć podręczną przeglądarki.

(3) Zmienić kolor tła paska narzędzi edytora CKE

Jak zauważyliście, Możemy dokonać zmian w naszych CKE przypisywanie parametrów bezpośrednio do CKE lub za pomocą pliku config.js. Tak, Będę wykazać tylko jeden z:

1
2
3
4
5
6
7
  <Głowica>  
    <Typ skryptu="text/javascript">
      okno.OnLoad = Funkcja() {
        CKE.Zamień( 'editor1', {UIColor: '#ff0000'} );
      };
    </skrypt>
  </Głowica>

(4) Łączenie parametrów konfiguracji z CKE

Parametry konfiguracji CKE mogą być łączone. Poznać możliwości, Spójrz na Config API. Przykład:

1
2
3
4
5
6
7
8
9
10
11
12
  <Głowica>  
    <Typ skryptu="text/javascript">
      okno.OnLoad = Funkcja() {
        CKE.Zamień( 'editor1', {  UIColor: '#ccc',
                                        enterMode: CKE.ENTER_P,
                                        customConfig : 'ckeditor/outroConfig.js',
                                        język: 'en'        
                                      } 
                        );
      };
    </skrypt>
  </Głowica>

(5) Obsługiwane języki w CKE

Obsługa edytora CKE 58 Języki, w tym “EN”. Zobacz więcej na Języki interfejsu użytkownika. Powyższy przykład ilustruje korzystanie.

(6) Dostosowywanie paska narzędzi

– Podstawy

Nie chcesz podać wszystkie funkcje edytora CKE. Tak, Dlaczego nie optymalizacji narzędzi, w zależności od potrzeb? Poniżej przedstawiono przykład pozostawiając bardzo podstawowy edytor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <Głowica>  
    <Typ skryptu="text/javascript">
      okno.OnLoad = Funkcja() {
        CKE.Zamień( 'editor1', {
                           pasek narzędzi:
                           [
                             { Nazwa: 'basicstyles', elementy : [ 'Pogrubienie',"Kursywa" ] },
                             { Nazwa: "paragraf", elementy : [ 'NumberedList','BulletedList' ] },
                             { Nazwa: 'narzędzia', elementy : [ 'Maksymalizuj','-','O' ] }
                           ]}         
                         );
      };
    </skrypt>
  </Głowica>

– Zakończyć

Poniżej przedstawiono przykład pełną. Usunąć przyciski, które nie chcesz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <Głowica>  
    <Typ skryptu="text/javascript">
      okno.OnLoad = Funkcja() {
        CKE.Zamień( 'editor1', {
                           pasek narzędzi: [
                             { Nazwa: "dokument", elementy : [ 'Źródła','-','Zapisz','Nowa strona','DocProps','Podgląd','Drukuj','-','Templates' ] },
                             { Nazwa: 'schowka', elementy : [ 'Cut','Kopiuj','Wklej','PasteText','PasteFromWord','-',"Cofnij",'Przerobić' ] },
                             { Nazwa: 'Edycja', elementy : [ 'Znajdź','Zamień','-','SelectAll','-',"Słownik ortograficzny", 'Scayt' ] },
                             { Nazwa: 'formy', elementy : [ 'Formularza', 'Pole', 'Radio', 'TextField', 'Textarea', 'Wybierz', 'Button', 'ImageButton', 'Ukryte' ] },
                             '/',
                             { Nazwa: 'basicstyles', elementy : [ 'Pogrubienie',"Kursywa",'Underline',"Strike","Indeks dolny",'Górny','-','RemoveFormat' ] },
                             { Nazwa: "paragraf", elementy : [ 'NumberedList','BulletedList','-','Zmniejsz wcięcie','Indent','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
                             { Nazwa: 'linki', elementy : [ 'Link','Rozłączyć','Kotwica' ] },
                             { Nazwa: 'Wstaw', elementy : [ 'Obraz','Flash','Table','HorizontalRule','Uśmieszków','SpecialChar','PageBreak','Iframe' ] },
                             '/',
                             { Nazwa: 'style', elementy : [ 'Style',"Format",'Czcionka','Rozmiar czcionki' ] },
                             { Nazwa: 'kolory', elementy : [ 'TextColor','Kolor tła' ] },
                             { Nazwa: 'narzędzia', elementy : [ 'Maksymalizuj', 'ShowBlocks','-','O' ] }                            
                           ]}         
                         );
      }; 
    </skrypt>
  </Głowica>

– Moderowane

Jest to przykład bardziej umiarkowane, z narzędziem tylko pasek, ale z głównych funkcji. Należy zauważyć, że, w tym, Istnieje możliwość łączenia i określić wysokość i szerokość edytora.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<Głowica>  
  <Typ skryptu="text/javascript">
    okno.OnLoad = Funkcja() {       
        CKE.Zamień( 'editor1', {
                           pasek narzędzi:
                           [
                             { Nazwa: 'basicstyles', elementy : [ 'Pogrubienie',"Kursywa",'Underline' ] },
                             { Nazwa: "paragraf", elementy : [ 'NumberedList','BulletedList' ] },
                             { Nazwa: "paragraf", elementy : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
                             { Nazwa: 'style', elementy : [ 'Czcionka','Rozmiar czcionki' ] },
                             { Nazwa: 'kolory', elementy : [ 'TextColor','Kolor tła' ] },
                             { Nazwa: 'schowka', elementy : [ 'Cut','Kopiuj','Wklej','PasteFromWord','-',"Cofnij",'Przerobić' ] },                             
                             { Nazwa: 'narzędzia', elementy : [ 'Maksymalizuj','-','O' ] }
                           ],
                           Szerokość: "740px",
                           Wysokość: "200px"}
                         );
    };
  </skrypt>
</Głowica>

(7) TextArea (CKE) pusty, po wysłaniu formularza

Jeśli Textarea/CKE pojawiają się puste (pusty) Po wysłaniu formularza, Możesz użyć tego “Fajerwerki” I stworzył poniżej, faktycznie, który służy Aby uzyskać zawartość CKE i grać w odpowiednich Textarea. Jest to realizowane przez wywołanie funkcji setCKEditorToTextarea() Po kliknięciu przycisku wysyłania (przycisk Prześlij lub), normalnie w onclick zdarzenia() przycisk.

1
2
3
4
5
6
<Typ skryptu="text/javascript">
      Funkcja setCKEditorToTextarea() {
        jest(var Nazwa_wystąpienia w CKE.wystąpienia)
          CKE.wystąpienia[Nazwa_wystąpienia].updateElement();            
      }
</skrypt>

Słów od autora

CKE jest edytorem tekstu do wewnątrz stron sieci web. Jest to edytor WYSIWYG, co oznacza, że tekst jest edytowana przez użytkownika będzie tak blisko, jak to możliwe z opublikowanego. On przynosi do funkcji sieci web wspólnej edycji, Znalezione w pulpit, aplikacje do edycji, takich jak Microsoft Word i OpenOffice. Po CKE jest na licencji Licencje “Open Source” i handlowych, Możesz go używać w aplikacji. Jest to doskonały edytor dla programistów, zaprojektowany, aby zapewnić łatwe i wydajne rozwiązania dla ich użytkowników.

Inne edytory

Czcionki

Po pierwsze jest to, że! Więcej szczegółów na stronie autora.

Całkowitej trafienia: 58778

27 Komentarze na temat “Z kolei TEXTAREA w edytorze (WYSIWYG | CKE)

  1. Bardzo fajny post, część, do której chcę użyć jest związane z tematyką 6, biorąc pod uwagę, że CKE zapisuje w kodzie html zawartości opisane wewnątrz składnika textarea muszą przesłać tekst za pośrednictwem poczty e-mail w formacie html, ale trzeba zapisać w BD w formacie txt sam. Czy masz jakieś sugestie, które mogę używać? :)

  2. Ronaldo powiedział:

    Facet, Zajmuję się tworzeniem projektu oraz formularz zawiera dwa pola textarea.
    Ja jestem przy pomocy edytora CKE w obu.

    Godziny urzędowania – Po lewej stronie

    Zamień CKE.( ' expedienteEsq’ );
    CKEDITOR.add

    Godziny urzędowania – Prawo

    Zamień CKE.( ' expedienteDir’ );
    CKEDITOR.add

    Edytor jest prawidłowo stosowane.. Ale gdy formularz przetwarza plik php tylko odbiera dane z pierwszego pola i drugi spowoduje utratę.

    To jest problem z CKE? bo jeśli nie używasz go uzyskać danych z dwóch pól normalnie
    .
    Użyłem struktury sugerowane przez samej strony CKE.

    • Witam Ronaldo, Zrobiłem test tutaj i nie było problemu. Wykonaj następujące czynności, pobrać Poniższy kod, umieścić w pliku “Teste.php” wewnątrz serwera, ale na białym tle z aplikacji, która daje problem. Należy zauważyć, że po wysłaniu formularza z dwoma textarea (CKE), dane będą wysyłane normalnie.

      Plik Teste.php (DWA JEDNOCZESNE POLA TEKSTOWE)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <HTML>
        <Głowica>
          <tytuł>CKE</tytuł>
          <meta content="text/html; charset = utf-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></skrypt>
          <script type="text/javascript">
            Window.OnLoad = funkcja()  {
              Zamień CKE.( 'editor1' );
              Zamień CKE.( 'editor2' );
           };
          </skrypt>
        </Głowica>
        <ciało>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">Początkowa wartość 1</TextArea>
            <textarea id="editor2" name="editor2">Początkowa wartość 2</TextArea>
            <input type="submit" value="Submit" />
          </formularz>  
        </ciało>
      </HTML>
      <?PHP echo ' Edytor 1 ---> '.@$_ ŻYCZENIE['editor1'].'<br />'; ?>
      <?PHP echo ' Edytor 2 ---> '.@$_ ŻYCZENIE['editor2'].'<br />'; ?>
  3. Ronaldo powiedział:

    Starałem się przekazać kod, ale nie sądzę, że został opublikowany. Ale wiesz, co się stało z prawej? Wykorzystanie Edytora CKE, tylko jeden z textarea wysyła dane do innego jest pusty.

    • Ok, Myślę, że rozumiem. Jak pokazano powyżej, Miałem ten sam problem. Tak, reanalise kod, Zobacz, jeśli nie masz więcej niż jedno pole (dane wejściowe) o tej samej nazwie (Nazwa). Uściski!

      • Ronaldo powiedział:

        Postanowiłem się z własną Wskazówka…. (6) TextArea (CKE) pusty, po wysłaniu formularza

        Bastou colocar função lá e ok :) Essa forma q vc passou é usando php ne? Nawet strony w php rozmieszczone edytora za pomocą javascript.
        Dzięki za wskazówki

        wykorzystując mimo że q jest przedmiotem post, Program przez długi czas z java i .net, php do mniej czasu i jestem podnoszenia z daty konwersji ciąg znaków. Nie ma funkcji direct, Jak do tej pory (strtotime) Prawo? Myślisz, że wiesz php No więcej q I. Jeśli wiesz, że to coś, posyłać do mojego poczta ronaldodantas2@gmai.com

        Nie ma potrzeby, aby opublikować ten komentarz. Dzięki za wskazówki.

  4. Witam Taylor bardzo dobry post.

    Zainstalowane i używam działa dobrze. Mam wątpliwości, na przykład w swoim blogu, wprowadzone w żółtych kartoników ze skryptami. Jak to zrobić? Oraz funkcję w CKE?

    Dziękuję

  5. Fernando powiedział:

    Jak włączyć znak specjalny th(PIERWSZY 1) i th(2. DRUGI) CHYBA KLIKNIĘCIU NARZĘDZIA WSTAW ZNAK SPECJALNY? CHCIAŁBYM TO ZROBIĆ, WPISUJĄC NA KLAWIATURZE, SAM BEZ OTWIERANIA DOWOLNEGO OKNA.

    • Facet, Testowaliśmy tutaj i po prostu zrobić tradycyjną formą, która działa, IE, przytrzymaj klawisz ALT i wpisz sekwencję liczb odpowiadających żądany symbol. Przykład: ALT + 166 = Rd i ALT + 167 = °. Powiedział!

  6. James powiedział:

    Dzień dobry, Bardzo dobry post, Zaczynam teraz pracować z javascript, i potrzebuję stworzyć tekst z edytora, Pomyślałem, że użyję CKE, ale z trudem aby móc manipulować, Szkoda tylko, że należy wpisać , Zapisz, Nowy, Cofnij, Wykonaj ponownie, Wklej, Kopiowanie, i wybór języka, tylko zamiast być w formie pisemnej, To byłby być języków programowania, i wtedy musiał obsłużyć odebranych danych, trochę jak normalne edytora kodu, tylko online, Jeśli możesz mi pomóc.

  7. Kumpel, Mam zainstalowany dobry, ale jest mały problem, że mam do czynienia, to, że zamienia znaki specjalne w kody html jak jest â â i chciałem żeby być tak dla mojej bazy danych, ma jak?

    • Oops, że tam może być coś z Edytor, którego używasz, aby napisać kod. Spróbuj za pomocą Notatnika i wprowadź pełny przykład kodu HTML, i zobacz, jeśli problem pozostaje.

      Spróbuj także ustawić zasady, które mówią do strony, która ustawić kodowanie do użycia (ISO-8859-1 lub UTF-8).

      1
      2
      3
      4
      5
      
      <ciało>
        <Głowica>
            <meta charset="UTF-8">
        </Głowica> 
      ...

      Jeśli używasz PHP, ustawić charset na początku kodu, Zanim cokolwiek:

      1
      
        <?PHP Nagłówek("Content-Type: tekst/html;  charset = ISO-8859-1",prawda) ?>

      Lub, próbować wobec traktować treści żądania przy użyciu zainstalowanego zestawu znaków:

      1
      
        htmlentities( utf8_decode($_ POST['zmienna']) );

      Faktem jest, że problem, ww nie wydaje się CKE, Dlaczego używać go w różnych aplikacjach i miał problemu z znak specjalny. Testowane również DEMO na stronie autora, i widziałem, że nie ma problemu. Zobacz tu: http://ckeditor.com/demo

  8. Marcio powiedział:

    Dzień dobry ja jestem trudny do uzyskania tekstu w polu tekstowym za pomocą javascript, aby wysłać do bazy danych, ale nie mogę, Czy jest wszelki Metoda, aby uzyskać tekst?
    Dziękuję

  9. Dzień dobry.
    Myślę, że za pomocą tego urządzenia na receptę lekarza – coś tak proste, nawet.
    – Chcesz wiedzieć, jak skonfigurować na górnym pasku (gdzie jest funkcjonalność) Ukryj (jak mały przycisk, aby sprawić, że znikają po edycji tekstu)
    – Również jak usunąć z dolnego paska (gdzie pojawia się “ciało” i inne Tagi) ?
    – Jak zrobić pole tekstowe z “Wysokość” Automatyczne: typu, Jeśli przepiszesz 10 pole zostanie encompridando leki, podczas wpisywania… Jeœli ja typ tylko 1 Lek jest na wysokości pole I wpisz…

    • Cześć, Przepraszam, Tam były niektóre kawałki (awarie) w kodzie, więc skończyło się na usunięcie go.

      O tym, czego potrzebujesz, Jest całkiem możliwe, ale sugerowałbym patrząc na specjalistę, który rozumie JavaScript, aby pomóc.

      Powiem tylko sposób kamienie:

      – Ukryj pasek narzędzi (pasek narzędzi):

      1
      2
      3
      
      var Redaktor = CKE.inline( 'editor1', {
          removePlugins: 'pasek narzędzi'
      } );

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

      – Automatycznie zwiększyć wysokość (autogrow):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (Demonstracja)

      Przykład:

      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>
        <Głowica>
          <tytuł>CKE</tytuł>
          <zawartość meta="text/html; charset = utf-8" http-equiv="content-type" />
          <src skryptu="http:////CDN.CKEditor.com/4.5.3/Basic/CKEditor.js"></skrypt>
          <src skryptu="plugin.js"></skrypt>  <!-- Pobierz plugin.JS na http://CKEditor.com/addon/autogrow-->  
          <Typ skryptu="text/javascript">
           okno.OnLoad = Funkcja()  {
              CKE.Zamień( 'editor1', {             
                  removePlugins: 'elementspath', 
                  removePlugins: 'pasek narzędzi',
                  extraPlugins: 'autogrow',
                  autoGrow_minHeight: 70,
                  Wysokość: '70px'
              });
           };
          </skrypt>
        </Głowica>
        <ciało>
          <formy działania="request.php" Metoda="post">
            <Identyfikator TextArea="editor1" Nazwa="editor1">Początkowego tekstu.</TextArea>
            <Typ danych wejściowych="submit" wartość="Submit" />
          </formularz>  
        </ciało>
      </HTML>
  10. Claudio powiedział:

    Witam Taylor, Parabéns peło post muito bem explicado. Aby użyć tego edytora aplikacji PHP i chciałbym się dowiedzieć jak tworzyć combo (lub przycisk) na pasku narzędzi, aby przynieść BD danych do wstawienia w tekście? IE, Po kliknięciu na przycisk by otworzyć okno dialogowe wynik kwerendy Wybierz rekord.
    Można?

  11. Glaydison Silva powiedział:

    Cześć, wielki post. Może sugerować nowy post? Potrzebujesz pomocy, aby zaimplementować przycisk, aby przesłać zdjęcia, równa DEMO, gdzie można przenieść do serwera i takie. Nie mogę w żaden sposób.

Odpowiedz

Twój adres e-mail nie zostaną opublikowane. Wymagane pola są oznaczone *