kEditor (Wysiwyg and BBcode)

[tbence]

Kár. Az jó lesz, ha majd lehet hozzá bővítményeket írni, akkor fogok 2-őt min. Van ötletem.

[Keveqiah]

nem volt erőm fejleszteni.. ez is ennyiben maradt. ezt jobbnak láttam és ha már te úgyis fejlesztetted, majd össze is gyúrhatod.
tervben volt, hogy ehhez is lehet bővítményeket írni majd, de félbemaradt. talán a szmájlis rész még működik, de nem volt jó a tervezés.

[tbence]

Tényleg, a Wysiwyg miért lett kiírva belőle? Az volt benne számomra az egyik legjobb, és tanulságosabb dolog.
Fejlesztgettem is rajta ezt azt.

[Suttogó]

Csak a linkek nem vezettek sehová, de így már megvan

[Keveqiah]

Fönt van.

Példák:
http://keveqiah.hu/projects/keditor

Letöltés:
http://keveqiah.hu/projects/zip/bbc-editor.zip

A regexp kellene belőle?

[Suttogó]

Keveqiah!

Már nem érhetőek el a webes példák. Vissza tudnád esetleg rakni őket?

[Keveqiah]

Nem tökéletes a program. De nem is volt cél a kód vissza alakítása, érdemesebb tárolni a bbc változatot is.

[DéDé]

na nem bírtam módosítani az előző hsz-t na szóval még van valami ,ha van két font color bb akkor szerkesztésnél így kapom vissza valahogy

Kód: HTML

1. [font=#0000FF]<span style="color: #7CFC00;">1[/font]</span>

[DéDé]

okés.köszi
viszont vár még valamit a BBCeditor::__construct() =)

[Keveqiah]

Nyahh.. én is hülye vagyok ma. (bár inkább csak beteg)
Van visszafejtés is. azt a részt a

Kód: PHP

1. $valami->GiveSource($html); //metódus fejti vissza

Ennek a bemeneti értéke a html forrás (lehetőleg a szerkesztő saját átalakítása legyen), a visszatérési érétke pedig a visszacserélt bbcode-ok.

Magyarán: példányosítasz egy szerkesztőt, majd meghívod a metódust.

Kód: PHP

1. $bbc_example = new BBCeditor();
2.  
3. $html_to_bbc = "<b>fgdfg </b>fg dfgd gd <i>fgdg </i>dg dfg";
4. $resource = $bbc_example->GiveSource($html_to_bbc);
5.  
6.  

Viszont általában két formában szokták menteni, egy bbc és egy html. megjeleníteni a html-t szerkesztéshez meg a bbc-t használják, így nem kell "hülyéskedni" a visszafejtéssel, csak frissíteni a html-t, ha szerkesztve lett a tartalom.

[DéDé]

Közvetlen html átalakítás nincs a szerkesztőbe építve, csak textarea-ből post-al küldött adat feldolgozásra van benne megírva a metódus, de ha van egy kis időd, megírom a megfelelő metódust.

értelek..
akkor csak befelé van cucc.. sejtettem..átnéztem azért már a forrást =)
igazából fórumba szeretném beépíteni..ezért gondoltam ,h bb kód formájába viszem fel így a szerkesztés is megvan oldva mivel a rekordod bedobom a textarea-ba és csumi..

[Keveqiah]

Közvetlen html átalakítás nincs a szerkesztőbe építve, csak textarea-ből post-al küldött adat feldolgozásra van benne megírva a metódus, de ha van egy kis időd, megírom a megfelelő metódust.

[DéDé]

Üdv!
írnál egy példát ,hogy a db-ben tárolt bb kódot ,hogy alakítom html-re... ?
a második kérdés ,hogy melyiket célszerű adatbázisba vinni ? a bb kódot vagy magát a html-t ?

[DéDé]

Köszi!
sejtettem ,hogy 5ös.. szolgáltatón 4.x valamennyi van.
majd buherálhatok.
azért köszi
písz

[Keveqiah]

asszem 5-ös verzió alatt készült.

csatolom a legutolsó verziót.

[DéDé]

Üdv !
ezt hanyas php-n csináltad ? mert nekem egyátalán nem akar menni ..  osztály metódusokra dob ki hibát..

[Keveqiah]

Kis bővítés a bbc_editor.js fájlban. Mostmár a textarea %-os szélesség megadást is feldolgozza.

Ezt keresd

Kód: Javascript

1.         // Gombsor méretének igazítása
2.         setTimeout(function()
3.         {
4.         MyTextarea = document.getElementById(textObj);
5.         MyEditor = document.getElementById('My_'+textObj);
6.         MyEditor.style.width = parseInt(MyTextarea.style.width)+2+'px';
7.         MyTextarea.style.border='thin solid #c4c2b2';
8.         MyTextarea.style.width = MyEditor.style.width;
9.         }, 200);
10.  

Csere erre

Kód: Javascript

1.         // Gombsor méretének igazítása
2.         setTimeout(function()
3.         {
4.                 MyTextarea = document.getElementById(textObj);
5.                 MyEditor = document.getElementById('My_'+textObj);
6.  
7.                 if(MyTextarea.style.width.search("/%/i") < 0)
8.                         MyEditor.style.width = MyTextarea.style.width;
9.                 else
10.                         MyEditor.style.width = parseInt(MyTextarea.style.width)+2+'px';
11.  
12.                 MyTextarea.style.border='thin solid #c4c2b2';
13.                 MyTextarea.style.width = MyEditor.style.width;
14.         }, 200);
15.  

[Keveqiah]

BBC Editor v1.02

- manual
- példák

Screenshot: (manual)
http://phpstudio.hu/images/uploads/00000218_pelda_0.jpg

Screenshot: (példa)
http://phpstudio.hu/images/uploads/00000219_pelda_1.jpg

Online példák
http://keveqiah.hu/editor/example.php

A program nyílt forráskódú, tehát ha valakinek van javaslata, ötlete, esetleg már átalakította, jelezze a manual-ban megadott elérhetőségeken és a változásokat beépítjük a szerkesztőbe.

[Keveqiah]

Bug Report:

• Font Color regexp javítás

Más:
A képfeltöltős részt hogyan gondoltátok kivitelezni? Paraméterezhetően lenne egy UploadPictureFile metódus ami a megadott mappába rakná a képet ajax segítségével? Vagy nem igazán értem hogyan szeretnétek ezt a képfeltöltősdit.

[Keveqiah]

Bug Report:

• URL készítés javítva [url ] ** [/url ] és [url =** ] *** [/url ]  
• magic_quotes_gpc beállításának vizsgálata és szükség esetén \-jel eltávolítás

http://keveqiah.hu/editor/bbcodeditor.zip

[Keveqiah]

Jelentem a Wysi részét feladtam. Többre értékelem a BBC szerkesztő felületet.

Demoként láthattátok már a "véleményt kérnék róla" topicban is, de itt is linkelem.
http://keveqiah.hu/editor/

Több szem többet lát alapon felrakom a forrást is és némi útmutatót.  (Hátha derülnek még ki hibák)

Példa:
1. lépés: betöltjük a JS fájlokat.

Kód: HTML

1. <!-- JS -->
2. <script type="text/javascript" src="eleresi_ut/bbeditor/bbc_editor.js"></script>
3. <script type="text/javascript">
4. Config
5. (
6.         dirRoot = "/", /* erlérési út a gyökérkönyvtártól számítva */
7.         defStyle = "style.css", /* alapértelemezett css */
8.         Mode['custom'] = ['bold', 'italic', 'underline', 'url', 'image'] /* egyéni gombsor definiálás */
9. )
10. </script>
11.  

2. lépés: html form

Kód: HTML

1. <form method="post" action="" target="_blank">
2.    <script type="text/javascript">LoadToolbar('example_1', 'custom'); </script>
3.   <textarea name="example_1" id="example_1" style="width: 470px; height: 80px;" wrap="off"></textarea>
4.   <input type="submit" name="send" value="Send" />
5. </form>
6.  
7. LoadToolbar paraméterei: textarea id-je, gombsor neve
8.  

3. lépés: feldolgozás

Kód: PHP

1. if(isset($_POST['send']))
2. {
3.    include('bbeditor/bbc_editor.php'); // A szerkesztő betöltése
4.    $bbc_example = new BBCeditor('example_1'); // paraméterként a feldolgozni kívánt mező id-je
5.    // ha több textareaval dolgozunk, több példányt is létrehozhatunk belőle
6.    // $bbc_example_2 = new BBCeditor('example_2'); // paraméterként a feldolgozni kívánt mező id-je
7.  
8.    $html = $bbc_example->GiveCode(); //$html = $bbc_example_2->GiveCode();
9.    // Visszafejtés
10.    $bbc_src = $bbc_example->GiveSource($html); // bemenetként a html forrást várja. jelen esetben a lefordított kódot alakítjuk rögtön vissza. az      
11.     értékadás történhet akár adatbázisból is.
12. }
13.  

A csomagolt zip magában foglalj a demo oldal teljes forrását.

[tbence]

Nem tudom hogy hogyan csináltam, de szerintem már nem is gogok rájönni.
Viszont megoldottam magamnak, hogy manuálisan menjen.
Csináltam magamnak bele egy két plusz funkciót.  Szerintem tök jó lett. Azon gondolkozom, hogy csinálok egy demó oldalt, hogy ti is meg tudjátok majd nézni.
Csak a Wysiwyg részével szórakoztam, mivel azt használom, de szerintem tök jó lett.
Csináltam bele olyat, hogy ha írok a mezőbe, és kilóg a mezőből a szöveg. akkor nyúlik vele együtt a frame, és ha visszatörlök, akkor meg visszamegy.
Nekem ez azért jó, mert így jól átlátható a tartalma, sé ah kicsi szöveg van benne, akkor meg nem takarja el a fél oldalt.
Ezek után viszont a hosszabb szövegeknél ha valamit formázni akartam , akkor mindíg fel kellett tekernem az oldal tetejére, a kapcsolótáblához.
Ezt úgy oldottam meg, hogy ha elmegyek az oldal tetejétől, és már kimenne a képből a kapcsolótábla, akkor átállítotom a position tulajdonságát fixed top 0 -ra, így jön vele lefelé, ha meg felmegyek, akkor az oldal tetejétől eredeti helyére megáll, és ott ragad, ez meg azért jó, mert nem fog belelógni a nála fentebbi menübe logóba.
Aztán raktam még bele egy plusz gombot. Megcsináltam hogy ne csak Undo, hanem Redo is legyen.
Meg miután a régi pre tagos módszerrel nem lehetett megoldani, hogy a forrás látszon megírtam hát magamnak azt a gombot, amivel
ez is megoldható.
Röviden annyit csinál, hogy lecseréli a frame-t egy textarea -ra, és azt a frame forrásával tölti fel.
Majd ha megint kattintok, akkor vissza az egész, de a frame tartalma a textarea forrásával lesz feltöltve. Szóval amit a textaarea -ban módosítok, az lesz a frame-ben is, csak éppen nem forrás, hanem kimenetként.
A régi CSS -betöltös problémát is megoldottam magamnak, habár azon még lehetne mit javítni.
Úgy oldottam meg, hogy betöltök egy <link> tagot a frame-be, amit a .css -fájlomat hívja meg, így a frame tartalma a .css -emnek megfelelően lesz formázva.
Ezzel csak annyi a baj, hogy ha törölgetek a frame-ben akkor ezt is ki tudom szedni. De ez már szinte mindegy, mivel ha tudom hogy ez van, akkor arra felé óvatosan törölgetek, meg amúgy is vissza lehet vonni.
Szóval tök jó lett.
Ha érdekel valakit, akkor írjon ide, és akkor csinálok egy "demó"-t neki, hogy milyen lett. 

[tbence]

Nézelődtem, de nem találok semmit. 
És ebben az a legidegesítőbb, hogy tudom hogy régen valahogyan sikerült megoldanom! Akkor most miért nem jut eszembe hogy hogyan?!  :wacko:

[tbence]

Ez a getAttribute, ez semmi mást nem csinál, csak azt szedi össze, hogy a legördülő cuccból mi van kiválasztva.
Igazából itt csak a 3. paraméter az érdekes, de arra nem találtam olyan magyarnyelvű magyarázatot, amit sikerült volna megértenem.
De még keresem.

[Keveqiah]

Kód: Javascript

1. var sSelected=*****r.getItem(5).getAttribute("selectedIndex"));
2. document.execCommand("FormatBlock", false, sSelected.text);
3.  
4.  

setAttribute.. Ezekkel kell játszani, ha jól nézegetek, de nem vagyok benne biztos.

http://msdn.microsoft.com/en-us/library/ms537834(VS.85).aspx
http://social.msdn.microsoft.com/Search/en-us?query=execcommand+formatblock
http://msdn.microsoft.com/en-us/library/ms533049(v=VS.85).aspx

[tbence]

Hát jó. Én nézegetem/nézegettem, de egyenlőre nem találtam meg ami nekem kéne. És most nekem a BBC-s rész nem jó.

[Keveqiah]

23 óra után megkeresem a választ. (remélem) De addig is keresgélj az execCommand (ha jól rémlik) környékén. Annak van olyan paramétere ahol más html tagokat is meg lehet adni, hogy létrehozza. (Bár én személy szerint inkább a BBC kódos formáját használom. Igaz, külön is szedtem csak egy bbceditorra ami a saját kódját vissza is tudja fejteni)

[tbence]

Hű  de rég jártam már erre.
Azóta már nagyon régen sikerült "megjavítanom" a problémáimat. (Nagy részt)
Most az lenne a kérdésem, hogy hogyan tudnék olyan gombot írni, ami a divet class -al ellátva szúrja be?
tehát ezt akarom elérni:
asd (kijelölve)
rányomok a gombra, és ez legyen->
<div class="msg">asd</div>
Gombot már sikerült csinálnom. Az a blockquote tagot tökéletesen beszúrja, de nem tudom hogyan csináljak ilyet.
(A wisiy részét használom.)

[tbence]

Na megcsináltam amit mondtál, följebb raktam azt az if() -es részt, és kiszedtem a 2. paramétert az insert-ből, de még mindíg nem jó.
2 perc, mire betölt az oldal, és nem a megadott css szerint mutatja az előnézetet.

[tbence]

Hát ez a gond!!! Hogy onnan elméletileg nem vehette!!! Mivel hogy az a fájl nem volt a szerveren. szóval nem tudom miért csinálta.
De mindegy. Most nem csinálja. azért annak örülök, hogy mentettem a módosítás előtt.
Oké akkor a részeket felcsrélem.
Megnézem mi sül ki belőle. Nagyon köszönöm a tippeket, majd ha lesz időm akkor mondom mi lett belőle.

[Keveqiah]

Ha lesz időm, majd újraírom.
A style-nak megfelelő elérési utat adtál meg?

Egyébként a keditor.js-ben vágd ki és illeszd feljebb a style részt.

Kód: Javascript

1.         if(load=='load: string')
2.         {
3.         }
4.         if(load=='load: file')
5.         {
6.         }
7.         if(style!='')
8.         {
9.             this.myeditor.open;
10.             this.myeditor.write('<link rel="stylesheet" type="text/css" href="style.css" />');
11.             this.myeditor.close();
12.         }
13.  

helyett

Kód: Javascript

1.         if(style!='')
2.         {
3.             this.myeditor.open;
4.             this.myeditor.write('<link rel="stylesheet" type="text/css" href="style.css" />');
5.             this.myeditor.close();
6.         }
7.         if(load=='load: string')
8.         {
9.         }
10.         if(load=='load: file')
11.         {
12.         }
13.  

és a keditor.php-ben a

Kód: PHP

1.         public function InsertString($String, $highlight)
2.         {
3.                 $this->LoadData = "string";
4.                 $this->InsertStr = htmlspecialchars($String, ENT_QUOTES);
5.  
6.                 echo "<input type=\"hidden\" value=\"".$this->InsertStr."\" id=\"LoadData\" />";
7.         }
8.  

metódusnál töröld ki a $higlight-et és a meghívásnál is hagy el a 2. paramétert.
a szürkés hátteret a sample.php melletti style-ből veszi.

[tbence]

Hát egyre szomorúbb leszek.
És most nézem, hogy a vuvv, az enter lenyomásánál nem <br> el oldja meg a sortörést, hanem divekkel.
Ami azért is rossz, mert nekem az kéne hogy <br> -ekkel oldja meg, és azért is lenne jó, mert a GiveMe() fgv, is a <br> eket alakítaná, ha lenne <br> a szövegben, de nincse, ezért nem alakítja ezért az nl2br() nm megy rendesen, ezért néhol a szöveg egybefolyik.

Mostmár télleg kritikus vagyok.

[tbence]

Na akkor ostantól tényleg kritikus vagyok! xD
Azzal a betöltési módszerrel ezek a bajok akadtak, amit te írtál hozzá:
- vagy szöveget illesztek bele, vagy css-t de a 2 eggyüt nem megy.
- ha a css-t választom, akkor órákig tart, mire bejön a keditor, és nem valószínű hogy azért, mert olyan lassan hozná be az oldalt.
- és amit pláne nem értek, hogy a css kódnak nem megfelelően hozza be a framet. tehát pl az én css fileom szerint a háttér fehér kellene legyen, ezzel ellentétben valami sötét szürke szerű volt.
Vannak ilyen furcsaságok benne. Na már most én ezt a probléma sort megpróbáltam egy egyéni megoldással áthidalni, ami részben jó lehetne.
még pedig így:
a szöveg elé, amit be akarok illeszteni hozzáfűzöm a css sorokat a <style> tagek között. és ezt illesztem be a frame be. na már most ez így megy is és jól formáz. egészen addíg jó is lenne, amíg mondjuk visszanem törlök szöveget az elejéig, mert akkor kitörli az ott szemmel nem látható stílus beállításokat is, és onnéttól nem megy.
Mit tanácsoltok, hogyan oldjam meg hogy a frameben a saját css -em szerint legyen az előnézet, de a szöveget is be tudjam tölteni a mezőbe, az oldallal együtt?
Vagy hogyan oldjam meg, hogy a <style>  tages részt ne tudja kitörölni aki használja?
Előre is köszönöm az ötleteket.

[tbence]

Nagyon köszönöm !!! Ha még találok rajta kritizálni valót belőlem kritikus lesz, a kEditorból, meg 2.0

[Keveqiah]

Kicsit módosítgattam, bővítgettem rajta.
Amiket eddig tud. (Wysiwyg)

Kód: PHP

1.  include_once("keditor/keditor.php");
2.  $form_1 = new kEditor();
3.  
4.  $form_1->UseDitor("advanced", "valami", 600, 400);
5.  
6.  //$form_1->OpenFile("config.php");  //Fájl betöltése
7.  //$form_1->InsertString($valami); // String, változó betöltése
8.  //$form_1->ChangeStyle("style.css");  // stíluslap betöltése
9.  
10.  //$form_1->AddSmileysPack("uj/"); //Új hangulatjel Csomag
11.  //$form_1->AddSmileys(array(":new:" => "uj/teeth.gif")); // Új hangulatjel, név, elérés
12.  //$form_1->UseSmileys(true); //Hangulatjel  Engedélyezés
13.  
14.  //$form_1->enableAutoEmail(true); //Automatikus E-mail felismerés
15.  //$form_1->enableAutoURL(true); //Automatikus URL felismerés
16.  
17.  //$form_1->CustomColor(array("FireBrick" => "#B22222")); //Egyedi szín definiálása
18.  
19.  //$form_1->disable("bold"); //Gomb Letiltása (többet is lehet)
20.  

(tudom, hogy sokminden át lehetne alakítani, de egyenlőre ennyire van időm. Toldozgatni, foltozgatni)

v1.3
[ A vendégek nem tekinthetik meg a csatolmányokat ]

(A dokumentáció még nincs bővítve)

[tbence]

Sziasztok!
És azt hogyan tudnám megoldani, hogy a frameben Wysi módban egy bizonyos CSS file szerint mutassa az előnézetet?
Tehát ha pl van egy css fileom, amiben az van hogy a blockquote html tagok közt lévő elemek balról 10px -el legyenek paddingelve, és 2 px piros szegélyük legyen baloldalt, akkor a frameben lévő blockquote elemk is ilyenek legyenek.
Valami olyasmi kéne, hogy meglehessen adni neki egy fálj nevet, amit meghív hogy a szerint mutassa az előnézetet.
Ha ebben tudna segíteni valaki annak örülnék. Köszönöm!
(Remélem senkit nem őrjítek meg a mai sokadik kérdésemmel.

[tbence]

Köszönöm. Megoldottam, ob_start() nem is kellett. csak annyi volt, hogy a nem így csinálom:
print $re_msg->msg_form(); hanem:
hanem $re_msg->msg_form(); , és nem úgy néz ki az msg_form() hogy a végén visszatér egy változóval, hanem hogy egyből kiírja a dolgokat.

[Rimelek]

Ezért lenne jobb, ha az a metódus visszaadna értéket és nem kiírna. De addig is:

Kód: PHP

1. ob_start();
2. print "...";
3. $msg_area->editorArea();
4. print "...";
5. $form = ob_get_clean();

[tbence]

Sziasztok!
Valaki tudna segíteni abban hogy hgoyan illesszem be egy változóba a keditort?
Tehát most így próbáltam:

Kód: PHP

1. $form = "...".$msg_area->editorArea()."...";
2.  

De ennek kimenete az lesz, hogy kirakja a keditort legfelülre, és csak utána a többit, ami itt a ... .
hogyan oldjam meg hogy úgy illessze be, hogy a kimenete az is legyen a form kiiratásakor, amit összeállítottam?

[tbence]

Megnéztem, ott van elméletileg minden, de azt nem értem hogy miért nem működik.
Ez van benne:

Kód: HTML

1. <div class="editor"  style="width: 500px; "><div class="toolbar" ><img class="button" src="keditor/images/text_bold.png" id="Bold"
2.  
3.                                                            title="Félkövér" onClick="wisyAdd('Bold', 'szoveg');" /><img class="button" src="keditor/images/text_italic.png" id="Italic"
4.  
5.                                                                           title="Dőlt" onClick="wisyAdd('Italic', 'szoveg');" /><img class="button" src="keditor/images/text_underline.png" id="Underline"
6.  
7.                                                                                  title="Aláhúzott" onClick="wisyAdd('Underline', 'szoveg');" /> <img class="button" src="keditor/images/text_align_left.png" id="Left"
8.  
9.                                                                         title="Balra igazított" onClick="wisyAdd('JustifyLeft', 'szoveg');" /><img class="button" src="keditor/images/text_align_right.png" id="Right"
10.  
11.                                                                          title="Jobbra igazított" onClick="wisyAdd('JustifyRight', 'szoveg');" /><img class="button" src="keditor/images/text_align_center.png" id="Center"
12.  
13.                                                                          title="Középre igazított" onClick="wisyAdd('JustifyCenter', 'szoveg');" /> <img class="button" src="keditor/images/text_list_bullets.png" id="List"
14.  
15.                                                                         title="Felsorolás" onClick="wisyAdd('InsertUnorderedList', 'szoveg');" /><img class="button" src="keditor/images/link.png" id="Url"
16.  
17.                                                                                  title="Link" onClick="wisyURL('szoveg');" /><img class="button" src="keditor/images/link_delete.png" id="unUrl"
18.  
19.                                                                          title="Link Törlés" onClick="wisyAdd('Unlink', 'szoveg');" /><img class="button" src="keditor/images/image.png" id="Image"
20.  
21.                                                                          title="Kép" onClick="wisyImage('szoveg');" /><img class="button" src="keditor/images/code.png" id="Image"
22.  
23.                                                                          title="Kód" onClick="wisyTag('FormatBlock', 'szoveg', '<pre>');" /><img class="button" src="keditor/images/undo.png" name="undo"
24.  
25.                                                                         title="Visszavonás" onClick="wisyAdd('Undo', 'szoveg');" /><br style="clear: both;"/>
26.  
27.                                                                            <select class="select" onBlur="this.options[0].selected=true" onchange="wisyTag('FormatBlock', 'szoveg', this.value);" >
28.  
29.                                                                                 <option>Címsor</option>
30.  
31.                                                                                 <option value="<h1>">Címsor 1</option>
32.  
33.                                                                                 <option value="<h2>">Címsor 2</option>
34.  
35.                                                                                 <option value="<h3>">Címsor 3</option>
36.  
37.                                                                                 <option value="<h4>">Címsor 4</option>
38.  
39.                                                                                 <option value="<h5>">Címsor 5</option>
40.  
41.                                                                                 <option value="<h6>">Címsor 6</option>
42.  
43.                                                                            </select><select class="select" onBlur="this.options[0].selected=true" onchange="wisyTag('FontSize', 'szoveg', this.value)" >
44.  
45.                                                                          <option>Betűméret</option>
46.  
47.                                                                          <option value="1">8pt</option>
48.  
49.                                                                          <option value="2">10pt</option>
50.  
51.                                                                          <option value="3">12pt</option>
52.  
53.                                                                          <option value="4">14pt</option>
54.  
55.                                                                          <option value="5">18pt</option>
56.  
57.                                                                          <option value="6">24pt</option>
58.  
59.                                                                          <option value="7">32pt</option>
60.  
61.                                                                         </select><select class="select" onBlur="this.options[0].selected=true" onchange="wisyTag('FontName', 'szoveg', this.value)">
62.  
63.                                                                           <option>Betűtípus</option>
64.  
65.                                                                           <option value="Times New Roman" style="font-family: Times New Roman;">Times New Roman</option>
66.  
67.                                                                           <option value="Roman" style="font-family: Roman;">Roman</option>
68.  
69.                                                                           <option value="Garamond" style="font-family: Garamond;">Garamond</option>
70.  
71.                                                                           <option value="Palatino" style="font-family: Palatino;">Palatino</option>
72.  
73.                                                                           <option value="Helvetica" style="font-family: Helvetica;">Helvetica</option>
74.  
75.                                                                           <option value="Impact" style="font-family: Impact;">Impact</option>
76.  
77.                                                                           <option value="Script" style="font-family: Script;">Script</option>
78.  
79.                                                                           <option value="Modern" style="font-family: Modern;">Modern</option>
80.  
81.                                                                           <option value="Courier" style="font-family: Courier;">Courier</option>
82.  
83.                                                                           <option value="Calibri" style="font-family: Calibri;">Calibri</option>
84.  
85.                                                                           <option value="Verdana" style="font-family: Verdana;">Verdana</option>
86.  
87.                                                                           <option value="Georgia" style="font-family: Georgia;">Georgia</option>
88.  
89.                                                                          </select><img class="button" src="keditor/images/color-palette.png" id="Color"
90.  
91.                                                                          title="Betűszín" onclick="showList('HTMLColors', event.clientX, event.clientY);" />
92.  
93.                                                                          <br style="clear: both;"><div class="emode" style="background: url('keditor/images/advanced.png');"></div></div><iframe onload="var wysi_szoveg = new EditorArea('szoveg');"
94.  
95.                                                 id="eszoveg"
96.  
97.                                                 width="500"
98.  
99.                                                 height="400"
100.  
101.                                                 name="eszoveg"
102.  
103.                                                 frameborder="0"
104.  
105.                                                 class="window" ></iframe>
106.  
107.                                           <input type="hidden" id="szoveg" name="szoveg" /><br style='clear: both;'></div><fieldset id="HTMLColors">
108.  
109.                                         <legend style='font-size: 12px; font-weight: bold;'>Betűszín </legend><a href="javascript:void(0);" title="black - #000000" class="colors" style="background-color: #000000;" onClick="wisyColor('szoveg', '#000000');" ></a><a href="javascript:void(0);" title="navy - #000080" class="colors" style="background-color: #000080;" onClick="wisyColor('szoveg', '#000080');" ></a><a href="javascript:void(0);" title="blue - #0000FF" class="colors" style="background-color: #0000FF;" onClick="wisyColor('szoveg', '#0000FF');" ></a><a href="javascript:void(0);" title="green - #008000" class="colors" style="background-color: #008000;" onClick="wisyColor('szoveg', '#008000');" ></a><a href="javascript:void(0);" title="teal - #008080" class="colors" style="background-color: #008080;" onClick="wisyColor('szoveg', '#008080');" ></a><a href="javascript:void(0);" title="lime - #00FF00" class="colors" style="background-color: #00FF00;" onClick="wisyColor('szoveg', '#00FF00');" ></a><a href="javascript:void(0);" title="aqua - #00FFFF" class="colors" style="background-color: #00FFFF;" onClick="wisyColor('szoveg', '#00FFFF');" ></a><a href="javascript:void(0);" title="maroon - #800000" class="colors" style="background-color: #800000;" onClick="wisyColor('szoveg', '#800000');" ></a><a href="javascript:void(0);" title="purple - #800080" class="colors" style="background-color: #800080;" onClick="wisyColor('szoveg', '#800080');" ></a><a href="javascript:void(0);" title="olive - #808000" class="colors" style="background-color: #808000;" onClick="wisyColor('szoveg', '#808000');" ></a><a href="javascript:void(0);" title="gray - #808080" class="colors" style="background-color: #808080;" onClick="wisyColor('szoveg', '#808080');" ></a><a href="javascript:void(0);" title="silver - #C0C0C0" class="colors" style="background-color: #C0C0C0;" onClick="wisyColor('szoveg', '#C0C0C0');" ></a><a href="javascript:void(0);" title="red - #FF0000" class="colors" style="background-color: #FF0000;" onClick="wisyColor('szoveg', '#FF0000');" ></a><a href="javascript:void(0);" title="fuchsia - #FF00FF" class="colors" style="background-color: #FF00FF;" onClick="wisyColor('szoveg', '#FF00FF');" ></a><a href="javascript:void(0);" title="yellow - #FFFF00" class="colors" style="background-color: #FFFF00;" onClick="wisyColor('szoveg', '#FFFF00');" ></a><a href="javascript:void(0);" title="white - #FFFFFF" class="colors" style="background-color: #FFFFFF;" onClick="wisyColor('szoveg', '#FFFFFF');" ></a></fieldset>
110.  

De most akkor mit kéne csinálnom ha ott van de nem megy?
Nem igazán értettem ezt amit írtál, az oké hogy a bordere miatt nem látszik, de  a kattintásokat, meg semmit sem észlel, és nem reagál semmire.
Elküldve:: 2010. Február 01.  18:53:23Probléma megoldca, nem tudom mi baja volt, de most megy, csak előtte újra felülírtam az eredeti fájlokkal.
De azért nagyon köszönöm a segítséget! És azt is hogy megírtad! Végre hmár úgy is átdesignolom az oldalamat, lesz egy hozzáillő szép szerkesztő is!
Lenne még egy kérdésem, hogyan tudok alapból tartalmat adni neki? tehát hogyan tudom megoldani, hogy amikor bejön az oldal, már legyen benne xy szöveg? előre is köszi! (Ha lehet akkor a wisy részénél szeretném megoldani.)

[Keveqiah]

Generálj egy forrást a böngészőben és nézd meg, van e valami abban a td-ben.. Elviekben ott kéne lennie. A wysiwyg.php-ben van egy EditorWindow metódus, amit a keditor.php-ben hívok meg. A gombsor után. Pontosabban a keditor.php editorArea részében.
Lehet csak nem látszik, mivel a wysiwyg szerkesztő ifram-es és a frameborder 0-a..

Kód: PHP

1. /* -- EditorWindow - A szerkesztő ablak ---------------------------------------/
2. ------------------------------------------------------------------------------*/
3. $this->EditorWindow = "<iframe onload=\"var wysi_".$this->EditorID." = new EditorArea('".$this->EditorID."');\"
4.                         id=\"e".$this->EditorID."\"
5.                         width=\"".$this->Width."\"
6.                         height=\"".$this->Height."\"
7.                         name=\"e".$this->EditorID."\"
8.                         frameborder=\"0\"
9.                         class=\"window\" ></iframe>
10.                 <input type=\"hidden\" id=\"".$this->EditorID."\" name=\"".$this->EditorID."\" />";
11.  

Kód: CSS

1. .window
2. {
3.         border-top: solid 2px #bfbdbe;
4.         background-color: #fff;
5. }
6.  

[tbence]

Lehet egy kérdésem?
Az a problémám, ami az alábbi képen lesz látható, hogy nincsen semmilyen mező amibe lehetne írnom.
és elméletileg minden jól van belinkelve, itt a kód, ahogyn beillesztettem:

Kód: PHP

1. <?
2.          include_once("keditor/keditor.php");
3.          $form_1 = new kEditor("wysiwyg");
4.      $form_1->UseDitor("advanced", "szoveg", 500, 400);
5. ?>
6.  
7.  
8. <form name="new" action="<?= $_SERVER['PHP_SELF']; ?>" method="POST">
9. <table align="center" valign="top" width="100%" border="1" cellpadding="0" cellspacing="0" style="text-align: center;">
10.     <tr>
11.         <td>
12.         <input type="text" name="page" value="">
13.         </td>
14.         <td>
15.         <input type="text" name="cim" value="">
16.         </td>
17.     </tr><tr>
18.         <td colspan="2">
19.         <?php $form_1->editorArea();  ?>
20.         </td>
21.     </tr>
22. </table>
23. </form>
24.  
25.  

Tudnál segíteni?

És a kép:

[Suttogó]

Tehát ha a wisi-vel nincs engedélyezve akkor nem tudok bevinni egy <span> tagot, még elküldés előtt sem? Tehát, ha a JS nincs tiltva, akkor a wysiwyg szerkesztő nem mutathat olyan képet, amit a PHP kiszűr? Akkor sem ha belekopizok mondjuk egy wordből egy olyan tagot, ami nincs benne?

Pl: belekopizok wördből egy vastag szöveget. Akkor ha a wyswigben nincs engedélyezve a vastag szöveg, akkor sima szöveg lesz belőle?

[Keveqiah]

A wysi szerkesztő csak az engedélyezett tag-okat viszi be, php-vel még a kiiratás előtt szűrök minden html tagot és ami nincs engedélyezve, vagy nem megfelelő forma, az átkódolásra kerül és kiiratódik. Így nem okoz problémát. Feldolgozásra már a formázott kód használható.

A gombok, funkciók pedig egyenként tilthatóak. Most készül a Dokumentációja, utánna még tesztelem kicsit, aztán pár embernek PM-ben elküldeném tesztelésre és csak utána publikálnám.

De próbáld ki a lentebbi linkeken..

[Suttogó]

A nem használható kódokat PHPval szűröd? Mert csak a JS részét néztem a programnak...

Egyébként én felhasználnám a programodat, csak nem nagyon értek a jshez.
Igazából arra gondoltam, hogy mivel ctrl+c ctrl+v bevihet a mezőbe olyan formázást, amit nem kellene, ezért onkeyup/onkeydown esetén már a JS-sel megszűrném a tartalmat, hogy tényleg azt mutassa, amit fog.

Meg néhány funkciót le szeretnék tiltani. Mint pl a szövegszínezés...

[Keveqiah]

Éppen meglehetne oldani, hogy BBC legyen a kimenetene, mivel csak a html tagokat kell visszaalakítani code-tagokra. De ennek nem sok értelmét látom. Tárolni felesleges bbcodosan, mivel akkor minden megjelenítésnél vissza kéne alakítani. A wysi editornál pedig csak azok a html tagok vannak engedélyezve, amiket gombon lehet nyomogatni. A többit kiszűröm ill átalakítom.
Komolyabb JS-t csak a Wysi használ, de a BBcodeos formájában csak a beszúrás JS, a többi php regexp.

[Suttogó]

Egyébként ez miért PHP script?

[Suttogó]

Nagyon tetszik, de pont az amiért vártam rá nem lett benne.
Nekem egy BBC kódos WYSIWYG kellene... Tehát BBC kód a kimenete, de a szerkesztés alatt is látszik hogy hogy néz ki.
Kérdés: Azt sehol sem látom hogy hogy oldod meg hogy az iFramebe beíródjanak a karakterek. Elárulod?

Utána néztem így nem lehet megcsinálni a BBC-t :-(

[tbence]

Nekem nagyon tetszik! Szép és esztétikus Meg nem olyan zsúfolt csicsás cucc mint pl egy Fckeditor, ami ráadásul nem megy rendesen

[Keveqiah]

Aloha..   :respect:

Gondoltam megér egy témát.. Lassan, de biztosan haladgatok a kis editorommal. Bár már túl bővítettem, mint amit saját részre szerettem volna, de ez van.

A 2 változat Teszt felületét  linkelem most be.
http://og-killers.extra.hu/editor/bbcode/
http://og-killers.extra.hu/editor/wysiwyg/

Van még mit javítgatni rajta, de egyre kevesebb  a Bug. (Természetesen nem is mindent lehet 100%-ra megírni. Ezért lesz majd egy Manual is hozzá.)

Ami eddig megvan: (extra funkciók)
Szerkesztő felület alapbeállításokkal, Egyéni beállításokkal
Automatikus URL és E-mail felismerés
Hangulatjelek (alapcsomag, de bővíthető darabonként vagy cserélhető saját csomagra)
Betűszín (alap ill lehetőség van egyéni színek definiálására is)

Elméletileg
Wysiwyg Kompatibilitás

Firefox   3.0.1            Yes
Google Chrome 2.0.156.1      Yes
Internet Explorer 7.0      Yes
Maxthon 2.1.1            Yes   (részben)
Opera 10.00                Yes   (részben, mivel a JS event kezelése még nincs befejezve az Opera 10-nek)
Safari 4 Public Beta      Yes

Közel 670 soros egyenlőre ez a kis script