NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Jan Štrobl
Člen
Avatar
Jan Štrobl:5.5.2017 8:48

Ahoj, nečekaně mám malý problém. Máme webové stránky jejichž obsah se upravuje přes administraci editorem (tinymce). Máme zde nějaké informace a máme jistou tabulku s odkazem na formulář.

<table>
<td>..údaje..</td>
<td><a  href="javascript:void(0);" onClick="window.open('form.php?polozka=1'">Objednat</a>
</table>

Problém nastává v tom, že editor mi drze vymaže celý ten odkaz. Zkoušel jsem si to na vlastních stránkách, tam to funguje ok. Ovšem když to chci vložit skrze tento editor nejde to. Editor nám sám nabízí možnosti oken při tvorbě odkazu (blank_;top_;sel­f_;parent_;) je tam i možnost "<rámec>" a "<vyskakovací okno>" ale předpokládám že když tam jsou ty ostré závorky tak to symbolizuje že to editor nepodporuje, že nemá vhodný plugin.
Já se bohužel v nemohu do nastavení editoru dostat. Doufám že jsem problém popsal dost jasně :-)

Takže otázka zní, je nějáká možnost jak to obejít ? Například vytvoření takového okna přes CSS styly? Popřípadě jestli by to šlo vést ještě přes jinou adresu?

Předem díky za reakce :-)

 
Odpovědět
5.5.2017 8:48
Avatar
Robert Poč
Člen
Avatar
Robert Poč:5.5.2017 9:32
  1. Tak základní analytika, jakto, že to na tvých stánkách to funguje a na jiných ne? Asi jiné výchozí podmínky, že by verze TinyMCE. Najdi ten rozdíl/problém.
  2. Pokud je chyba skutečně v TinyMCE, o čemž pochybuji, moc nerozumím tomu, proč si nemůžeš editor opravit.
  3. Když se ti fakt nechce, proč nemůžeš mít onClick přimo na TD, funcionalita zůstane zachována a editor nebude validovat Ačko.
<table>
<td>..údaje..</td>
<td onClick="window.open('form.php?polozka=1'>Objednat</table>
 
Nahoru Odpovědět
5.5.2017 9:32
Avatar
Robert Poč
Člen
Avatar
Robert Poč:5.5.2017 9:34

Oprava

<table>
        <td>..údaje..</td>
        <td onClick="window.open('form.php?polozka=1');">Objednat</td>
</table>
 
Nahoru Odpovědět
5.5.2017 9:34
Avatar
Jan Štrobl
Člen
Avatar
Jan Štrobl:5.5.2017 9:44

Ahoj,

  1. Na mých stránkách jsem ani editor nepoužil, jednoduše jsem vytvořil obyčejnou tabulku s daným odkazem na formulář -> tím jsem chtěl poukázat na to že kód na vyskakovací okno je v pořádku.
  2. Úprava editoru, respektive přidání daného pluginu je trochu složitější jelikož stránky jako takové nám vytvářel někdo jiný a přístup k němá má daná firma. Tuto možnost nechávám až úplně na konec.
  3. Zkoušel jsem a bohužel, i případě že to přehodím přímo na TD tak mi to editor smaže :/

Proto se ptám jestli to nelze jinačí cestou. Například přes CSS, našel jsem toto " https://www.webdesignerdepot.com/…l5-and-css3/ " Akorát přemýšlím že v tomto případě by každá stránka, kde je daná položka musela obsahovat formulář. Což je zhruba dalších 300 řádků kódu.

 
Nahoru Odpovědět
5.5.2017 9:44
Avatar
Jiří Fencl
Člen
Avatar
Jiří Fencl:5.5.2017 10:52

Muzete pridavat na web javascript? Pak by stacilo te bunce dat napr class="klikaci" a jestli je potreba, tak data-polozka="XXX". V JS pak pro vsechny prvky tridy "klikaci" udelat event pro klik, kde se nacte data-polozka a zavola se ten window.open

 
Nahoru Odpovědět
5.5.2017 10:52
Avatar
Jan Štrobl
Člen
Avatar
Odpovídá na Jiří Fencl
Jan Štrobl:5.5.2017 12:53

Tuším kam směřuješ ale nejsem si jist jestli tě plně chápu, to bych ten styl rovnou mohl požít pro odkaz a. Mohl bys uvést příklad v kódu?
Mám to totiž vedené přes php a formulář si bere údaj z které položky se na něho zrovna odkázalo
viz:

..href="form.php?polozka=polozka1"..>

nebo jako jsem to měl teď

<..href="javascript:void(0);" onClick="window.open('form.php?polozka=polozka1')";...>

A právě přes ty styly si myslím že by to mohlo fungovat ale nevím přesně jak,

 
Nahoru Odpovědět
5.5.2017 12:53
Avatar
Jiří Fencl
Člen
Avatar
Jiří Fencl:5.5.2017 13:06

1] Kdyz neni odkaz odkazem, tak je lepsi pouzit button
2] Editor to prece smaze, tak onClick musis obejit tim, ze das buttonu tridu a primo do tagu ulozis to, co potrebujes mit v kazde url jine

<button type="button" class="formklik" data-polozka="1">button</button>

3] za tabulkou vlozis js

$('.formklik').click( function(){ window.open('form.php?polozka='+$(this).attr('data-polozka');  } );
Editováno
 
Nahoru Odpovědět
5.5.2017 13:06
Avatar
Jan Štrobl
Člen
Avatar
Odpovídá na Jiří Fencl
Jan Štrobl:5.5.2017 13:28

Tohle řešení by se mi i líbilo, ale ten editor mi ten script stejně maže. button nechá ale smaže script. Ale styly tam nechá v klidu. Zkusím to udělat přes ty styly (jak jsem posílal odkaz). Pokud se mi to povede postnu to sem.

 
Nahoru Odpovědět
5.5.2017 13:28
Avatar
Jiří Fencl
Člen
Avatar
Jiří Fencl:5.5.2017 13:46

A proc ten JS nedas jinudy kdyz muzes do php? Pres tinymce to samozrejme nejde kdyz si nepovolis tag script

 
Nahoru Odpovědět
5.5.2017 13:46
Avatar
Jan Štrobl
Člen
Avatar
Jan Štrobl:5.5.2017 15:08

Než jsem stačil postřehnout tvou připomínku na JS tak jsem se zabral do toho CSS a mám to co jsem potřeboval. Díky za rady a popostrčení. Přidávám kód kdyby někdo v budoucnu řešil obdobný problém a chtěl se vyhnout JS.
Nejdříve styly viz. odkaz výše.

<style>
 .modalDialog {
               position: fixed;
               font-family: Arial, Helvetica, sans-serif;
               top: 0px;
               right: 0;
               bottom: 0;
               left: 0;
               background: rgba(0,0,0,0.8);
               z-index: 99999;
               opacity:0;
               -webkit-transition: opacity 400ms ease-in;
               -moz-transition: opacity 400ms ease-in;
               transition: opacity 400ms ease-in;
               pointer-events: none;
       }

       .modalDialog:target {
               opacity:1;
               pointer-events: auto;
       }

       .modalDialog > div {
               width: 820px;
               position: relative;
               top: 0px;
               margin: 10px auto;
               padding: 5px 20px 13px 20px;
               border-radius: 10px;
               background: #fff;
               background: -moz-linear-gradient(#fff, #999);
               background: -webkit-linear-gradient(#fff, #999);
               background: -o-linear-gradient(#fff, #999);
       }

       .close {
               background: #606061;
               color: #FFFFFF;
               line-height: 25px;
               position: absolute;
               right: -12px;
               text-align: center;
               top: -10px;
               width: 24px;
               text-decoration: none;
               font-weight: bold;
               -webkit-border-radius: 12px;
               -moz-border-radius: 12px;
               border-radius: 12px;
               -moz-box-shadow: 1px 1px 3px #000;
               -webkit-box-shadow: 1px 1px 3px #000;
               box-shadow: 1px 1px 3px #000;
       }

       .close:hover { background: #00d9ff; }
</style>

Následuje div s oknem samotným, ten můžete vložit úplně nahoru k head nebo až úplně dolu. Je jedno kam ho vložíte jelikož je skrytý.

<div id="openModal" class="modalDialog">
<div><a href="#close" title="Close" class="close">X</a> <iframe src="form.php?zbozi=zbozi15" height="900px" width="820px" scrolling="yes" noresize="noresize" frameborder="no"></iframe></div>
</div>

Poznámka: Abych nemusel na každou stránku kopírovat formulář do kterého bych ručně dopisoval parametry, vložil jsem PHP formulář který si je bere ze stránky za pomocí GET. Pokud by šlo o formulář pro jednu stránku (například LOGIN) tak samozřejmě nemusí být iframe ale rovnou form.

a poslední, v tabulce jsem pouze upravil odkaz:

<td>
 <p><a href="#openModal" class="button" style="float: center; font-family:roboto; font-size: 20px; width: 200px">Objednat</a></p>
 </td>
Akceptované řešení
+5 Zkušeností
Řešení problému
 
Nahoru Odpovědět
5.5.2017 15:08
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 10 zpráv z 10.