tiny_mce editor para páginas web pegando estilo da minha página

[jnejunior 1]

salve pessoal...

 

então instalei o tinymce em uma página minha, ele esta funcionando perfeitamente, só que ele pega a formatação CSS dos meus links, e gostaria que ele pegasse a sua própria formatação padrão...

 

alguem sabe como resolver isso?

[Guilherme Oderdenge 42]

Como assim ele pega a sua formatação? Quando você insere um link no editor, ele renderiza com o seu estilo de link, é isso?

[jnejunior 1]

Como assim ele pega a sua formatação? Quando você insere um link no editor, ele renderiza com o seu estilo de link, é isso?

 

não, os botões do editor, ficam com a mesma formatação dos meus links, da página, o editor funciona perfeitamente...

[Diéssica 140]

Então ele está pegando a sua formatação como o Guilherme disse. Mas na página ou no próprio editor o link já sai formatado?

 

Estranho, até porque eu já usei muito esses editores WYSIWYG e nunca tive esse tipo de problema...

[jnejunior 1]

não, o editor funciona direitinho, os botões do editor que estão pegando a formatação dos links que estão na minha folha de estilho..

 

ai os botõezinhos do editor ficam desconfigurados...

[Diéssica 140]

Agora entendi... :)

 

Posta um print screen

[Guilherme Oderdenge 42]

não, o editor funciona direitinho, os botões do editor que estão pegando a formatação dos links que estão na minha folha de estilho..

 

ai os botõezinhos do editor ficam desconfigurados...

 

Isso é conflito. Para debugar, tente renomear o nome das regras do seu estilo. Se funcionar, temos o diagnóstico.

[jnejunior 1]

não preciso debugar para saber que é meu estilo que esta afetando o editor, é ele, eu sei, porque quando eu comento a parte que faz referencia aos links (a, a:hover), o editor fica normal...

 

por isso gostaria de saber como resolver este problema, sendo que meu estilo esta assim:

 

#login a, #painel a {
background: #069;
border: 1px solid #069;
color: #fff;
cursor: pointer;
font: 14px Arial;
height: 25px;
margin-right: 0;
padding: 3px 8px;
text-decoration: none;
border-radius: 3px;
}

#login a:hover, #painel a:hover {
background: #333;
border: 1px solid #333;
}

#painel a {
background: #ccc;
border: 1px solid #ccc;
color: #333;
display: block;
line-height: 25px;
margin: 0 0 3px 3px;
width: 245px;
}

#painel a:hover {
background: #f4f4f4;
border: 1px solid #f4f4f4;
}

[Diéssica 140]

Sabemos que tem um CSS.

 

Posta um print screen Junior, assim não vai da pra saber como pode resolver...

[jnejunior 1]

Sabemos que tem um CSS.

 

Posta um print screen Junior, assim não vai da pra saber como pode resolver...

 

ta ai a imagem:

 

[Diéssica 140]

Os botões desse editor são links (a). O editor tá dentro da div com a id "painel". Tu determinou pra todos os links (a) da div painel (#painel) possuirem 245 pixels de largura, além das outras formatações: background cinza, margens, cor da fonte e tal...

#painel a {
       background: #ccc;
       border: 1px solid #ccc;
       color: #333;
       display: block;
       line-height: 25px;
       margin: 0 0 3px 3px;
       width: 245px;
}

O principal é na penúltima linha: width: 245px;

 

O que tu pode fazer é criar uma div para o editor e zerar tudo nela no CSS, ou rever a usabilidade da tua página. Determinar largura (width) em links é totalmente errado na minha opinião. Tenta ser mais específico nos links.

 

Enfim, o jeito de resolver vai de ti. :thumbsup:

[Guilherme Oderdenge 42]

não preciso debugar para saber que é meu estilo que esta afetando o editor, é ele, eu sei, porque quando eu comento a parte que faz referencia aos links (a, a:hover), o editor fica normal...

 

por isso gostaria de saber como resolver este problema, sendo que meu estilo esta assim:

 

#login a, #painel a {
background: #069;
border: 1px solid #069;
color: #fff;
cursor: pointer;
font: 14px Arial;
height: 25px;
margin-right: 0;
padding: 3px 8px;
text-decoration: none;
border-radius: 3px;
}

#login a:hover, #painel a:hover {
background: #333;
border: 1px solid #333;
}

#painel a {
background: #ccc;
border: 1px solid #ccc;
color: #333;
display: block;
line-height: 25px;
margin: 0 0 3px 3px;
width: 245px;
}

#painel a:hover {
background: #f4f4f4;
border: 1px solid #f4f4f4;
}

 

Se você sabe que é ele, por que não acaba com isso e dá um jeito de renomear ou transferir as regras? De uma forma ou de outra, deixar regras se conflitando é errado. Mais errado ainda é você saber do erro e não fazer nada.

 

Renomeie/transfira alguma das regras - ou a do editor, ou a sua regra que gera o conflito.

[jnejunior 1]

Se você sabe que é ele, por que não acaba com isso e dá um jeito de renomear ou transferir as regras? De uma forma ou de outra, deixar regras se conflitando é errado. Mais errado ainda é você saber do erro e não fazer nada.

 

Renomeie/transfira alguma das regras - ou a do editor, ou a sua regra que gera o conflito.

 

não entendi o que você quis dizer com renomeie/transfira as regras, pode ser mais explícito?

[Guilherme Oderdenge 42]

Por exemplo, #login a > #login p a.

 

Afinal, a é o link de algum texto dentro de #login - e não da camada em si. Essa é a maneira mais semanticamente correta de se fazer o negócio - e inclusive vai evitar o tão indesejado conflito que está gerando.

[Diéssica 140]

Exatamente o que o Guilherme falou.

 

Imagine uma página em que os seletores e propriedades são iguais para todos os elementos. Obviamente todos os elementos receberão essas regras. Alguns deles entrarão em conflito pois possuem objetivos absolutamente opostos :thumbsup:

 

"Eu sei que

um trem anda quando está nos trilhos

."

"...Estou com um problema. Por que meu trem não anda? :wacko:"

[jnejunior 1]

ta bom, vou explicar direitinho pra vocês...

 

a div #painel, tem um form com os botões estilizados de um jeito, então eu os ataco assim:

 

#login a, #painel a {...}

#login a:hover, #painel a:hover {...}

 

a div login, tem quase a mesma formatação, exceto algumas mínimas mudanças, por isso uso a forma acima, então caso eu queira alguma modificação singular ataco a somente a div painel (#painel), assim:

 

#painel a {...}

#painel a:hover {...}

 

continuando, o formulário que recebe o tinymce esta dentro da div #conteudo, que por sua vez esta dentro da div #painel, lógico para atacar os elementos de link dentro desta, faria assim:

 

#painel #conteudo form a {...}

#painel #conteudo form a:hover {...}

 

sendo assim, pergunto: porque os links do textarea que tem o tinymce, pegam esta formatação? porque?

[Diéssica 140]

Junior, não complica: Post #11

 

A partir do momento que tu incorpora o TinyMCE na página, ele começa a fazer parte dessa página. É o textarea do site. Receberá a mesma formatação.