Corps persistant dans le style en ligne dans ckEditor

J'essaye toute la journée de configurer un attribut de style péristaltique à l'étiquette de corps de l'instance de ckeditor. Je ne pouvais pas trouver quelque chose comme bodyStyle dans ckeditor.config api (seulement bodyId et bodyClass). donc je tentais moi-même, avec la solution (jQuery est utilisée) suivante:Corps persistant dans le style en ligne dans ckEditor

$(this).find('textarea.editor').ckeditor().ckeditorGet().on('instanceReady', function(e){ 
    var documentWrapper = e.editor.document, 
    documentNode = documentWrapper.$, 
    inh = $(documentNode.body); 
    inh.css('background', inheritParentBackground); 
});

Wich fonctionne assez bien, mais après que j'appelle .updateElement() ou si je clique sur le bouton source deux fois, il supprime à nouveau tous les styles et 'instanceReady' n'est plus appelé. J'ai essayé de le déclencher manuellement, mais il exécute d'abord la mise à jour du style et est directement écrasé par ckeditor. Ce que je suis en train d'essayer de faire: Je veux éditer une Div dans une page d'accueil, après avoir cliqué sur éditer une popup ajax avec le ckeditor et je veux que l'éditeur ait la même hauteur, largeur et arrière-plan et je peux pas gérer cela sur bodyId ou bodyClass, donc je suppose que j'ai besoin d'un bodyStyle ou quelqu'un a une idée différente.

Source

2010-08-31 fehrlich

Il est "persistant" non "persistant" . Normalement, je ne corrige pas l'orthographe des gens, mais dans ce cas, cela peut affecter la capacité de trouver cette question en utilisant une recherche, donc vous devriez la corriger! – Doin

J'ai trouvé une bidouille:

$(this).find('textarea.editor').ckeditor({ 
     bodyId: Id+'" style="'+style, 
    });

pas très agréable mais ça fonctionne ;-)

Source

2010-09-01 10:06:39 fehrlich

Est-ce que http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.style est ce que vous cherchez?

Source

2010-08-31 17:40:18 ryan

Non, vous pouvez seulement définir des styles avec cette méthode statique, mais je ne vois pas où je pourrais l'attacher à une intance. Le closed est: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#addCss Mais ce doent ajoute un attribut de style et il a la priorité la plus basse, donc la règle est surchargée par tout – fehrlich

Vous avez deux options. Vous pouvez ajouter une feuille de style en ligne dans le gestionnaire instanceReady via:

var myStyleSheet = e.editor.document.appendStyleText("body {background:...}");

Ce ajoute un nouvel élément <style> vide à la tête de (iframe,) le document de l'éditeur, contenant le texte fourni. La valeur de retour est une CSSStyleSheet (un objet DOM de navigateur), donc si vous l'enregistrez quelque part, vous pouvez ajouter, supprimer ou modifier les règles de style en utilisant les méthodes DOM de javascript. Je ne suis pas sûr qu'ils persistent à travers les changements de mode (par exemple après avoir cliqué deux fois sur "Source") ou à setData(), mais vous pouvez capturer ces choses en utilisant les événements 'mode' et 'contentDom' et réappliquer styleSheet le gestionnaire d'événement. Notez que (pour le gestionnaire 'mode' au moins), vous devez vérifier que editor.mode==='wysisyg', car editor.document est nul en mode source.

D'autre part, si vous voulez vraiment définir vos styles en ligne sur l'élément <body> de l'éditeur, essayez de définir une fonction:

function setEditorStyle(e) 
{ 
    var ed = e.editor; 
    if (ed.mode!=="wysiwyg") return; // don't set styles when in "Source" mode 
    // now change whatever styles you want, e.g.: 
    ed.document.getBody().setStyles({backgroundColor:"blue",color:"#FFFFFF",...}); 
    // for setting just 1 style property, you can use .setStyle() instead 
}

puis au sein de votre config de l'éditeur, vous devez ajouter:

..., on: { instanceReady: setEditorStyle, mode: setEditorStyle, ... }, ...

Ce qui définit le style à la fois après la création de l'éditeur iframe, et après le retour au mode 'wysiwyg' (édition normale, pas le mode source).

Je ne sais pas pourquoi vos styles sont réinitialisés par des appels à updateElement(); Je fais la même chose (en utilisant CKEditor v4) et updateElement() ne réinitialise pas les styles en ligne que j'ai définis sur <body>. Peut-être que c'est quelque chose qui a changé avec les versions de CKeditor. Dans tous les cas, s'il s'agit d'un problème, vous pouvez simplement réinitialiser manuellement le style après avoir appelé updateElement(). (Je dirais "juste appelez setEditorStyle()", mais comme indiqué ci-dessus cette fonction est écrite pour requérir un paramètre d'événement . A la place, vous pouvez le réécrire pour utiliser une variable "ed" définie en externe (par exemple une variable globale).changer

var ed = e.editor;

if (!ed) ed = e.editor;

et vous pouvez appeler en toute sécurité setEditorStyle() de tout point dans votre javascript après l'éditeur a été créé.)

Source

2013-07-13 15:51:32 Doin

Corps persistant dans le style en ligne dans ckEditor

Répondre

Questions connexes