kEditor (Wysiwyg and BBcode)

[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.