Yeni Kayıt
Konudaki Resimler
|
Hızlı 
Bildirim
Textarea seçilen yazıya özellik vermek
Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
2 Misafir (1 Mobil) - 1 Masaüstü, 
1 Mobil
1 Mobil
Giriş
Mesaj
-
-
Konu dışında açılan konuları görmüyorsun galiba... Onların yanında bu konular ilmî makale kalır. İstediğin gibi işgal edebilirsin. 
Öncelikle belirteyim ki html'de kalın yapma tag'ı <i> değildir. <i> tag'ı ile italik yapılır. Kalın yapma tag'ı <b> veya <strong> dur.
Şimdi gelelim asıl mevzuya bu istediğin şey için çok gelişmiş editörler var. Amerika'yı yeniden keşfetmeye gerek yok. WordPress, Joomla, Drupal gibi içerik yönetim sistemleri ve PHP script yazan bir çok kişi bu editörleri kullanıyor. Hem de öyle özellikleri var ki senin düşündüğünden çok çok daha ileri özellikleri var. Bu editörleri en basit şeklinden en karmaşık şekline kadar kullanmak hatta özelleştirmek mümkün.
Bu editörlerden çok var ama en çok kullanılan iki editörü yazayım.
TinyMCE ->https://www.tinymce.com/
CKEditor ->https://ckeditor.com/
Bu linklere giderek çeşitli kullanımlarını görebilirsin. Ama ben CKEditor ile basit bir örnek vereyim. Kolay olsun diye CKEditor'ü CDN olarak ekledim.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
<style>
.icerik {
margin: 0 auto;
width: 50%;
}
</style>
</head>
<body>
<div class="icerik">
<h1>CKEditor</h1>
<textarea name="editor1"></textarea>
</div>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
Daha gelişmiş kullanımlar ve ayrıntılı bilgi için yukarıda verdiğim linklere bakın, kullanımları inceleyin. Editörü indirip kurun, denemeler yapın.
Size kolay gelsin.
-
quote:
Orijinalden alıntı: DoubleDragon
Konu dışında açılan konuları görmüyorsun galiba... Onların yanında bu konular ilmî makale kalır. İstediğin gibi işgal edebilirsin.
Öncelikle belirteyim ki html'de kalın yapma tag'ı <i> değildir. <i> tag'ı ile italik yapılır. Kalın yapma tag'ı <b> veya <strong> dur.
Şimdi gelelim asıl mevzuya bu istediğin şey için çok gelişmiş editörler var. Amerika'yı yeniden keşfetmeye gerek yok. WordPress, Joomla, Drupal gibi içerik yönetim sistemleri ve PHP script yazan bir çok kişi bu editörleri kullanıyor. Hem de öyle özellikleri var ki senin düşündüğünden çok çok daha ileri özellikleri var. Bu editörleri en basit şeklinden en karmaşık şekline kadar kullanmak hatta özelleştirmek mümkün.
Bu editörlerden çok var ama en çok kullanılan iki editörü yazayım.
TinyMCE ->https://www.tinymce.com/
CKEditor ->https://ckeditor.com/
Bu linklere giderek çeşitli kullanımlarını görebilirsin. Ama ben CKEditor ile basit bir örnek vereyim. Kolay olsun diye CKEditor'ü CDN olarak ekledim.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
<style>
.icerik {
margin: 0 auto;
width: 50%;
}
</style>
</head>
<body>
<div class="icerik">
<h1>CKEditor</h1>
<textarea name="editor1"></textarea>
</div>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
Daha gelişmiş kullanımlar ve ayrıntılı bilgi için yukarıda verdiğim linklere bakın, kullanımları inceleyin. Editörü indirip kurun, denemeler yapın.
Size kolay gelsin.
Merhaba,
çok teşekkür ederim. Diyelimki ben kodları hostinge attım bir sorun çıkmaz değil mi? Birde verdiğiniz kodda nasıl bir işlem yapıyor?
Yardımınıza ihtiyacım var.
< Bu ileti mobil sürüm kullanılarak atıldı >
-
webandyazilimprofesor
W
kullanıcısına yanıt
Bu plugin'ler JavaScript yazılmıştır. Kullandığınız hostingde JavaScript çalıştırmasında bir sorun yoksa bu da sorunsuz çalışır. JavaScript çalıştırmada sorun çıkaran hosting mi olur yiieeeaaa...
<script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
ifadesi ile CKEditor'ü sayfaya eklemiş.
<script>
CKEDITOR.replace( 'editor1' );
</script>
ifadesi ile de "editor1" isimli yerde (neresi orası?) bu plugini (editörü) kullanacağım demiş. Dikkat ettiysen editor1, textarea'da kullanılmış. Böylece textarea'ya editör eklemek istediğini belirtmiş oluyor. "Peki ne yapıyor, ne ediyor da textarea'ya ekliyor?" diyorsan onu ben de bilmiyorum. Anlayabiliyorsan ckeditor.js dosyasını inceleyip anlamaya çalış.
-
quote:
Orijinalden alıntı: DoubleDragon
Bu plugin'ler JavaScript yazılmıştır. Kullandığınız hostingde JavaScript çalıştırmasında bir sorun yoksa bu da sorunsuz çalışır. JavaScript çalıştırmada sorun çıkaran hosting mi olur yiieeeaaa...
<script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
ifadesi ile CKEditor'ü sayfaya eklemiş.
<script>
CKEDITOR.replace( 'editor1' );
</script>
ifadesi ile de "editor1" isimli yerde (neresi orası?) bu plugini (editörü) kullanacağım demiş. Dikkat ettiysen editor1, textarea'da kullanılmış. Böylece textarea'ya editör eklemek istediğini belirtmiş oluyor. "Peki ne yapıyor, ne ediyor da textarea'ya ekliyor?" diyorsan onu ben de bilmiyorum. Anlayabiliyorsan ckeditor.js dosyasını inceleyip anlamaya çalış.
Merhaba,
peki. Teşekkür ederim. Ben şimdi bu sayede textarea da istediğim özelliği verebilecek miyim? Umarım bunun hakkında internetde bilgi bulurum.
Yardımlarınız için çok teşekkür ederim.
İyi günler dilerim.
-
quote:
Orijinalden alıntı: DoubleDragon
Bu plugin'ler JavaScript yazılmıştır. Kullandığınız hostingde JavaScript çalıştırmasında bir sorun yoksa bu da sorunsuz çalışır. JavaScript çalıştırmada sorun çıkaran hosting mi olur yiieeeaaa...
<script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
ifadesi ile CKEditor'ü sayfaya eklemiş.
<script>
CKEDITOR.replace( 'editor1' );
</script>
ifadesi ile de "editor1" isimli yerde (neresi orası?) bu plugini (editörü) kullanacağım demiş. Dikkat ettiysen editor1, textarea'da kullanılmış. Böylece textarea'ya editör eklemek istediğini belirtmiş oluyor. "Peki ne yapıyor, ne ediyor da textarea'ya ekliyor?" diyorsan onu ben de bilmiyorum. Anlayabiliyorsan ckeditor.js dosyasını inceleyip anlamaya çalış.
Merhaba,
textareada özeelik ekleme ile ilgili bir örnek verebilir misiniz?
Google'da kurulumu özellikleri falan var.
Yardımınıza ihtiyacım var.
-
webandyazilimprofesor
W
kullanıcısına yanıt
Böyle konularda en iyi dokümanı kendi sitelerinde bulabilirsin. Görüyorum ki forumda bir şeyler yapmaya, öğrenmeye çalışıyorsun. Fakat her şeyden önce İngilizce'yi çok iyi öğrenmeye bak. Benim de en büyük eksikliğim İngilizce bilmemek.
Sorduğun şeyin nasıl yapıldığını bilmiyorum. CKEditor'ün sitesine gittim baktım. Çat pat İngilizce'mle anlamaya çalıştım. Anladığım kadarıyla basitten gelişmişe doğru Basic, Standart, Full olarak üç temel kullanıma göre ayırmış. Yetmemiş butonları özelleştirme imkanı da vermiş. Bunu da dokümanlarında göstermiş. Her bir konunun altında örnek kod da var.
Toolbar'da buton özelleştirme ile ilgili şu sayfaya bakalım: Custom Editor Toolbar
Bu sayfanın en altında "Get Sample Source Code" yazan yerin altındaki linke tıklayalım. İşte örnek;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Custom toolbar</title>
<script src="https://cdn.ckeditor.com/4.8.0/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="editor1" name="editor1" rows="10" ><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p>
</textarea>
<script>
CKEDITOR.replace( 'editor1', {
// Define the toolbar groups as it is a more accessible solution.
toolbarGroups: [
{"name":"basicstyles","groups":["basicstyles"]},
{"name":"links","groups":["links"]},
{"name":"paragraph","groups":["list","blocks"]},
{"name":"document","groups":["mode"]},
{"name":"insert","groups":["insert"]},
{"name":"styles","groups":["styles"]},
{"name":"about","groups":["about"]}
],
// Remove the redundant buttons from toolbar groups defined above.
removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,SpecialChar'
} );
</script>
</body>
</html>
Burada standart CK editörü eklemiş (Nerden anladık?).
toolbarGroups: ile eklenmesini istediği buton gruplarını ve sıralamasını belirlemiş. removeButtons: ile kullanmak istemediği butonları kaldırmış. Ama bir hata yapmış "Özel Karakter Ekleme" butonunu kaldırmak için Specialchar yazmış doğrusu SpecialChar olacak. Yoksa o buton orada durur, kalkmaz. Bunların hatasını da mı ben düzeltecem yiieeeeaaaaa....
Öğrenmek için biraz da kurcalamak lazım. Mesela html kaynağını gösteren butonu kaldırmak istiyoruz. removeButtons: listesine Source ekleyelim. Şimdi bakalım ne oldu? Buton kaldırıldı. Mesela Underline ve Strike bize lazım. Bunları listeden silelim. Şimdi bakalım. Butonlar toolbara geldi.
Butonlarda "?" işareti var. Tıklayınca CK Editör hakkında bilgi veriyor. Bunu istemiyorum.
{"name":"about","groups":["about"]}
Satırını siliyorum. Başlık 1, Başlık 2 gibi biçimlendirme yapan aracı en başa taşımak istiyorum. Bunun için;
{"name":"styles","groups":["styles"]},
Satırını toolbarGroups: listesinde ilk olarak bunu yazıyorum. Bunun gibi istediğim konfigürasyonu elde etmek için çeşitli ayarlar yapmak mümkün.
Biz standart versiyon üzerinde oynadık. Demek ki benzer şekilde Basic ve Full versiyonlar üzerinde oynamak da mümkün olabilir. Sayfalarca bilgi veren dokümanı var.
Yazının başında bunları bilmediğimi söyledim. Şimdi senin için baktım. Umarın faydası olmuştur. Kıt İngilizce ile bu kadar anladım. Sana tavsiyem İngilizceyi çok iyi öğren.
-
quote:
Orijinalden alıntı: DoubleDragon
Böyle konularda en iyi dokümanı kendi sitelerinde bulabilirsin. Görüyorum ki forumda bir şeyler yapmaya, öğrenmeye çalışıyorsun. Fakat her şeyden önce İngilizce'yi çok iyi öğrenmeye bak. Benim de en büyük eksikliğim İngilizce bilmemek.
Sorduğun şeyin nasıl yapıldığını bilmiyorum. CKEditor'ün sitesine gittim baktım. Çat pat İngilizce'mle anlamaya çalıştım. Anladığım kadarıyla basitten gelişmişe doğru Basic, Standart, Full olarak üç temel kullanıma göre ayırmış. Yetmemiş butonları özelleştirme imkanı da vermiş. Bunu da dokümanlarında göstermiş. Her bir konunun altında örnek kod da var.
Toolbar'da buton özelleştirme ile ilgili şu sayfaya bakalım: Custom Editor Toolbar
Bu sayfanın en altında "Get Sample Source Code" yazan yerin altındaki linke tıklayalım. İşte örnek;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Custom toolbar</title>
<script src="https://cdn.ckeditor.com/4.8.0/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="editor1" name="editor1" rows="10" ><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p>
</textarea>
<script>
CKEDITOR.replace( 'editor1', {
// Define the toolbar groups as it is a more accessible solution.
toolbarGroups: [
{"name":"basicstyles","groups":["basicstyles"]},
{"name":"links","groups":["links"]},
{"name":"paragraph","groups":["list","blocks"]},
{"name":"document","groups":["mode"]},
{"name":"insert","groups":["insert"]},
{"name":"styles","groups":["styles"]},
{"name":"about","groups":["about"]}
],
// Remove the redundant buttons from toolbar groups defined above.
removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,SpecialChar'
} );
</script>
</body>
</html>
Burada standart CK editörü eklemiş (Nerden anladık?).
toolbarGroups: ile eklenmesini istediği buton gruplarını ve sıralamasını belirlemiş. removeButtons: ile kullanmak istemediği butonları kaldırmış. Ama bir hata yapmış "Özel Karakter Ekleme" butonunu kaldırmak için Specialchar yazmış doğrusu SpecialChar olacak. Yoksa o buton orada durur, kalkmaz. Bunların hatasını da mı ben düzeltecem yiieeeeaaaaa....
Öğrenmek için biraz da kurcalamak lazım. Mesela html kaynağını gösteren butonu kaldırmak istiyoruz. removeButtons: listesine Source ekleyelim. Şimdi bakalım ne oldu? Buton kaldırıldı. Mesela Underline ve Strike bize lazım. Bunları listeden silelim. Şimdi bakalım. Butonlar toolbara geldi.
Butonlarda "?" işareti var. Tıklayınca CK Editör hakkında bilgi veriyor. Bunu istemiyorum.
{"name":"about","groups":["about"]}
Satırını siliyorum. Başlık 1, Başlık 2 gibi biçimlendirme yapan aracı en başa taşımak istiyorum. Bunun için;
{"name":"styles","groups":["styles"]},
Satırını toolbarGroups: listesinde ilk olarak bunu yazıyorum. Bunun gibi istediğim konfigürasyonu elde etmek için çeşitli ayarlar yapmak mümkün.
Biz standart versiyon üzerinde oynadık. Demek ki benzer şekilde Basic ve Full versiyonlar üzerinde oynamak da mümkün olabilir. Sayfalarca bilgi veren dokümanı var.
Yazının başında bunları bilmediğimi söyledim. Şimdi senin için baktım. Umarın faydası olmuştur. Kıt İngilizce ile bu kadar anladım. Sana tavsiyem İngilizceyi çok iyi öğren.
Merhaba,
aslında olabilir. Ama ben nasıl yapıldığını öğrenmek için kendim yapmak istiyorum. Ama nasıl yapacağımı bilmiyorum.
Yardımınıza ihtiyacım var.
-
webandyazilimprofesor
W
kullanıcısına yanıt
"Kendim yapmak istiyorum" derken neyi kastediyorsunuz? Kendiniz, TinyMCE, CKEditor gibi sıfırdan editör mü yazmak istiyorsunuz?
Sayfa:
1
Ip işlemleri
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
