12
votes

CKEditor: classe ou identifiant pour le corps de la rédaction

J'ai une instance de ckeditor sur une page. J'essaie de donner au corps de CKeditor une classe ou une carte d'identité afin qu'il correspond à certains styles que j'ai définis dans une feuille de style.

Il y a un Documentation API qui devrait donner accès à Les éléments DOM respectifs, mais je ne peux pas sembler le faire fonctionner. Tous les objets que j'essaie d'interroger de cette façon, tournez indéfini.

Quelqu'un sait-il comment faire cela, ou comment adresser correctement les éléments DOM de CKeditor?

Modifier : Merci, la réponse de Nemisj l'a fait pour moi, mais pour une raison quelconque, je ne comprends pas la coche "acceptée" dans cette question.


3 commentaires

Pourriez-vous poster un extrait du code que vous essayez de travailler?


Sans aucun code, ma première pensée est que vous n'avez pas attendu que le DOM soit chargé avant d'essayer d'appeler l'API, c'est pourquoi ils sont indéfinis


Non, ceci est dans une fonction appelée surcharge.


7 Réponses :


0
votes

Je ne connais pas cet éditeur, mais comme ils fonctionnent tous de la même manière, vous ne pouvez probablement pas accéder aux éléments DOM créés par l'instance, car ils sont créés après la fin de la page de la page, et que le DOM est prêt aussi bien. . Donc, tout nouvel élément DOM ajouté après cela, de manière théoriquement n'existera pas.

Néanmoins, vous pouvez essayer Tinymce Editor , qui a un "partenariat" avec la bibliothèque JQuery JavaScript pour manipuler Tout ce que vous voulez, et l'éditeur lui-même est assez facile à changer de presque toutes les voies.


2 commentaires

Bravo, mais j'ai fait une longue comparaison entre TinyMCE, CKEditor et plusieurs autres et nous ont commis moi-même (et le client) à CKeditor, donc dans ce cas, je vais avoir besoin de conseils spécifiques sur ce produit particulier.


Eh bien, dans ce cas, je ne peux penser qu'à utiliser JQuery pour écouter le DOM et changer de quoi vous avez besoin. Vérifiez que la fonction d'écoute () dans la documentation de JQuery devrait vous donner les lumières.



11
votes

Si vous parlez de CKEDITOR (version 3), il est possible d'obtenir une instance DOM à l'intérieur de l'éditeur lui-même. Chaque instance CKEDITOR a une référence à son document via une propriété "Document".

documentNode.body.className = "zork";


2 commentaires

Edit - est l'instance de CKeditor, si vous créez avec la fonction Remplacer.


@nemisj, je dois avoir laissé passer la prime à passer, peut-être penser que votre réponse serait auto-acceptée de toute façon. Mais apparemment, pour accepter automatiquement, il doit y avoir deux upvotes ou plus présents, et maintenant je ne peux même pas l'accepter la voie normale. Pardon!!



2
votes

du manuel :

< Code> {String | Array} CKEDOR.CONFIG.ContentsCSS

Le ou les fichiers CSS à utiliser pour appliquer le style au contenu. Il devrait refléter le CSS utilisé dans les pages finales où le contenu doit être utilisé. xxx

Valeur par défaut:

/Contents.css. / code>


1 commentaires

Bravo Jonathan, mais dans ma situation, j'ai une feuille de style qui ne s'applique qu'aux corps d'un certain nom de classe, c'est pourquoi j'ai besoin de définir la classe de carrosserie spécifiquement.



0
votes

Vos requêtes peuvent renvoyer indéfini car les instances de l'éditeur sont placées à l'intérieur d'une iframe et que votre requête ne regarde pas là-bas?


0 commentaires

14
votes

Bien que cette partie de l'API n'ait pas été portée de 2.x au moment de la placement de cette question, il est maintenant plus facile d'utiliser le BOITID et bodyclass options de configuration.

Bien sûr, l'explication de Nemisj est bonne et peut être utile pour d'autres choses, mais vous devez vous rappeler que chaque fois que vous éteigniez de la conception (à la vue de la source), l'IFRAME est détruit, vous devez donc la détruire. Réaffecter vos attributs si vous le faites manuellement.


0 commentaires

3
votes

J'ai eu le même problème aujourd'hui pour tenter de régler la collégalité comme celle-ci:

ckeditor.replace ('Editor1', { Fullpage: vrai, BodyClass: 'myClass'

});

Ce que j'ai trouvé, c'est que dans cette version (3.3.1), si vous définissez Fullpage = true, le réglage du boitier béni ou de la colonie ne fonctionne pas, mais si vous définissez Fullpage = Faux, cela fonctionne.

J'espère que cela aide.


0 commentaires

0
votes

dans config.js, écrivez ce code xxx pré>

alors vous voyez l'identifiant du corps dans ckeditor, mais lorsque vous souhaitez accéder à cet identifiant, veuillez utiliser P>

$('#parent_id').find('iframe').contents().find('#within_iframe')


0 commentaires