+  PHP Studio Fórum
|-+  PHP» Készített scripteitek» kEditor (Wysiwyg and BBcode)
Felhasználónév : Jegyezzen meg
Jelszó :
Oldalak: [1] 2 3  Összes   Le
  Téma elküldése    Nyomtatás  
Szerző Téma: kEditor (Wysiwyg and BBcode)  (Megtekintve 1375 alkalommal)
0 Felhasználó és 1 vendég van a témában
2010. Július 25. 21:20:52 #33
Keveqiah
Külső Tag
Hiperaktív fórumozó
**

Karma: +67/-2
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 2832


Kisb


WWW
Naplózva
Re: kEditor (Wysiwyg and BBcode)

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
GeSHi (javascript):
// Gombsor méretének igazítása
setTimeout(function()
{
MyTextarea = document.getElementById(textObj);
MyEditor = document.getElementById('My_'+textObj);
MyEditor.style.width = parseInt(MyTextarea.style.width)+2+'px';
MyTextarea.style.border='thin solid #c4c2b2';
MyTextarea.style.width = MyEditor.style.width;
}, 200);
 

Csere erre
GeSHi (javascript):
// Gombsor méretének igazítása
setTimeout(function()
{
MyTextarea = document.getElementById(textObj);
MyEditor = document.getElementById('My_'+textObj);
 
if(MyTextarea.style.width.search("/%/i") < 0)
MyEditor.style.width = MyTextarea.style.width;
else
MyEditor.style.width = parseInt(MyTextarea.style.width)+2+'px';
 
MyTextarea.style.border='thin solid #c4c2b2';
MyTextarea.style.width = MyEditor.style.width;
}, 200);
 


"Gonosz vagyok. Ez ugyebár nem hit dolga."
"Egy ember halála tragédia, ezrek halála statisztika."
2010. Június 29. 09:21:41 #32
Keveqiah
Külső Tag
Hiperaktív fórumozó
**

Karma: +67/-2
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 2832


Kisb


WWW
Naplózva
Re: kEditor (Wysiwyg and BBcode)

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.

* k_bbeditor_v1.02.zip (37.85 KB - letöltve 8 alkalommal.)
« Utoljára szerkesztve: 2010. Június 29. 09:26:50 írta Keveqiah »


"Gonosz vagyok. Ez ugyebár nem hit dolga."
"Egy ember halála tragédia, ezrek halála statisztika."
2010. Június 22. 18:51:55 #31
Keveqiah
Külső Tag
Hiperaktív fórumozó
**

Karma: +67/-2
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 2832


Kisb


WWW
Naplózva
Re: kEditor (!Wysiwyg and BBcode)

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


"Gonosz vagyok. Ez ugyebár nem hit dolga."
"Egy ember halála tragédia, ezrek halála statisztika."
2010. Június 22. 16:14:19 #30
Keveqiah
Külső Tag
Hiperaktív fórumozó
**

Karma: +67/-2
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 2832


Kisb


WWW
Naplózva
Re: kEditor (Wysiwyg and BBcode)

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
« Utoljára szerkesztve: 2010. Június 22. 16:36:54 írta Keveqiah »


"Gonosz vagyok. Ez ugyebár nem hit dolga."
"Egy ember halála tragédia, ezrek halála statisztika."
2010. Június 21. 21:06:50 #29
Keveqiah
Külső Tag
Hiperaktív fórumozó
**

Karma: +67/-2
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 2832


Kisb


WWW
Naplózva
Re: kEditor (Wysiwyg and BBcode)

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

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.
GeSHi (html4strict):
<!-- JS -->
<script type="text/javascript" src="eleresi_ut/bbeditor/bbc_editor.js"></script>
<script type="text/javascript">
Config
(
dirRoot = "/", /* erlérési út a gyökérkönyvtártól számítva */
defStyle = "style.css", /* alapértelemezett css */
Mode['custom'] = ['bold', 'italic', 'underline', 'url', 'image'] /* egyéni gombsor definiálás */
)
</script>
 

2. lépés: html form
GeSHi (html4strict):
<form method="post" action="" target="_blank">
  <script type="text/javascript">LoadToolbar('example_1', 'custom'); </script>
 <textarea name="example_1" id="example_1" style="width: 470px; height: 80px;" wrap="off"></textarea>
 <input type="submit" name="send" value="Send" />
</form>
 
LoadToolbar paraméterei: textarea id-je, gombsor neve
 

3. lépés: feldolgozás
GeSHi (php):
if(isset($_POST['send']))
{
  include('bbeditor/bbc_editor.php'); // A szerkesztő betöltése
  $bbc_example = new BBCeditor('example_1'); // paraméterként a feldolgozni kívánt mező id-je
  // ha több textareaval dolgozunk, több példányt is létrehozhatunk belőle
  // $bbc_example_2 = new BBCeditor('example_2'); // paraméterként a feldolgozni kívánt mező id-je
 
  $html = $bbc_example->GiveCode(); //$html = $bbc_example_2->GiveCode();
  // Visszafejtés
  $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      
   értékadás történhet akár adatbázisból is.
}
 

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


* kev_bbc-editor.zip (29.88 KB - letöltve 6 alkalommal.)


"Gonosz vagyok. Ez ugyebár nem hit dolga."
"Egy ember halála tragédia, ezrek halála statisztika."
2010. Május 26. 16:36:34 #28
tbence
Szerkesztő
Hiperaktív fórumozó
****

Karma: +23/-21
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 1665


TBence


WWW
Naplózva
Re: kEditor (Wysiwyg and BBcode)

Nem tudom hogy hogyan csináltam, de szerintem már nem is gogok rájönni. Sad
Viszont megoldottam magamnak, hogy manuálisan menjen.
Csináltam magamnak bele egy két plusz funkciót.  Cool 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. Smiley
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. Smiley
Szóval tök jó lett. Smiley
Ha érdekel valakit, akkor írjon ide, és akkor csinálok egy "demó"-t neki, hogy milyen lett.  Cool




2010. Május 20. 16:55:18 #27
tbence
Szerkesztő
Hiperaktív fórumozó
****

Karma: +23/-21
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 1665


TBence


WWW
Naplózva
Re: kEditor (Wysiwyg and BBcode)

Nézelődtem, de nem találok semmit.  Undecided
É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


2010. Május 19. 15:54:44 #26
tbence
Szerkesztő
Hiperaktív fórumozó
****

Karma: +23/-21
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 1665


TBence


WWW
Naplózva
Re: kEditor (Wysiwyg and BBcode)

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.


2010. Május 18. 23:21:29 #25
Keveqiah
Külső Tag
Hiperaktív fórumozó
**

Karma: +67/-2
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 2832


Kisb


WWW
Naplózva
Re: kEditor (Wysiwyg and BBcode)

GeSHi (javascript):
var sSelected=*****r.getItem(5).getAttribute("selectedIndex"));
document.execCommand("FormatBlock", false, sSelected.text);
 
 

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


"Gonosz vagyok. Ez ugyebár nem hit dolga."
"Egy ember halála tragédia, ezrek halála statisztika."
2010. Május 18. 21:21:55 #24
tbence
Szerkesztő
Hiperaktív fórumozó
****

Karma: +23/-21
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 1665


TBence


WWW
Naplózva
Re: kEditor (Wysiwyg and BBcode)

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


2010. Május 18. 21:13:37 #23
Keveqiah
Külső Tag
Hiperaktív fórumozó
**

Karma: +67/-2
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 2832


Kisb


WWW
Naplózva
Re: kEditor (Wysiwyg and BBcode)

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)


"Gonosz vagyok. Ez ugyebár nem hit dolga."
"Egy ember halála tragédia, ezrek halála statisztika."
2010. Május 18. 19:31:41 #22
tbence
Szerkesztő
Hiperaktív fórumozó
****

Karma: +23/-21
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 1665


TBence


WWW
Naplózva
Re: kEditor (Wysiwyg and BBcode)

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


2010. Február 13. 14:39:12 #21
tbence
Szerkesztő
Hiperaktív fórumozó
****

Karma: +23/-21
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 1665


TBence


WWW
Naplózva
Re: kEditor (Wysiwyg and BBcode)

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ó. Sad
2 perc, mire betölt az oldal, és nem a megadott css szerint mutatja az előnézetet. Sad


2010. Február 10. 17:26:39 #20
tbence
Szerkesztő
Hiperaktív fórumozó
****

Karma: +23/-21
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 1665


TBence


WWW
Naplózva
Re: kEditor (Wysiwyg and BBcode)

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. Smiley Most nem csinálja. azért annak örülök, hogy mentettem a módosítás előtt. Smiley
Oké akkor a részeket felcsrélem.
Megnézem mi sül ki belőle. Smiley Nagyon köszönöm a tippeket, majd ha lesz időm akkor mondom mi lett belőle. Smiley


2010. Február 09. 23:22:48 #19
Keveqiah
Külső Tag
Hiperaktív fórumozó
**

Karma: +67/-2
Nem elérhető Nem elérhető

Nem: Férfi
Hozzászólások: 2832


Kisb


WWW
Naplózva
Re: kEditor (Wysiwyg and BBcode)

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.
GeSHi (javascript):
if(load=='load: string')
{
}
if(load=='load: file')
{
}
if(style!='')
{
   this.myeditor.open;
   this.myeditor.write('<link rel="stylesheet" type="text/css" href="style.css" />');
   this.myeditor.close();
}
 
helyett
GeSHi (javascript):
if(style!='')
{
   this.myeditor.open;
   this.myeditor.write('<link rel="stylesheet" type="text/css" href="style.css" />');
   this.myeditor.close();
}
if(load=='load: string')
{
}
if(load=='load: file')
{
}
 

és a keditor.php-ben a
GeSHi (php):
public function InsertString($String, $highlight)
{
$this->LoadData = "string";
$this->InsertStr = htmlspecialchars($String, ENT_QUOTES);
 
echo "<input type=\"hidden\" value=\"".$this->InsertStr."\" id=\"LoadData\" />";
}
 
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.
« Utoljára szerkesztve: 2010. Február 09. 23:29:54 írta Keveqiah »


"Gonosz vagyok. Ez ugyebár nem hit dolga."
"Egy ember halála tragédia, ezrek halála statisztika."
Oldalak: [1] 2 3  Összes   Fel
  Téma elküldése    Nyomtatás  
 
Ugrás:  

Harcolj a spam ellen!

Design by Daeron & RaToC.
Az oldal 0.264 másodperc alatt készült el 24 lekéréssel.

A Google utoljára látogatta ezt az oldalt: Tegnap - 10:08:28