web-dev-qa-db-fra.com

CKEditor 5 - Comment insérer du HTML (aka. Où est le mode source)?

Je veux pouvoir passer du WYSIWYG au HTML simple en par exemple insérer IFrame avec une vidéo Youtube. Jusqu'à présent, avec les versions standard de CKEditor 5, il n'y a aucune documentation sur la façon de le faire.

Existe-t-il un équivalent du plugin Source Editing Area mais pour CKEditor 5?

javascriptckeditorckeditor5
13
Marek Urbanowicz

Votre question touche deux sujets compliqués:

  • Si le mode source a un sens en général.
  • S'il est possible d'autoriser la saisie (et la modification) de tout code HTML dans CKEditor 5.

Ils ont déjà été discutés dans le mode "View Source" et "Comment conserver le balisage et ne pas le supprimer" tickets sur le GitHub de CKEditor 5, mais je vais essayer pour les expliquer rapidement ici.

Le mode source a-t-il un sens?

Pas vraiment. Cela a du sens pour un petit groupe de personnes qui connaissent le HTML et qui peuvent le modifier de manière fiable manuellement, mais alors pourquoi utiliser un éditeur de texte riche?

Vous pouvez dire cependant que ce n'est pas un problème? Seuls les utilisateurs avancés modifieront le HTML. Les autres utiliseront le mode WYSIWYG. Mais ici, un autre ensemble de problèmes apparaît. Vous venez d'insérer du code HTML arbitraire dans l'éditeur et maintenant d'autres utilisateurs tentent de le modifier en mode WYSIWYG. Mais comme il s'agit d'un HTML que l'éditeur ne comprend pas (car il n'y a pas de fonctionnalités qui le gèrent), il y a de grandes chances qu'il soit détruit avec le temps. Que ces blobs de HTML seront divisés, en gras, encapsulés, copiés et collés de manière incorrecte, etc. Vous pouvez dire que le mode source se révèle une fois de plus utile, car en raison de l'absence d'une interface utilisateur appropriée pour modifier ce blob, vous devrez corriger manuellement. Mais attendez - ce n'est pas tout ce gâchis pourquoi les gens détestent les éditeurs de texte riche?

Regardons cela à travers une analogie. Un éditeur de texte enrichi n'est qu'une interface pour modifier certaines données (au format HTML dans ce cas). De même, un CMS est une interface pour éditer une base de données. Offrez-vous donc un accès direct à votre base de données aux utilisateurs normaux? Ajoutez-vous des produits à votre base de données manuellement via mysqladamin? Je ne pense pas. Ce n'est ni pratique, ni sûr, ni compréhensible pour les utilisateurs normaux.

N'essayez donc pas de modifier le HTML manuellement. Si votre CMS manque une fonctionnalité, vous ajoutez simplement une fonctionnalité. Faites de même avec les éditeurs de texte enrichi. Et ne les blâmez pas d'avoir ruiné votre code HTML fabriqué à la main si vous ne leur avez pas appris ce que signifie ce code HTML et comment le traiter.

Je vous encourage vraiment à lire mode "View Source" parce que nous y avons abordé de nombreux sujets intéressants (par exemple ce qu'est un contenu structuré).

Est-il possible de saisir du code HTML dans CKEditor 5?

Non, je vais me citer ici:

CKEditor 5 implémente un modèle de données personnalisé. Afin de charger des données dans ce modèle, vous devez avoir une vue -> des convertisseurs de modèle pour chaque élément du contenu que votre éditeur doit prendre en charge. Ensuite, vous avez besoin de modèles -> afficher les convertisseurs afin de rendre ce contenu modifiable (il doit être rendu dans l'éditeur pour l'édition). Enfin, vous devez configurer le schéma et parfois personnaliser certaines fonctionnalités comme Enter afin qu'ils connaissent la signification de ce contenu que vous avez chargé dans l'éditeur et comment le modifier.

En d'autres termes, en raison du modèle de données, une fonctionnalité doit implémenter le cycle de vie complet d'un contenu spécifique (balise, attribut, etc.) qu'elle gère - du chargement des données au rendu pour l'édition, à l'édition elle-même et aux données récupération.

Source: https://github.com/ckeditor/ckeditor5/issues/705

Nouvelle ère

Les temps ont changé. Pendant des années, nous avons essayé d'éduquer les développeurs sur la façon d'utiliser les éditeurs de texte riche, mais l'âge sombre des WYSIWYG utilisés pour éditer des sites Web entiers est resté fort dans l'esprit des gens.

Avec CKEditor 5, il n'y a plus d'option pour éditer du HTML arbitraire en raison du modèle de données et de l'architecture globale qui oblige les développeurs à repenser leurs intégrations. Dans le même temps, l'existence du modèle de données et une architecture complètement nouvelle facilitent tellement la mise en œuvre des fonctionnalités d'édition que ce travail sera finalement vraiment accessible. Cela ne sera pas gratuit, bien sûr, mais l'effet final sera également bien meilleur.

2
Reinmar

Oui, il est possible d'insérer du HTML dans CKEditor5:

  insertHTML(html:string) {

    // See: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html#where-are-the-editorinserthtml-and-editorinserttext-methods-how-to-insert-some-content
    const viewFragment = this.editor.data.processor.toView( html );
    const modelFragment = this.editor.data.toModel( viewFragment );
    this.editor.model.insertContent(modelFragment);
  }
0
Roger