Front-end Front-end
Probíhá výprodej HTML, JavaScript a Bootstrap. Slevy až 80 %
Vyšlehej si extra vědomosti! Až 100% bodů na prémiový obsah zdarma! Více zde
Avatar
Luboš Hnědý:8. února 10:11

Zdravím mám takový dotaz. Na jedné stránce mám wysivig editor a následně zobrazuji výsledné html na druhé stránce. Problém je, že vyenerované html přebírá styly defaultní šablony(bootstrap atd.) což je logická, ale já to zrovna teď nechci. Nemáte nějaké nápady jak to vyřešit? Jednoduše řečeno jak udělat aby si element vyresetoval všechny styly a zkrátka se jelo úplně od znova a používal ty které jsou pouze v daném html. Je to nějak možné?

Zkusil jsem: Hledat na netu ale nedostalo se mi odpovědi

Chci docílit: Spravné funkčnosti

 
Odpovědět  +1 8. února 10:11
Avatar
Odpovídá na Luboš Hnědý
Michal Šmahel:8. února 11:36

Ahoj, to je zajímavý problém. Co jsem přemýšlel a četl, je několik řešení. Každé řešení má však svá úskalí. Ideální nejspíš neexistuje. Více to řeší na StackOverflow.

K těm řešením:

  • Ruční vynulování potřebných vlastností (prostě nastavíš pro daný blok CSS vlastnosti na výchozí hodnoty) - sice je to nejpracnější, ale zase tě to dále nebude omezovat a nemusíš řešit podporu ve starších prohlížečích
  • Použití iframe (blok vložíš do tahu iframe) - podstatně jednodušší, ale zase tě to bude omezovat v přístupu k danému HTML kódu (iframe funguje zjednodušeně jako oddělená HTML stránka), podpora prohlížečů by měla být dobrá
  • Využití CSS vlastnosti all (viz w3schools) - elegantní řešení, které má však problém s podporou u starších i některých novějších prohlížečů

Je třeba to zvážit a vybrat možnost, která se pro tebe hodí nejvíce. Když by ještě někoho něco napadlo, budu rád za doplnění.

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět  +1 8. února 11:36
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovídá na Michal Šmahel
Luboš Hnědý:8. února 12:42

Díky za super nápady, ale narazil jsem na problém u prvního a posledního řešení... Když máš například styly

* {
        color: red;
}

tak to nepřepíše ani jedno z řešení... Iframe by šel sice bych tam musel trochu "násilně" podhodit to html, ale šlo by to. Je tu, ale taky problém spíše můj, že si tahám html z databáze a nacpat si ho do toho je trochu problém no...

 
Nahoru Odpovědět 8. února 12:42
Avatar
Odpovídá na Luboš Hnědý
Michal Šmahel:8. února 16:13

No, u prvního řešení si nastavíš výchozí barvu a je to. Ono by se celkově muselo zkombinovat první a třetí řešení v případě použití toho třetího (co jsem díval, mají to tak i někteří na StackOverflow).

Co se týče vložení HTML do iframe, tam by neměl být problém ani s využitím serverového jazyka tahajícího data z databáze, ne?

Nahoru Odpovědět 8. února 16:13
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Luboš Hnědý:12. února 21:47

Nakonec jsem použil iframe. :)

 
Nahoru Odpovědět 12. února 21:47
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:13. února 14:08
  • (2) Nejlepsi pro tebe asi iframe. Jestli hadam spravne, ze ten editor ma vlastni sadu stylu, ktera si moc nerozumi s bt.
  • (1) Ja bych to resil prvnim resenim, zkopiroval si bt styly z bt ne-min css a prepsal je. Lze pritvrdit importantem.
  • (3) do css all bych nesel

Pr.

/* --- doc.min.css = BT doc css --- */

.mujeditor .bd-callout {
        padding: 1.25rem;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        border: 1px solid #eee;
        border-left-width: .25rem;
        border-radius: .25rem
}
.mujeditor .bd-callout h4 {
        margin-top: 0;
        margin-bottom: .25rem
}
.mujeditor .bd-callout p:last-child {
        margin-bottom: 0
}
.mujeditor .bd-callout code {
        border-radius: .25rem
}
.mujeditor .bd-callout+.bd-callout {
        margin-top: -.25rem
}
.mujeditor .bd-callout-info {
        border-left-color: #5bc0de
}
.mujeditor .bd-callout-info h4 {
        color: #5bc0de
}
/* --- end doc.min.css --- */
 
Nahoru Odpovědět 13. února 14:08
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:13. února 14:13

html kod k tomu, mel by to byt ten pekny ramecek s carou, co je v bt dokumentaci

<div class="bd-callout bd-callout-info">
  <h4> Cenová kalkulačka </h4>
  <p>text</p>
</div>
 
Nahoru Odpovědět 13. února 14:13
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.