Wysiwyg Editor Nasıl Yazılır?
-
what you see it what you get, yani gördüğünü alırsın yanii ?? Yani edki bbcode olan [b]bu kalın[/b] değilde; tahribatın editörü gibi direkt kalınlaştıorır.
Neyse ;
Arama, resim , link konusunda ihtiyacım olacak buna. Güzel bi döküman var mı Türkçe ? İngilizce bakıcamda muhtemelen karmaşık gelicek.
-
İleri düzey JavaScript şart.
-
http://stackoverflow.com/questions/5281438/how-to-create-a-text-editor-in-jquery
şurda güzel örnek vermiş. Javascriptten korkum yokta, şu ilk mantığı halletsem.
edit: buldim oni !!! contenteditable'mış aradığım şey oh be.
edit 2:
bu işleri micro-soft'tan bakacağım aklıma gelmezdi.
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/contentEditableEX2.htm
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/editRegions.htm
asıl sayfa : http://msdn.microsoft.com/en-us/library/ms537837(v=vs.85).aspx
-
bu iş düşündüğümden biraz daha karışıkmış :D stackoverflow'dan girdim, mozilla developer sitesinden çıktım, whatwg listlerinden girdim, oppera developerdan çıktım. KArabatak gibi girip çıkıyorum.
Ben bi up'lıyayımda, şöyle güzel örneklendirmeli irşey varsa bakalım. Bir kaç gün bakim şuna. Sonra döküman yazıcam tbt'ye bir tane. Türkçe döküman yok bu konuda. Yada ben bulamıyorum.
edit:
sıkıntım contentEditable = True şekline getiriyorum. Fakat div içinde her nesne eklendiğinde divler açılıyor. Javascript ile, php ile temizlerim onları sıkıntı yok ama böyle olmamalı.
Yani textarea üstünden <br> demeden \n koyması falan gerek. Div eklememsi gerek sanıyorum.
edit üstüne edit :
http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-1/
opera çözümünü söylüyor.
-
zumsuk bunu yazdı:
-----------------------------bu iş düşündüğümden biraz daha karışıkmış :D stackoverflow'dan girdim, mozilla developer sitesinden çıktım, whatwg listlerinden girdim, oppera developerdan çıktım. KArabatak gibi girip çıkıyorum.
Ben bi up'lıyayımda, şöyle güzel örneklendirmeli irşey varsa bakalım. Bir kaç gün bakim şuna. Sonra döküman yazıcam tbt'ye bir tane. Türkçe döküman yok bu konuda. Yada ben bulamıyorum.
edit:
sıkıntım contentEditable = True şekline getiriyorum. Fakat div içinde her nesne eklendiğinde divler açılıyor. Javascript ile, php ile temizlerim onları sıkıntı yok ama böyle olmamalı.
Yani textarea üstünden
demeden \n koyması falan gerek. Div eklememsi gerek sanıyorum.edit üstüne edit :
http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-1/
opera çözümünü söylüyor.
-----------------------------dostum aynen çöz meseleyide özgün bir makale yaz, benim başım bir rahatlasa as3 dökümanları yazacamda işte amk bir rahatlayamadıkki.
-
şu varda bu kadar kolay olamaz abicim. Kafayı yiyicem. Ben asp ile dagon portla kodluyordum 5-6 sene önce. Göbeğim çatlamıştı. Editör yapıcam diye. Bu bu kadar kolay olamaz :S
noluyor ya.. Link verme ve resim ekleme birde ortalama yaptımı tamamdır abi. Benim işim biter.
----
<meta charset="utf-8">
<script type="text/javascript">
function aa() {
kod = document.getElementById('source').innerHTML;
document.getElementById('display').textContent = kod;
return kod;
}
</script>
<div onclick="aa();">
<button onclick="document.execCommand('bold',false,null);">Bold</button>
<button onclick="document.execCommand('italic',false,null);">Italic</button>
<div contenteditable id="source" onkeyup="JavaScript:aa();">
Bireşeyler yaz ve düzenle.</div>
</div>
Çıktısı<p>
<textarea class="example-code" id="display"></textarea>
-
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla#Executing_Commands
yeni konu açmama gerek yok. Adamlar gayet güzel açıklamış :)
alt kısımlarda görebilirsiniz kodları. C/p ile direkt editor.
tabi bir sürü javascript ve kullandığınız dilde, kontrol gerek.
<img src="javascript:alert('xss');">
gibi olasılıklara karşı.
