Javascript Girl
  1. Javascript Girl
  3. Inline CKEditor avec barre d'outils sur le code généré
Intereting Posts
En utilisant Javascript, comment puis-je m'assurer qu'une date est valide? HTML5 restreignant les charactères d'entrée Ie8 var w = window.open () – "Message: argument invalide". La même fonction de survol pour plusieurs chemins à Raphaël Flèche de carte d'animation AngularJS $ Réponse HTTP Set-Cookie non accessible Node JS fonctions anonymes et rappels Comment ajouter deux chaînes comme si elles étaient des nombres? Différencier l'onglet du navigateur fermer et actualiser (pour détecter plusieurs instances d'application) Ghostclicks dans les applications mobiles Puis-je utiliser n'importe quelle API HTML ou JavaScript pour obtenir le chemin du fichier en entrée ? Obtenir le dernier caractère avant la position du caret en javascript Comment annuler webRequest silencieusement dans l'extension chrome Javascript: obtenez les noms des arguments réels passés dans une fonction JavaScript REST Gestion des clients et des sessions

Inline CKEditor avec barre d'outils sur le code généré

Je crée un backend pour un cms en ce moment. On m'a demandé de créer un module qui génère différents blocs pour créer rapidement une page (image avec texte ci-dessous, image avec texte vers la droite, etc.)

Ce bit fonctionne mais pour éditer le texte, j'essaie d'utiliser ckeditor. En utilisant le code suivant, le texte est éditable, mais je n'obtiens pas de barre d'outils: 

<div id="editable" contenteditable="true"> <h4>{{title}}</h4> {{text}} </div>

Pour essayer de résoudre ce problème, j'ai essayé d'utiliser le javascript dans le guide de CKEditor: 

 CKEDITOR.disableAutoInline = true; CKEDITOR.inline( 'editable' );

Ce code crée simplement une erreur: 

 Uncaught TypeError: Cannot call method 'getEditor' of undefined

Je suppose que c'est parce qu'avant que le texte ne soit généré, l'éditeur n'a rien à se lier.

Quelqu'un peut-il m'aider pour que le code généré soit éditable avec une barre d'outils? En outre, est-il possible de faire en sorte que ckeditor travaille avec des noms de classe au lieu d'ID?

Merci d'avance

Pendant la phase d'initialisation, CKEditor vérifie s'il existe une instance d'éditeur déjà liée à l'élément . L'erreur que vous obtenez suggère que vous fournissez un id de l'élément qui n'a pas encore été associé à DOM ou qu'il a été retiré de DOM avant que inline() soit appelée.

Assurez-vous que la commande est correcte: 

 <div id="editable" contenteditable="true"> <h4>{{title}}</h4> {{text}} </div> <script> CKEDITOR.disableAutoInline = true; CKEDITOR.inline( 'editable' ); </script>

Est-ce que <div id="editable" contenteditable="true">...</div> généré par JavaScript? Si c'est le cas, assurez-vous que inline() est appelé après l'injection de l'élément dans DOM.

Suggestion "Last hope": appelez-vous inline() partir de la portée de DOM différente (c.-à-d. La fenêtre iframe )?

Merci pour la réponse oleq.

Oui, le problème était que le contenu était inséré après la chargement de Ckeditor. J'ai également eu un problème avec Google Chrome grisant la barre d'outils.

Pour résoudre les deux problèmes, j'ai utilisé le code suivant après l'insertion de nouveaux contenus: 

 $('.editable').click(function() { var name; for(name in CKEDITOR.instances) { var instance = CKEDITOR.instances[name]; if(this && this == instance.element.$) { return; } } $(this).attr('contenteditable', true); CKEDITOR.inline(this); });