Come configurare ckeditor per non avvolgere il contenuto nel blocco ?

Sto usando ckeditor sul mio sito Web per semplificare l’inserimento di codice HTML da parte degli utenti.

Tuttavia, i dati che torno dal ckeditor sono racchiusi tra i blocchi

. (Che non voglio.)

C’è qualche impostazione di configurazione che costringe l’editor a non avvolgere il testo in qualcosa?

Aggiungi quanto segue al tuo file config.js per CKEditor:

 config.enterMode = CKEDITOR.ENTER_BR; 

Esempio:

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

Dettagli

L’impostazione di configurazione che controlla questo comportamento si basa su ciò che si desidera che si verifichi quando l’utente preme Invio .

Nel caso in cui qualcuno che è nuovo a lavorare con HTML legge questo, sto includendo alcune spiegazioni di base dei concetti coinvolti e perché un tag dovrà essere inserito quando viene premuto il tasto Invio .

Sappiamo che se inseriamo del testo in un documento HTML e poi inseriamo del testo aggiuntivo su una nuova riga, il browser non visualizzerà il testo come due righe, ignorerà eventuali ritorni a capo e condenserà più spazi tra i caratteri in un singolo spazio.

Il seguente codice HTML:

 qwer tyui 

Sarà reso come:

qwer tyui

Quindi l’editor deve inserire un tag HTML per dire al browser che dovrebbe visualizzare il secondo gruppo di testo su una nuova riga.

L’impostazione di configurazione che controlla questo è config.enterMode e offre tre opzioni:

1 – Inserisci paragrafo

L’impostazione predefinita crea un elemento di paragrafo ogni volta che si preme Invio :

 config.enterMode = CKEDITOR.ENTER_P; // inserts `

...

`

2 – Inserisci ‘div’

Puoi scegliere di creare un elemento div invece di un paragrafo:

 config.enterMode = CKEDITOR.ENTER_DIV; // inserts `
`

3 – Inserisci interruzione (l’impostazione che stai cercando)

Se preferisci non avvolgere il testo in qualcosa, puoi scegliere di inserire un tag di interruzione di riga:

 config.enterMode = CKEDITOR.ENTER_BR; // inserts `
`

La documentazione di CKEditor indica che non è consigliabile utilizzare l’impostazione ENTER_BR :

Nota: si consiglia di utilizzare l’impostazione CKEDITOR.ENTER_P causa del suo valore semantico e correttezza. L’editor è ottimizzato per questa impostazione.

Un’altra impostazione correlata ‘autoParagraph’

C’è una seconda impostazione che controlla una situazione simile – config.autoParagraph . Il modo in cui funziona dipende dall’impostazione di config.enterMode discussa sopra.

autoParagraph determina se gli elementi inline come lo span sono avvolti nell’elemento di blocco ( p o div ) specificato dall’impostazione enterMode . L’impostazione predefinita è racchiudere gli elementi in linea, quindi se inserisci una span come questa (come HTML):

 asdfg 

Sarà avvolto in un elemento ap o div come questo:

 

asdfg

o questo:

 
asdfg

L’elemento inline non verrà incapsulato se lo si imposta su false o se si imposta enterMode su CKEDITOR.ENTER_BR .

La documentazione di CKEditor include questa nota su config.autoParagraph :

Nota: la modifica del valore predefinito potrebbe introdurre problemi di usabilità imprevedibili.

Ancora più impostazioni

Ci sono altre tre impostazioni che sono in qualche modo correlate a questo argomento:

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

Riferimento

Un elenco completo delle opzioni di configurazione disponibili può essere trovato qui:

  • CKEDITOR.config – Documentazione dell’API JavaScript di CKEditor 3
  • CKEDITOR.config – Documentazione di CKEditor 4

So di essere un po ‘in ritardo nel gioco, ma penso che l’opzione che l’OP sta cercando sia:

     config.autoParagraph = false;

Questo è stato risposto perfettamente bene sopra, tuttavia come accennato non dovresti davvero cambiarlo nella configurazione principale.

Il modo corretto di farlo è per .replace davvero.

vale a dire

  

Una soluzione molto semplice senza modifiche di configurazione è da utilizzare

  1. shift + enter per un’interruzione di riga
    , e
  2. basta enter causerebbe un nuovo paragrafo.

Il vantaggio è che non è necessario apportare modifiche alla configurazione. Inoltre, avete entrambi.

Se si desidera escludere il tag

e si desidera solo lo strumento di modifica di base come Bold Italic superscript Subscript ecc in Ckeditor, attenersi alla seguente procedura:

Sono sicuro al 100% di questo come ho cercato 36 ore continuamente 🙂

Passaggio 1: aggiungi questo script nella tua pagina web PHP

  

Passaggio 2: aggiungi id="editor2" e onfocus="this.value='';" nella tua textarea come questa

  

Passaggio 3: assicurati di rimuovere Class="ckeditor" da Textarea.

Passaggio 4: Ricarica la pagina Web se non è successo Elimina cache / Cronologia e riavvia PC / laptop.

Step 5: Fatto 🙂