Utilisation de CKEditor en ligne sur du texte ajouté dynamiquement

Je construis une application web qui utilise javascript pour ajouter dynamiquement des éléments à la page, qui peuvent ensuite être modifiés en utilisant contentEditable="true" et CKEditor.Utilisation de CKEditor en ligne sur du texte ajouté dynamiquement

Actuellement, si j'ajoute un élément à la page avec contentEditable="true", l'élément est modifiable mais la barre d'outils CKEditor n'apparaît pas.

J'ai essayé d'appeler CKEDITOR.inlineAll() mais cela ne semble pas faire quoi que ce soit.

Comment activer la modification en ligne CKEditor sur des éléments créés dynamiquement? (Sans actualiser la page).

EDIT: J'ai trouvé que donner à l'élément un ID de (par exemple) someId et appeler CKEDITOR.inline (someId) a l'effet désiré. Mais je ne veux pas avoir à ajouter des identifiants uniques à tous mes éléments. Est-il possible d'activer CKEditor sur tous les éléments contentEditable?

Source

2013-09-04 Jon

CKEDITOR.inline accepte un élément DOM natif en tant que paramètre. Peu importe comment vous créez des éléments dynamiques, si vous transmettez une référence à cette fonction, il la convertira en instance CKEditor. Par exemple, en supposant que vous utilisez jQuery comme cadre principal:

// A dynamically created element. 
var el = $('<p contenteditable="true">I\'m editable!</p>'); 

// Append the element to <body>. 
$('body').append(el); 

// CKEDITOR.inline accepts DOM element as parameter. 
CKEDITOR.inline(el.get(0));

Voir the fiddle.

Source

2013-09-05 08:08:42 oleq

J'ai le même problème. appeler CKEDITOR.inline (myElement) modifie le style de la div, et remplace le menu contextuel, cela fonctionne presque, mais le menu ne s'affiche toujours pas. Peut-être que cela a quelque chose à voir avec le fait qu'il soit créé par KO. –

Merci. C'est du travail pour moi! – Ascension

une autre solution pourrait être // Un élément créé dynamiquement. var html = '

....more html elements...

I\'m editable!

'; // Ajouter l'élément à . $ ('body') .append (html); CKEDITOR.inline ('elementToadd'); –

Utilisation de CKEditor en ligne sur du texte ajouté dynamiquement

Répondre

Questions connexes