Jump to content

Rozbudowany edytor teksu do opisów produktów itp.

Harrry

By Harrry
in Forum ogólne

 Share

Recommended Posts

Harrry Newbie

Harrry

Posted
Posted (edited)

Witajcie. 

 

Poszukuję rozbudowanego edytora tekstu, by miał możliwość robienia ładnych opisów tekstów z wykorzystaniem infografiki. 

By można było np. grafika po lewej a tekst po prawej, lub najlepiej typu drag and drop oczywiście jeśli coś takiego istnieje :)

Może dodawanie jakiś kształtów itp.  

 

Prestashop 1.6.0.9 

srona cito-sklep.pl 

Edited by Harrry (see edit history)
Link to comment
Share on other sites
endriu107 Grand Master

endriu107

Posted
Posted

Może coś więcej napisz. Standardowo edytory WYSIWYG działają na zasadzie zamiany widoku na html i na odwrót zamiany html na widok, więc tutaj tylko ograniczenia znajomości podstaw kodowania html/css i ograniczenia edytora mogą wpłynąć na końcowy efekt. Presta w standardzie ma nieco ograniczony edytor, żeby rozszerzyć jego możliwości należy wyłączyć html Purifier i dodatkowo można edytor nieco rozszerzyć np. w ten sposób: https://mypresta.eu/en/art/prestashop-16/extended-rich-text-editor.html

Link to comment
Share on other sites
Harrry Newbie

Harrry

Posted
  • Author
Posted

Na kodowaniu się nie znam :( dlatego chciałbym już gotowe rozwiązanie lub dobry edytor :) lub może to być jakiś zewnętrzny program( na maca), którym zrobię sobie graficznie itp. opis a on to przerobi na html zgody by się nic nie rozwalała było przyjazne pod kątem SEO. 

Link to comment
Share on other sites
Harrry Newbie

Harrry

Posted
  • Author
Posted

Ok mam edytor zew. na maca typu WYSIWYG. 

W miare prosty i dam radę cos w nim zrobić. Dziś zrobiłem przykładowy opis produktu i wrzuciłem kod do opisu presty nowego produktu. 

Wszystko się pokazało na całej stronie a nie w polu gdzie miał być opis produktu. Co zmienić w kodzie by pokazywało się tylko w polu opisu.  

 

W kodzie też zamiast ż,ą itp. są takie znaki : (24 miesiące gwarancji na urzadzenie i głowice czynią )

tak ma to być ?

Link to comment
Share on other sites
Harrry Newbie

Harrry

Posted
  • Author
Posted (edited)

Ok rozumiem, ale na jakiej szerokości szablonie najlepiej to projektować i czy muszę w kodzie zaznaczyć to jakoś że będzie to strona responsywna ?

i Co zrobić wy strona wyświetlała się w tym polu a nie na całej stronie w sensie co z tym position:absolut zrobić ?

Edited by Harrry (see edit history)
Link to comment
Share on other sites
Harrry Newbie

Harrry

Posted
  • Author
Posted

No rozumiem co to jest responsywna storna :). 

To jak powinien wyglądać kod robiony programem typu drag&drop ( Quick 'n Easy web builder 4) tak by można go wkleić do prest jako opis produktu. 

Kompletnie nie znam się na kodowaniu dlatego takie pytania Ci zadaję :( Dziękuję za cierpliwość. 

 

Wklejam kod jaki mi ten program generuje może tak będzie łatwiej 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="Quick 'n Easy Web Builder Trial Version - http://www.quickandeasywebbuilder.com">
<style>
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
h1
{
   font-family: Arial;
   font-weight: bold;
   font-size: 32px;
   font-style: normal;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   display: inline;
}
h2
{
   font-family: Arial;
   font-weight: bold;
   font-size: 27px;
   font-style: normal;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   display: inline;
}
#wb_Text1
{
   background-color: transparent;
   background-image: none;
   border: 0px #FFFFFF solid;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text1 div
{
   text-align: left;
}
#YouTube1
{
   border-width: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text2
{
   background-color: transparent;
   background-image: none;
   border: 0px #C0C0C0 solid;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text2 div
{
   text-align: left;
}
#wb_Text3
{
   background-color: transparent;
   background-image: none;
   border: 0px #C0C0C0 solid;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text3 div
{
   text-align: left;
}
#wb_Text4
{
   background-color: transparent;
   background-image: none;
   border: 0px #C0C0C0 solid;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text4 div
{
   text-align: left;
}
#wb_Text5
{
   background-color: transparent;
   background-image: none;
   border: 0px #C0C0C0 solid;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text5 div
{
   text-align: left;
}
#wb_Text6
{
   background-color: transparent;
   background-image: none;
   border: 0px #C0C0C0 solid;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text6 div
{
   text-align: left;
}
#wb_Text7
{
   background-color: transparent;
   background-image: none;
   border: 0px #C0C0C0 solid;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text7 div
{
   text-align: left;
}
#Image1
{
   border: 0px #000000 solid;
   padding: 0px 0px 0px 0px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#Image2
{
   border: 0px #000000 solid;
   padding: 0px 0px 0px 0px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#Image3
{
   border: 0px #000000 solid;
   padding: 0px 0px 0px 0px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#Image4
{
   border: 0px #000000 solid;
   padding: 0px 0px 0px 0px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text9
{
   background-color: transparent;
   background-image: none;
   border: 0px #C0C0C0 solid;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text9 div
{
   text-align: left;
}
#wb_Text10
{
   background-color: transparent;
   background-image: none;
   border: 0px #C0C0C0 solid;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text10 div
{
   text-align: left;
}
#wb_Text11
{
   background-color: transparent;
   background-image: none;
   border: 0px #C0C0C0 solid;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text11 div
{
   text-align: left;
}
#wb_Text8
{
   background-color: transparent;
   background-image: none;
   border: 0px #C0C0C0 solid;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text8 div
{
   text-align: left;
}
#wb_Text12
{
   background-color: transparent;
   background-image: none;
   border: 0px #C0C0C0 solid;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text12 div
{
   text-align: left;
}
</style>
</head>
<body>
<a href="http://www.quickandeasywebbuilder.com" target="_blank"><img src="images/builtwithqwb4.png" alt="Quick 'n Easy Web Builder" style="position:absolute;left:1117px;top:2327px;border-width:0;z-index:9999"></a>
<div id="wb_Text1" style="position:absolute;left:0px;top:14px;width:1001px;height:92px;z-index:1;">
<div style="font-family:Arial;font-size:13px;line-height:15px;color:#000000;">
<div style="text-align:center"><h1>Aparat KTG - Kardiotokograf KTG L8  </h1></div>
<div><br></div>
</div>
</div>
<div id="wb_YouTube1" style="position:absolute;left:576px;top:487px;width:401px;height:225px;z-index:2;">
<iframe id="YouTube1" src="https://www.youtube.com/embed/6Qg4q6IVuOI?rel=1&autoplay=1&autohide=0"></iframe></div>
<div id="wb_Text2" style="position:absolute;left:0px;top:2147px;width:999px;height:151px;z-index:3;">
<div style="font-family:Arial;font-size:13px;line-height:22px;color:#000000;">
<div><span style="font-size:19px;line-height:22px;">Specjalizujemy się w </span><span style="font-size:19px;line-height:22px;"><strong>aparatach KTG</strong></span><span style="font-size:19px;line-height:22px;">, dlatego zapewniamy profesjonalny serwis i doradztwo. Znamy swój sprzęt doskonale i zawsze potrafimy fachowo pomóc. Zapewniamy stały dostęp materiałów eksploatacyjnych i części zamiennych. Zależy nam, aby kupujący był w 100% zadowolony. Tylko u nas masz zawsze prawo zwrotu towaru jeśli nie spełni twoich oczekiwań! Polecamy gorąco. Idealny do prywatnego gabinetu położniczego, dla pielęgniarek położnych oraz na oddział porodowy. Monitorowane parametry mogą być drukowane na bieżąco przez wbudowaną drukarkę termiczną. Wydruki z drukarki o szerokości 110mm  są niezwykle czytelne i wyraziste. </span></div>
</div>
</div>
<div id="wb_Text3" style="position:absolute;left:0px;top:865px;width:999px;height:69px;z-index:4;">
<div style="font-family:Arial;font-size:13px;line-height:49px;color:#000000;">
<div style="text-align:center"><span style="font-size:43px;line-height:49px;color:#FF1493;"><strong><em>4.</em></strong></span><span style="font-size:29px;line-height:49px;color:#FF1493;"><strong><em> ZALETY APARATU KTG LUCKCOME L8</em></strong></span></div>
</div>
</div>
<div id="wb_Text4" style="position:absolute;left:0px;top:114px;width:1001px;height:242px;z-index:5;">
<div style="font-family:Arial;font-size:13px;line-height:28px;color:#000000;">
<div><span style="font-size:24px;line-height:28px;color:#FF1493;"><strong><em>Aparat KTG L8</em></strong></span><span style="font-size:19px;line-height:28px;"> to profesjonalny </span><span style="font-size:19px;line-height:28px;"><strong>kardiotokograf </strong></span><span style="font-size:19px;line-height:28px;"> z dużym kolorowym ekranem 7</span><span style="font-size:19px;line-height:28px;">"</span><span style="font-size:19px;line-height:28px;"> LCD. Zapewnia monitorowanie takich parametrów jak: FHR (cardio) , TOCO (skurcze macicy), FMOV (ruchy płodu). Dzięki swoim zaawanasowanym funkcją i atrakcyjnej cenie jest on najczęściej wybieranym aparatem KTG w Polsce. W naszym karju pracuje już ponad 150 szt. tego </span><span style="font-size:19px;line-height:22px;"><strong>kardiotokografu</strong></span><span style="font-size:19px;line-height:22px;">. Znaleźć go można w  prywatnych gabinetach, szpitalnych oddziałłach itp. </span><span style="font-size:19px;line-height:22px;"><strong>Aparaty KTG</strong></span><span style="font-size:19px;line-height:22px;"> z serii L8 posiadają dwu letnią gwarancję na urządzenie i głowice. </span><span style="font-size:19px;line-height:22px;"><strong>Nowością jest wbudowana analiza badania KTG</strong></span><span style="font-size:19px;line-height:22px;">, która jest szczególnie przydatna położnej i w szkołach rodzenia. </span></div>
</div>
</div>
<div id="wb_Text5" style="position:absolute;left:0px;top:479px;width:565px;height:49px;z-index:6;">
<div style="font-family:Arial;font-size:13px;line-height:31px;color:#000000;">
<div style="text-align:center"><h2>Prezentacja wideo kardiotokografu L8</h2></div>
</div>
</div>
<div id="wb_Line1" style="position:absolute;left:-8px;top:788px;width:1007px;height:2px;z-index:7;">
<img src="images/img0001.png" id="Line1" alt="" title="" style="border-width:0;width:1023px;height:18px;"></div>
<div id="wb_Line2" style="position:absolute;left:-8px;top:413px;width:1007px;height:2px;z-index:8;">
<img src="images/img0002.png" id="Line2" alt="" title="" style="border-width:0;width:1023px;height:18px;"></div>
<div id="wb_Text6" style="position:absolute;left:0px;top:1739px;width:582px;height:344px;z-index:9;">
<div style="font-family:Arial;font-size:13px;line-height:20px;color:#000000;">
<ul style="margin-left:17px;">
   <li><br></li>
   <li><span style="font-size:17px;line-height:20px;"> Częstotliwość: 1 MHz, głowica wielokryształowa wysokiej czułości</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Technologia: Doppler pulsacyjny PW + system DSP</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Zakres pomiarowy FHR: 50~210 BPM , dokładność: ±2 BPM</span></li>
   <li><span style="font-size:17px;line-height:20px;"> TOCO Zakres pomiarowy: 0-100% , dokładność: < 10 %</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Automatyczne wykrywanie ruchów płodu + marker dla pacjentki</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Ruchomy kolorowy ekran LCD 7</span><span style="font-size:17px;line-height:20px;">"</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Funkcje alarmów niskiego i wysokiego tętna, końca papieru, itp</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Drukarka termiczna wbudowana 110 mm</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Możliwość podłączenia dodatkowej sondy do monitorowania bliźniąt</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Zasilanie: AC 100V—240V 50/60 Hz i wbudowany akumulator</span></li>
   <li><span style="font-size:17px;line-height:20px;"> aparat KTG z wbudowaną analizą badania</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Polskie Menu</span></li>
   <li><span style="font-size:17px;line-height:20px;"> </span><span style="font-size:17px;line-height:20px;"><strong>Gwarancja 24 miesiące na urządzenie</strong></span></li>
   <li><span style="font-size:17px;line-height:20px;"><strong> Gwarancja 24 miesiące na głowice</strong></span></li>
</ul>
</div>
</div>
<div id="wb_Text7" style="position:absolute;left:699px;top:1739px;width:313px;height:267px;z-index:10;">
<div style="font-family:Arial;font-size:13px;line-height:20px;color:#000000;">
<div><br></div>
<ul style="margin-left:17px;">
   <li><span style="font-size:17px;line-height:20px;"> </span><span style="font-size:17px;line-height:20px;"><strong>Kardiotokograf L8</strong></span></li>
   <li><span style="font-size:17px;line-height:20px;"> Głowica Cardio</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Głowica TOCO</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Pasy mocujące głowice</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Ręczny znacznik dla pacjentki</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Zasilanie akumulatorowe gratis !!!</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Obszerna instrukcja PL</span></li>
   <li><span style="font-size:17px;line-height:20px;"> 2 zwijki papieru 110mm</span></li>
   <li><span style="font-size:17px;line-height:20px;"> Przewód zasilający</span></li>
</ul>
</div>
</div>
<div id="wb_Line4" style="position:absolute;left:-8px;top:1610px;width:1007px;height:2px;z-index:11;">
<img src="images/img0004.png" id="Line4" alt="" title="" style="border-width:0;width:1023px;height:18px;"></div>
<div id="wb_Image1" style="position:absolute;left:89px;top:956px;width:126px;height:127px;z-index:12;">
<img src="images/Aparat-KTG-2-lata-gwarancji.png" id="Image1" alt="Gwarancja 2 lata na Aparat KTG"></div>
<div id="wb_Image2" style="position:absolute;left:87px;top:1118px;width:126px;height:127px;z-index:13;">
<img src="images/Aparat-KTG-2-lata-gwarancji.png" id="Image2" alt="Aparat KTG z wbudowaną analizą"></div>
<div id="wb_Image3" style="position:absolute;left:88px;top:1273px;width:126px;height:127px;z-index:14;">
<img src="images/Aparat-KTG-2-lata-gwarancji.png" id="Image3" alt="Aparat KTG z głowicą do ciąży bliźniaczej"></div>
<div id="wb_Image4" style="position:absolute;left:86px;top:1428px;width:126px;height:127px;z-index:15;">
<img src="images/Aparat-KTG-2-lata-gwarancji.png" id="Image4" alt="Drukarka termiczna w aparacie KTG"></div>
<div id="wb_Text9" style="position:absolute;left:245px;top:999px;width:613px;height:91px;z-index:16;">
<div style="font-family:Arial;font-size:13px;line-height:22px;color:#000000;">
<div><span style="font-size:19px;line-height:22px;"><em>24 miesiące gwarancji na urzadzenie i głowice czynią z niego idealne KTG dla szkół rdzenia, </em></span><span style="font-size:19px;line-height:22px;"><em>położnych, gabinetów i szpitali. </em></span></div>
</div>
</div>
<div id="wb_Text10" style="position:absolute;left:245px;top:1145px;width:613px;height:91px;z-index:17;">
<div style="font-family:Arial;font-size:13px;line-height:22px;color:#000000;">
<div><span style="font-size:19px;line-height:22px;"><em>Wbudowana analiza badania. Dzięki zaawansowanemu oprogramowaniu aparat ktg wykonuje anlizę badania metodą KREBS lub FISCHER</em></span></div>
</div>
</div>
<div id="wb_Text11" style="position:absolute;left:245px;top:1303px;width:613px;height:91px;z-index:18;">
<div style="font-family:Arial;font-size:13px;line-height:22px;color:#000000;">
<div><span style="font-size:19px;line-height:22px;"><em>Możliwość rozbudowy o głowicę do ciąży bliźniaczej. Głowice do ciąży bliźniaczej możesz wybrać pod ceną poroduktu. Cena wzrośnie automatycznie o 390 zł brutto.</em></span> </div>
</div>
</div>
<div id="wb_Text8" style="position:absolute;left:48px;top:555px;width:481px;height:191px;z-index:19;">
<div style="font-family:Arial;font-size:13px;line-height:20px;color:#000000;">
<div><span style="font-size:17px;line-height:20px;"><em>Wychodzać na przeciw naszym klientom, sukcesywnie będziemy dodawali prezentacje w formacie wideo naszych wszystkich produktów.</em></span><span style="font-size:17px;line-height:20px;"><em> Dzięki temu będziecie państwo mogli zapznać się bardziej szczegółowo z naszymi między innymi aparatami KTG. Serdecznie zapraszamy do zapoznania się z naszymi wszystkimi filmami na naszym kanale youtube dostępnym pod adresem:</em></span></div>
<div><span style="font-size:17px;line-height:20px;"><em> </em></span></div>
<div><span style="font-size:17px;line-height:20px;color:#0000FF;"><em><a href="https://www.youtube.com/c/citoskleppl" target="_self">https://www.youtube.com/c/citoskleppl</a></em></span></div>
</div>
</div>
<div id="wb_Text12" style="position:absolute;left:245px;top:1468px;width:613px;height:91px;z-index:20;">
<div style="font-family:Arial;font-size:13px;line-height:22px;color:#000000;">
<div><span style="font-size:19px;line-height:22px;"><em>Drukarka termiczna pozwala na długi czas bezawaryjnej i bezkosztowej pracy. Wydruk zapisywany jest na papierze o szerokości 110mm. </em></span></div>
<div><br></div>
</div>
</div>
<div id="wb_Shape1" style="position:absolute;left:0px;top:1652px;width:266px;height:43px;z-index:21;">
<img src="images/img0003.png" id="Shape1" alt="Parametry techniczne aparatu ktg luckcome L8" title="Parametry techniczne aparatu ktg luckcome L8" style="border-width:0;width:266px;height:43px"></div>
<div id="wb_Shape2" style="position:absolute;left:704px;top:1652px;width:261px;height:43px;z-index:22;">
<img src="images/img0005.png" id="Shape2" alt="Zawartość opakowania KTG" title="Zawartość opakowania KTG" style="border-width:0;width:261px;height:43px"></div>
</body>
</html>
Link to comment
Share on other sites
endriu107 Grand Master

endriu107

Posted
Posted

Pierwszy raz się spotykam z czymś takim ze osoba korzysta z innego edytora żeby uzyskać efekt który można używając standardowego edytora. Przeglądając powyższy kod jest tam 80% stylów a 20% treści i to wszystko dla każdego produktu chcesz zapisywać w bazie danych?

Nikt Ci tutaj nie napisze co i jak masz robić, ja bym po prostu korzystał z standardowego narzędzia presty i nauczył sie jego obsługi która jest banalnie prosta a po rozszerzeniu jego możliwości masz dużo więcej opcji edycji.

Link to comment
Share on other sites
Harrry Newbie

Harrry

Posted
  • Author
Posted

ok, czyli jak mówisz że to będzie zbyt dużo to rezygnuję :). Postaram się rozszerzyć możliwości standardowego.  Widocznie ja musze mieć coś źle zrobione z moim standardowym edytorem. Mi w edytorze standardowym co chwila coś się przesuwa, nie wstawia przerw między wierszami np. podwójnej lub potrójnej nie da rady zrobić w edytorze wizualnym muszę je ręcznie w kodzie dodawać. 

Dziękuję Ci bardzo za pomoc i doradzenie co mam zrobić. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...