Jak skonfigurować ckeditor, aby nie zawijał zawartości w bloku?

Używam ckeditor na mojej stronie, aby ułatwić użytkownikom wprowadzanie HTML.

Jednak dane, które otrzymuję z ckeditor, są zawinięte w <p></p> bloki. (Czego nie chcę.)

Czy Jest jakieś ustawienie konfiguracyjne, które zmusza edytor do nie zawijania tekstu w nic?

Author: jadarnel27, 2010-07-27
Source

5 answers

Dodaj następujący plik do konfiguracji .js plik dla CKEditor: 

config.enterMode = CKEDITOR.ENTER_BR;

Przykład: 

...

CKEDITOR.editorConfig = function (config)
{
    config.enterMode = CKEDITOR.ENTER_BR;

    ...
};

Szczegóły

Ustawienie konfiguracji, które kontroluje to zachowanie, opiera się na tym, co chcesz się stać, gdy użytkownik naciśnie Enter.

Na wypadek, gdyby ktoś, kto dopiero pracuje z HTML ' em, przeczytał to, załączam podstawowe wyjaśnienie pojęć i dlaczego trzeba wstawić znacznik, gdy klucz Enter jest wciśnięty.

Wiemy, że jeśli wprowadzimy jakiś tekst do dokumentu HTML, a następnie umieścimy dodatkowy tekst w nowej linii, przeglądarka nie wyświetli tekstu w dwóch liniach, zignoruje wszelkie zwroty karetki i skondensuje wiele spacji między znakami do jednej spacji.

Następujący HTML: 

qwer
tyui

Zostanie renderowane jako:

Qwer tyui

Więc edytor musi wstawić znacznik HTML, aby powiedzieć przeglądarce, że powinna wyświetlać druga grupa tekstu w nowej linii.

Ustawienie konfiguracji, które kontroluje to jest {[9] } i oferuje trzy opcje:

1-wstawić paragraf

Ustawienie domyślne tworzy element akapitu za każdym razem, gdy Enter jest wciśnięty: 

config.enterMode = CKEDITOR.ENTER_P; // inserts `<p>...</p>`

2-Wstaw "div"

Możesz utworzyć div element zamiast akapitu: 

config.enterMode = CKEDITOR.ENTER_DIV; // inserts `<div></div>`

3-Insert break (ustawienie, którego szukasz)

Jeśli wolisz nie owijać tekst w dowolnym miejscu, możesz wstawić znacznik podziału linii: 

config.enterMode = CKEDITOR.ENTER_BR; // inserts `<br />`

Dokumentacja Ckeditora wskazuje, że używanie ustawienia ENTER_BR nie jest zalecane :

Uwaga: zaleca się stosowanie ustawienia CKEDITOR.ENTER_P ze względu na jego wartość semantyczną i poprawność. Edytor jest zoptymalizowany dla tego ustawienia.

Inne powiązane ustawienie 'autoParagraph'

Istnieje drugie ustawienie, które kontroluje podobną sytuację - config.autoParagraph. Jak to funkcje zależą od ustawienia config.enterMode omówionego powyżej.

autoParagraph określa, czy elementy inline, takie jak {[16] } są zawinięte w element blokowy (p lub div) określony przez ustawienie enterMode. Domyślne jest zawijanie elementów w wierszu, więc jeśli wpiszesz taką rozpiętość (jako HTML): 

<span>asdfg</span>

Będzie zawinięty w element p lub div w ten sposób: 

<p><span>asdfg</span></p>

Lub to: 

<div><span>asdfg</span></div>

Element inline nie zostanie zawinięty, jeśli ustawisz to na false lub jeśli ustawisz enterMode do CKEDITOR.ENTER_BR.

Dokumentacja CKEditor zawiera tę notatkę o config.autoParagraph:

Uwaga: zmiana wartości domyślnej może spowodować nieprzewidywalne problemy z użytecznością.

Jeszcze więcej ustawień

Są jeszcze trzy ustawienia, które są nieco związane z tym tematem:

  • config.fillEmptyBlocks
  • config.forceEnterMode
  • config.ignoreEmptyParagraph

Odniesienie

Pełna lista dostępnych konfiguracji opcje można znaleźć tutaj:

 119
Author: codewaggle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-02 06:00:52

Wiem, że jestem trochę spóźniony do gry, ale myślę, że opcja, której szuka OP, to: 


    config.autoParagraph = false;
 14
Author: MikeBman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-11 19:30:22

Jest to odpowiedź doskonale powyżej, jednak jak wspomniano, tak naprawdę nie należy zmieniać tego w głównym config.

Poprawnym sposobem na to jest per .zastąp naprawdę.

Tzn. 

    <form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
    <textarea id="editor2" name="editor2" rows="300"><?php echo $editor2;?></textarea>
    <textarea id="editor1" name="editor1" rows="1" cols="50" onfocus="this.value=''; this.onfocus=null;">Type Tab Title Here:</textarea>
    <input type="submit" value="Submit">
    </form>

<script type="text/javascript">  
    CKEDITOR.replace( 'editor2', { 
    enterMode: CKEDITOR.ENTER_BR, 
    on: {'instanceReady': function (evt) { evt.editor.execCommand('maximize');     }},
    });      
    </script>
 5
Author: ablueman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-10 12:09:59

Bardzo prostym rozwiązaniem bez żadnych zmian konfiguracji jest użycie

  1. shift+enter dla przerwania linii <br> i
  2. po prostu enter spowodowałby nowy akapit.

Zaletą jest to, że nie musisz wprowadzać żadnych zmian w konfiguracji. Plus, masz oba.

 4
Author: Neil Patrao,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-30 14:17:44

Jeśli chcesz wykluczyć tag <p> i chcesz tylko podstawowe narzędzie do edycji, takie jak pogrubiony kursywą indeks górny Indeks dolny itp. w Ckeditorze, wykonaj następujące kroki:

Jestem tego w 100% pewien, ponieważ badałem 36 godzin bez przerwy:)

Krok 1: Dodaj ten skrypt na swojej stronie PHP 

<script type="text/javascript">  
    CKEDITOR.replace( 'editor1', { 
    enterMode: CKEDITOR.ENTER_BR, 
    on: {'instanceReady': function (evt) { evt.editor.execCommand('');}},
    }); 
</script>

Krok 2: dodaj id="editor2" i onfocus="this.value='';" w textarea w ten sposób 

<textarea id="editor2" name="AsYourWish" onfocus="this.value='';">

Krok 3: Upewnij się, że Usuń Class="ckeditor" z Textarea.

Krok 4: przeładuj stronę, jeśli się nie stało Usuń Pamięć podręczna / Historia i ponowne uruchomienie komputera / laptopa.

Krok 5: Its Done:)

 2
Author: Rishi Rich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-13 08:26:29