Réinitialiser CSS pour une certaine zone de la page?

Question

Je travaille sur un CMS. L'une de ses fonctions est l'édition de "morceaux" HTML dans un éditeur WYSIWYG qui sont affichés sous forme de pages individuelles.

J'ai une zone dans le CMS où ces morceaux sont prévisualisés.

Les morceaux reposent sur un fichier "Foundation.css" qui est chargé dans l'éditeur WYSIWYG. Il fait quelques petites réinitialisations, définit une police et une couleur de texte par défaut, et est globalement très simple.

Le CMS, évidemment, est livré avec une tonne de déclarations CSS, dont beaucoup affectent les paramètres généraux comme la taille de la police, la famille, la couleur, la hauteur de ligne, les paddings, etc.

Naturellement, lorsque j'essaie d'afficher un morceau HTML dans une page CMS, il semble différent du moment où il est affiché uniquement avec la feuille de style Foundation.css.

Quelqu'un peut-il penser à un moyen de nettoyer une zone définie dans une page HTML (disons, une div) de toutes les définitions de style précédent? Je ne peux pas.

• Un iframe affichant le morceau et l'intégration de Foundation.CSS aiderait, mais je crains que le flux de travail de l'utilisateur lorsque 5 à 10 IFRAME soit rendu et ajusté en hauteur via JS une fois qu'ils sont chargés. Beurk.

• J'ai pensé à "soulever" tous les autres CSS à une sous-classe (c'est-à-dire en ajustant le CSS du CMS), mais cela impliquerait de toucher beaucoup de fichiers, un code source PHP probablement, et je préfère ne pas le faire.

Je ne pense pas que cela ait une solution mais on ne sait jamais.

Answer 1

Vous pouvez donner à tous les divs contenant du code de l'éditeur WYSIWYG une classe, puis réinitialiser tout à l'intérieur de cette div.

Answer 2

Il y a Réinitialisation du CSS Styleshets disponibles; Vous pourriez les modifier, peut-être?

Answer 3

Ajoutant à ce que Gsto a dit que vous pouvez avoir un style configuré comme

div.clearCss *
{
  property: value !important 
}

Avec toutes les propriétés de style pertinentes réinitialisées. Ce style doit s'appliquer à tout ce qui est sous un élément avec ClearCSS ensemble comme sa classe, vous n'auriez donc qu'à appliquer cette classe à l'élément parent.

Answer 4

Utilisez-vous un éditeur Wysiwyg spécifique dans CMS? J'ai constaté que le Telerik Radidorid vous permettra d'utiliser des feuilles de style spécifiques pour la zone d'édition réelle de l'éditeur. L'éditeur que vous utilisez pourrait également être en mesure de le faire.

Bonne chance, et j'espère que cela aide.

Answer 5

Si tu prends Tinymce Par exemple, ils utilisent également un iframe, je pense qu'ils ont eu les mêmes problèmes que vous. Je l'utilise dans mon backend et sur certaines pages 4 iframes. Je ne vois aucun problème de performance.

Avec TinyMCE, il est possible de compresser les fonctions dont vous avez besoin (en PHP, JSP, .NET et Coldfusion), cela vous donne un excellent speedboost.

Réfléchissez deux fois, Bevore vous écrivez votre propre éditeur WYSIWYG, les autres sont bien testés et ont une couchette de très bons plugins pour presque tous les besoins.