web-dev-qa-db-fra.com

Comment configurer ckeditor pour ne pas envelopper le contenu dans le bloc <p>?

J'utilise ckeditor sur mon site Web pour faciliter la saisie de code HTML par les utilisateurs.

Cependant, les données que je récupère de ckeditor sont enveloppées dans <p></p> blocs. (Ce que je ne veux pas.)

Y a-t-il un paramètre de configuration qui force l'éditeur à ne pas encapsuler le texte dans quoi que ce soit?

ckeditorword-wrap
47
Nathan Osman

Ajoutez ce qui suit à votre fichier config.js pour CKEditor:

config.enterMode = CKEDITOR.ENTER_BR;

Exemple:

...

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

    ...
};

Détails

Le paramètre de configuration qui contrôle ce comportement est basé sur ce que vous voulez faire lorsque l'utilisateur appuie sur Enter.

Juste au cas où quelqu'un qui est nouveau dans le travail avec HTML lit ceci, j'inclus une explication de base des concepts impliqués et pourquoi une balise devra être insérée lorsque le Enter touche est enfoncée.

Nous savons que si nous entrons du texte dans un document HTML et que nous mettons ensuite du texte supplémentaire sur une nouvelle ligne, le navigateur n'affichera pas le texte sur deux lignes, il ignorera tous les retours chariot et condensera plusieurs espaces entre les caractères en un seul espace.

Le HTML suivant:

qwer
tyui

Sera rendu comme:

qwer tyui

L'éditeur doit donc insérer une balise HTML pour indiquer au navigateur qu'il doit afficher le deuxième groupe de texte sur une nouvelle ligne.

Le paramètre de configuration qui contrôle cela est config.enterMode et il offre trois options:

1 - Insérer un paragraphe

Le paramètre par défaut crée un élément de paragraphe à chaque fois Enter est pressé:

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

2 - Insérez 'div'

Vous pouvez choisir de créer un élément div au lieu d'un paragraphe:

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

3 - Insérer une pause (le paramètre que vous recherchez)

Si vous préférez ne pas envelopper le texte dans quoi que ce soit, vous pouvez choisir d'insérer une balise de saut de ligne:

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

La documentation de CKEditor indique que l'utilisation de ENTER_BR le réglage n'est pas recommandé :

Remarque: il est recommandé d'utiliser le CKEDITOR.ENTER_P paramètre en raison de sa valeur sémantique et de son exactitude. L'éditeur est optimisé pour ce paramètre.

Un autre paramètre associé "autoParagraph"

Il existe un deuxième paramètre qui contrôle une situation similaire –config.autoParagraph. Son fonctionnement dépend du config.enterMode paramètre décrit ci-dessus.

autoParagraph détermine si les éléments en ligne tels que span sont encapsulés dans l'élément de bloc (p ou div) spécifié par le paramètre enterMode. La valeur par défaut consiste à encapsuler les éléments en ligne, donc si vous entrez une étendue comme celle-ci (au format HTML):

<span>asdfg</span>

Il sera enveloppé dans un élément p ou div comme ceci:

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

ou ca:

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

L'élément en ligne ne sera pas encapsulé si vous le définissez sur false ou si vous définissez enterMode sur CKEDITOR.ENTER_BR.

La documentation de CKEditor comprend cette note sur config.autoParagraph :

Remarque: la modification de la valeur par défaut peut entraîner des problèmes d'utilisation imprévisibles.

Encore plus de paramètres

Il existe trois autres paramètres qui sont quelque peu liés à ce sujet:

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

Référence

Une liste complète des options de configuration disponibles peut être trouvée ici:

122
codewaggle

Je sais que je suis un peu en retard dans le jeu, mais je pense que l'option que l'OP recherche est la suivante:

 
 config.autoParagraph = false;
15
MikeBman

Une solution très simple sans aucun changement de configuration est d'utiliser

  1. shift + enter pour un saut de ligne <br>, et
  2. juste enter provoquerait un nouveau paragraphe.

L'avantage est que vous n'avez pas à modifier la configuration. De plus, vous avez les deux.

5
Neil Patrao

Ceci est parfaitement bien répondu ci-dessus, mais comme mentionné, vous ne devriez pas vraiment changer cela dans la configuration principale.

La bonne façon de le faire est vraiment par .replace.

c'est à dire.

    <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
ablueman

Si vous souhaitez exclure <p> tag et ne voulez que l'outil d'édition de base comme Bold Italic superscript Subscript etc dans Ckeditor puis suivez ces étapes:

J'en suis sûr à 100% car j'ai fait des recherches pendant 36 heures en continu :)

Étape 1: ajoutez ce script dans votre page Web PHP

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

Étape 2: ajoutez id="editor2" et onfocus="this.value='';" dans votre zone de texte comme celle-ci

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

Étape 3: assurez-vous que supprimer Class="ckeditor" de Textarea.

Étape 4: rechargez votre page Web si cela ne s'est pas produit Supprimez le cache/l'historique et redémarrez le PC/ordinateur portable.

Étape 5: c'est fait :)

2
Rishi Rich

Pour Django-ckeditor ajoutez cette configuration dans votre settings.py fichier:

ENTER_P    = 1 # default
ENTER_BR   = 2
ENTER_DIV  = 3

CKEDITOR_CONFIGS = {
    'default': {
        'enterMode': ENTER_BR,
    },
}
0
Ravi Dhiman