Redefinir CSS para uma determinada área da página?

StackOverflow https://stackoverflow.com/questions/1731555

  •  20-09-2019
  •  | 
  •  

Pergunta

Estou trabalhando em um CMS. Uma de suas funções é a edição do HTML "Chunks" em um editor Wysiwyg que é exibido como páginas individuais.

Eu tenho uma área no CMS onde esses pedaços são visualizados.

Os pedaços dependem de um arquivo "Foundation.css" que é carregado no editor Wysiwyg. Ele faz algumas pequenas redefinições, define uma fonte padrão e uma cor de texto e é muito simples.

O CMS, obviamente, vem com uma tonelada de declarações CSS, muitas das quais afetam configurações gerais, como tamanho de fonte, família, cor, altura de linha, remendos e similares.

Naturalmente, quando tento exibir um pedaço HTML em uma página do CMS, ele parece diferente de quando é exibido apenas com a folha de estilo Foundation.css.

Alguém pode pensar em uma maneira de limpar uma área definida em uma página HTML (digamos, uma div) de todas as definições de estilo anteriores? Não posso.

  • Um iframe exibindo o Chunk e a incorporação da fundação.css ajudaria, mas eu temo pelo fluxo de trabalho do usuário quando 5 a 10 iframes precisam ser renderizados e depois ajustados em altura via JS depois de carregar. Que nojo.

  • Eu pensei em "levantar" todos os outros CSs para uma subclasse (ou seja, ajustando o CSS do CMS), mas isso envolveria tocar muitos arquivos, alguns provavelmente código-fonte do PHP, e eu prefiro não fazer isso.

Eu não acho que isso tenha uma solução, mas você nunca sabe.

Foi útil?

Solução

Você pode dar a todos os divs que contêm código do editor Wysiwyg uma classe e depois redefinir tudo dentro dessa div.

Outras dicas

Há CSS Reset folhas de estilo disponíveis; Você poderia modificar isso, talvez?

Adicionando ao que o GSTO disse que você pode ter algum estilo configurado como

div.clearCss *
{
  property: value !important 
}

Com todas as propriedades de estilo pertinente redefinidas. Esse estilo deve se aplicar a qualquer coisa sob um elemento com o conjunto ClearCSS como classe, portanto, você precisaria apenas aplicar essa classe ao elemento pai.

Você está usando um editor WYSIWYG específico no CMS? Descobri que o Telerik Radeditor permitirá que você use folhas de estilo específicas para a área de edição real do editor. O editor que você está usando também pode ser capaz de fazer isso.

Boa sorte, e espero que isso ajude.

Se você pegar Tinymce Por exemplo, eles também usam um iframe, acho que eles tiveram os mesmos problemas como você. Eu o uso no meu back -end e em algumas páginas 4 iframes. Não vejo problemas de desempenho.

Com o TINYMCE, é possível comprimir as funções necessárias (em php, jsp, .net e friofusion), isso oferece um ótimo speedboost.

Pense duas vezes, Bevore, você escreve seu próprio editor Wysiwyg, os outros são bem testados e têm um beliche de plugins muito bons para quase todas as necessidades.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top