WordPress'te TinyMCE Editor'ü Kullanma [Guide]

İsmini bilmese de, WordPress'i kullanan herkes, TinyMCE editörü. İçeriğinizi oluştururken veya düzenlerken kullandığınız düzenleyicidir - koyu metin oluşturma, başlıklar, metin hizalama vb. Bu yazıdakilere bakacağımız şey bu, ve size göstereceğim işlevsellik nasıl ekleyebilirsiniz ve eklentilerinizde nasıl kullanabilirsiniz.

Editör, Web'deki bir dizi projede kullanılan, TinyMCE adlı platformdan bağımsız bir Javascript sistemi üzerine kuruludur. WordPress'in kendi düğmelerinizi oluşturmak ve WordPress içindeki diğer konumlara eklemek için kullanabileceğiniz harika bir API'si vardır..

Kullanılabilir Düğmeler Ekleme

WordPress, arabirimi temizlemek için TinyMCE'de bulunan ve üst simge, alt simge ve yatay kurallar gibi belirli düğmeleri devre dışı bırakmak için bazı seçenekleri kullanır. Çok fazla telaş olmadan geri eklenebilirler.

İlk adım bir eklenti oluşturmaktır. Bunun nasıl yapılacağına ilişkin WordPress kodeksine bir göz atın. Özetle, wp-content / plugins klasöründe 'my-mce-plugin' adlı bir klasör oluşturarak geçebilirsiniz. PHP uzantılı, aynı isimde bir dosya oluşturun: my-mce-plugin.php.

Bu dosyanın içine aşağıdakini yapıştırın:

Bir kez yaptıktan sonra bu eklentiyi WordPress'te seçebilmeli ve etkinleştirebilmelisiniz. Şu andan itibaren tüm kod bu dosyanın içine yapıştırılabilir..

Yani, geri bazı yerleşik fakat gizli düğmelere izin vermek. Bahsettiğim 3 düğmeyi etkinleştirmemize izin veren kod:

 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); işlevi my_tinymce_buttons ($ buttons) $ buttons [] = 'üst simge'; $ buttons [] = 'abone'; $ düğmeleri [] = saat; $ düğmeleri döndür;

Hangi düğmelerin eklenebileceğini ve ne adlandırılabileceğini bilmek için, kontroller için TinyMCE belgelerinde bulunan listeye bakın..

Kendi Düğmelerimizi Yaratmak

Sıfırdan kendi düğmelerimizi yaratmaya ne dersiniz? Birçok web sitesi, kod parçalarını işaretlemek için çok anlamsal bir yaklaşım kullanan kod vurgulama için Prizma kullanır. Kodunuzu içine sarmanız gerekir ve

 Etiketler, şunun gibi bir şey:
 $ değişken = 'değer'
 Bunu bizim için yapacak bir düğme yaratalım.!
 Bu üç aşamalı bir işlemdir. Bir düğme eklemeniz, bir javascript dosyası yüklemeniz ve aslında Javascript dosyasının içeriğini yazmanız gerekir. Başlayalım!
 Düğmeyi eklemek ve Javascript dosyasını yüklemek oldukça basittir, işte bunu yapmak için kullandığım kod:
  add_filter ('mce_buttons', 'pre_code_add_button'); işlevi pre_code_add_button ($ buttons) $ buttons [] = 'pre_code_button'; $ düğmeleri döndür;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); işlevi pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/Tinymce-plugin.js'; $ plugin_array döndürür;  
 Bununla ilgili öğreticiler gördüğümde sık sık 2 problem görüyorum.
 Bunu söylemeyi ihmal ediyorlar pre_code_add_button () işlevine eklenen düğme adı, pre_code_add_javascript () işlevindeki $ plugin_array değişkeni ile aynı olmalıdır. Ayrıca ihtiyacımız olacak Javascript'te aynı dizeyi kullanın daha sonra.
 Bazı dersler de Her şeyi sarmak için ek bir admin_head kancası kullanın. Bu işe yarar, ancak gerekli değildir ve Codex kullanmadığından, kaçınılması gerekir..
 Bir sonraki adım, fonksiyonelliğimizi uygulamak için Javascript yazmaktır. İşte alıyorum ne elde 
 ve  etiketler aynı anda tümünü çıktılar.
  (function () tinymce.PluginManager.add ('pre_code_button', function (editör, url) editor.addButton ('pre_code_button', text: 'Prism', simge: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = ''+ seçili +'
'; editor.insertContent (content + "\ n"); ); ); ) (); 
 Bunun çoğu, bir TinyMCE eklentisinin nasıl kodlanması gerektiği ile belirlenir, bununla ilgili bazı bilgileri TinyMCE belgelerinde bulabilirsiniz. Şimdilik bilmen gereken tek şey bu düğmenin adı (Pre_code_button) 2. ve 3. satırda kullanılmalıdır. Bir simge kullanmazsanız, 4. satırdaki "metin" değeri görüntülenir (bir anda simgeler eklemeye bir göz atacağız).
 Onclick metodu tıklandığında bu butonun ne yaptığını belirler. Seçilen metni daha önce tartışılan HTML yapısına sarmak için kullanmak istiyorum.
 Seçilen metin kullanılarak alınabilir tinyMCE.activeEditor.selection.getContent (). Sonra, etrafındaki elemanları sarar ve vurgulu içeriği yenisiyle değiştirerek eklerim. Ayrıca kod satırından sonra kolayca yazmaya başlayabilmem için yeni bir satır ekledim..
 Bir simge kullanmak istiyorsanız, WordPress ile birlikte verilen Dashicons kümesinden birini seçmenizi öneririm. Geliştirici Referansı, simgeleri ve CSS / HTML / Glyph'i bulmak için harika bir araca sahiptir. Kod sembolünü bulun ve altındaki unicode'u not edin: f475.
 Eklentimize bir stil sayfası eklememiz ve ardından simgemizi görüntülemek için basit bir stil eklememiz gerekir. İlk önce, tarzımızı WordPress'e ekleyelim:
  add_action ('admin_enqueue_scripts', 'pre_code_styles'); fonksiyon pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 Javascript'e geri dönün ve addButton işlevindeki simgenin yanında “yanlış” Bir düğmeyle düğmenizin olmasını istersiniz - kullandım pre_code_button.
 Şimdi, eklenti dizininizde style.css dosyasını oluşturun ve aşağıdaki CSS'yi ekleyin:
  i.mce-i-pre_code_button: before font-family: dashicons; içerik: "\ f475";  
  
 Düğmenin mce-i- [sınıfınız burada] stilleri hedeflemek ve eklemek için kullanabileceğiniz sınıf. Yazı tipini dashicons ve önceki unicode değerini kullanan içerik olarak belirtin..
 TinyMCE'i Başka Bir yerde Kullanma
 Eklentiler genellikle daha uzun metinler girmek için textareas oluşturur, TinyMCE'yi orada da kullanabilirsek harika olmaz mıydı? Elbette yapabiliriz ve bu oldukça kolay. Wp_editor () işlevi yönetici içinde herhangi bir yere çıktı yapmamıza izin verir, işte size şöyle görünüyor:
 wp_editor ($ initial_content, $ element_id, $ ayarları);
 İlk parametre kutu için başlangıç içeriğini ayarlar. Bu, örneğin veritabanından bir seçenek yüklemek için kullanılabilir. İkinci parametre, HTML öğesinin kimliğini ayarlar. Üçüncü parametre bir dizi ayardır. Kullanabileceğiniz ayarları tam olarak okumak için wp editörü belgelerine bakın..
 En önemli ayar textarea_name. Bu, textarea öğesinin name niteliğini doldurarak verileri kolayca kaydetmenizi sağlar. Editörüm seçenekler sayfasında kullanıldığında şöyle görünür:
 $ settings = array ('textarea_name' => 'buyer_bio');
 wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ setting);
 Bu, basit bir textarea ile sonuçlanacak olan aşağıdaki kodu yazmaya eşdeğerdir:
 <?php get_option( 'buyer_bio' ) ?>
 Sonuç
 TinyMCE editörü, kullanıcılara içerik girerken daha fazla esneklik sağlamanın kullanıcı dostu bir yoludur. İçeriğini biçimlendirmek istemeyenlerin sadece yazmasını ve onunla yapılmasını sağlar ve onunla uğraşmak isteyenler, doğru bir şekilde yapmak için ihtiyaç duydukları kadar zaman harcamak isterler..
 Yeni düğmeler ve işlevler oluşturmak çok modüler bir şekilde yapılabilir ve olasılıkların sadece yüzeyini çizdik. Özellikle iyi bir TinyMCE eklentisi veya size çok yardımcı olan bir kullanım durumu biliyorsanız, aşağıdaki yorumlarda bize bildirin.!