web-dev-qa-db-fra.com

tinyMCE duplique l’élément de bloc précédent en appuyant sur Entrée (éditeur visuel)

Devenir fou avec ça. Je ne peux pas savoir s'il s'agit d'un comportement normal.

J'ai ajouté un filtre pour réécrire les insertions d'image afin d'utiliser <figure> et <figcaption>. Fonctionne bien.

Cependant, lorsque j'insère une image dans la vue visuelle et que j'appuie sur la touche Entrée, je souhaite qu'elle commence un nouveau paragraphe.

Au lieu de cela, il crée un autre élément <figure> et place ma prochaine ligne de texte dans celui-ci.

Exemple de code généré si vous passez en vue Texte:

<figure class="alignnone">

<a href="path/to/image.jpg"><img class="alignnone size- wp-image-209" src="path/to/image.jpg" width="199" height="43" /></a>

<figcaption>Image Caption</figcaption>

</figure>

<figure class="alignnone"`>This should be a new paragraph but is inside a figure tag.</figure>

Existe-t-il un moyen d'empêcher TinyMCE de répliquer le bloc précédent? Je sais que si vous définissez du texte comme, par exemple, un <h2> et que vous appuyez sur la touche Retour pour revenir à la valeur par défaut suivante à <p>. C'est le comportement que je veux.

tinymcevisual-editorpost-editor
2
Pete

J'ai actuellement le même problème. Voici mon travail.

add_filter( 'tiny_mce_before_init', 'workaround' );
public function workaround( $in ) {
    $in['force_br_newlines'] = true;
    $in['force_p_newlines'] = false;
    $in['forced_root_block'] = '';
    return $in;
}

tiny_mce_before_init vous donne accès aux paramètres TinyMCE utilisés par l'éditeur WordPress. Voir aussi: TinyMCEConfiguration

L'inconvénient de ceci est la place de "return", ce qui donne unpet vous donne plutôt unbr. J'ai essayé d'inverser lesforce_br_newlinesetforce_p_newlines, mais le problème initial est résolu. J'espère que cela aidera.

2
Ryan Gannon

Vous pouvez définir l'option keep_styles sur false sur init.

Cette option permet de conserver le style de texte actuel de l'éditeur lorsqu'un utilisateur appuie sur entrée/retour.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  keep_styles: false
});

Tiré de la docs

1
musicvicious

J'ai eu le même problème, mais pas dans Wordpress. Quoi qu'il en soit, je force le bloc 'p' à prendre le contenu entre les balises 'p'. Et à cause de cela, lorsque je clique sur le bouton de retour et que j'enregistre le contenu dans la base de données, TinyMce duplique les balises 'p'. De plus, il duplique les tags à chaque fois que je le sauvegarde à nouveau. Ma solution est dans l'init:

force_br_newlines: true,
force_p_newlines: false,
forced_root_block: 'p',
invalid_elements: 'p',

Le plus important est invalid_elements. Ici, vous devez lister la balise 'p'. Après ce réglage, mon code ne duplique plus la balise 'p'. J'espère que le vôtre fera de même.

1
Imre

Voici une autre version de la solution. Je dois en écrire un nouveau, car le précédent est correct, mais il ne fonctionne pas avec tous les autres paramètres. Cette solution arrête la duplication des balises p après les nouvelles lignes et les nouveaux en-têtes, mais ajoute une simple balise br entre les paragraphes.

forced_root_block: 'p',
force_p_newlines: false,
force_br_newlines: false,
extended_valid_elements: '-p',

J'utilise extended_valid_elements parce que je ne veux pas redéfinir le paramètre par défaut, juste une valeur de valid_elements. La signification de -p et les autres paramètres sont ici .

RemarqueAvec ce paramètre, vous verrez plus d'espace entre les éléments de texte de l'éditeur.

0
Imre