Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Luboš Hnědý
Člen
Avatar
Luboš Hnědý:8.2.2019 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
8.2.2019 10:11
Avatar
Michal Šmahel
Člen
Avatar
Odpovídá na Luboš Hnědý
Michal Šmahel:8.2.2019 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í
+2,50 Kč
Řešení problému
Nahoru Odpovědět
8.2.2019 11:36
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Luboš Hnědý
Člen
Avatar
Odpovídá na Michal Šmahel
Luboš Hnědý:8.2.2019 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.2.2019 12:42
Avatar
Michal Šmahel
Člen
Avatar
Odpovídá na Luboš Hnědý
Michal Šmahel:8.2.2019 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.2.2019 16:13
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Luboš Hnědý
Člen
Avatar
Luboš Hnědý:12.2.2019 21:47

Nakonec jsem použil iframe. :)

 
Nahoru Odpovědět
12.2.2019 21:47
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:13.2.2019 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.2.2019 14:08
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:13.2.2019 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.2.2019 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.