Tinymce nedir?
-İçinde hemen hemen bütün gerekli toolları bulunduran, javascript ile yazılmış,
web tabanlı bir metin editörüdür.
İndirilmesi:
http://www.tinymce.com/download/download.php bu link ile kendi sitesinden indirelebilir.
Özellikleri:
-Resim, link, video, özel karakter, tarih vs. ekleme…
-Font çeşitliliği, büyüklüğü, formatı vs. düzenleme…
-Liste, tablo ekleme…
-Çeşitli ikonları ekleme, önizleme yapma…
gibi bir çok özelliği mevcut.
Kurulumu:
İnen ‘tinymce’ dosyasını projemizin olduğu klasöre atıp, projemizin ‘head’ tagları arasında
<script src="js/tinymce/tinymce.min.js"></script>
yazıyoruz.
Ayarları:
Ayarlarını ise, yine ‘head’ taglarımız arasına;
<script type="text/javascript">
tinymce.init({
selector: "textarea#metin",
plugins: [
"advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
],
toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor",
toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
menubar: false,
toolbar_items_size: 'small',
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
],
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
]
});
</script>
şekildeki gibi yapıyoruz.
Bu ayarlar ile aşağıdaki resim gibi bir editör oluşturabiliriz. Toollarını kendinize göre düzenleyebilirsiniz.
*Önemli olan nokta ‘selector’ kodunun olduğu kısım… Burası metin editörünün hangi aralığa eklenmek istediğini seçtiğimiz bölüm. (Mesela ben id’si metin olan textarea yı seçmiştim.)
--Alıntı:http://www.merttasci.com/blog/tinymce-editor/
-İçinde hemen hemen bütün gerekli toolları bulunduran, javascript ile yazılmış,
web tabanlı bir metin editörüdür.
İndirilmesi:
http://www.tinymce.com/download/download.php bu link ile kendi sitesinden indirelebilir.
Özellikleri:
-Resim, link, video, özel karakter, tarih vs. ekleme…
-Font çeşitliliği, büyüklüğü, formatı vs. düzenleme…
-Liste, tablo ekleme…
-Çeşitli ikonları ekleme, önizleme yapma…
gibi bir çok özelliği mevcut.
Kurulumu:
İnen ‘tinymce’ dosyasını projemizin olduğu klasöre atıp, projemizin ‘head’ tagları arasında
<script src="js/tinymce/tinymce.min.js"></script>
yazıyoruz.
Ayarları:
Ayarlarını ise, yine ‘head’ taglarımız arasına;
<script type="text/javascript">
tinymce.init({
selector: "textarea#metin",
plugins: [
"advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
],
toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor",
toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
menubar: false,
toolbar_items_size: 'small',
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
],
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
]
});
</script>
şekildeki gibi yapıyoruz.
Bu ayarlar ile aşağıdaki resim gibi bir editör oluşturabiliriz. Toollarını kendinize göre düzenleyebilirsiniz.
*Önemli olan nokta ‘selector’ kodunun olduğu kısım… Burası metin editörünün hangi aralığa eklenmek istediğini seçtiğimiz bölüm. (Mesela ben id’si metin olan textarea yı seçmiştim.)
--Alıntı:http://www.merttasci.com/blog/tinymce-editor/
TinyMCE editör WEB
4/
5
Oleh
Root
