Apakah ada cara untuk mendapatkan N jumlah editor WYSIWYG dalam jenis posting khusus?

27

Apakah ada cara untuk memiliki beberapa editor WYSIWYG untuk jenis posting khusus? Sebagai contoh, jika saya memiliki tata letak 2 kolom saya ingin memiliki satu editor untuk satu kolom dan editor lain untuk yang lain.

Paul Sheldrake
sumber
Konfigurasi WYSIWYG seperti apa yang Anda butuhkan? Panel lengkap termasuk mengunggah gambar, mode layar penuh dll?
hakre
Bueltge memiliki artikel bagus yang menunjukkan bagaimana hal itu dapat dilakukan: wpengineer.com/1991/example-how-to-add-meta-boxes-to-edit-area
hakre
Saya membutuhkan jawaban yang tepat untuk proyek klien. Terima kasih untuk bertanya!
MikeSchinkel
MikeSchinkel - Saya baru mengenal WordPress; di mana saya meletakkan kode yang Anda posting?

Jawaban:

21

Katakanlah jenis pos kustom Anda dipanggil Properties, Anda akan menambahkan kotak untuk menahan editor tinyMCE tambahan Anda menggunakan kode yang mirip dengan ini:

function register_meta_boxen() {
    add_meta_box("wysiwyg-editor-2", "Second Column", "second_column_box",
    "properties", "normal", "high");    
}
add_action('admin_menu', 'register_meta_boxen');

wysiwyg-editor-2adalah ID yang akan diterapkan kotak meta padanya, Second Columnadalah judul yang akan dimiliki kotak meta, second_column_boxadalah fungsi yang akan mencetak HTML untuk kotak meta, propertiesadalah jenis pos kustom kami, normaladalah lokasi kotak meta , dan highmenentukan bahwa itu harus ditampilkan setinggi mungkin di halaman. (Biasanya di bawah editor tinyMCE default).

Kemudian, dengan mengambil ini sebagai contoh paling mendasar, Anda harus melampirkan editor tinyMCE ke sebuah textarea. Kami masih harus mendefinisikan second_column_boxfungsi kami yang akan mencetak HTML untuk kotak meta jadi ini adalah tempat yang baik untuk melakukannya:

function second_column_box() {
    echo <<<EOT
    <script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#tinymce").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
        tinyMCE.execCommand("mceAddControl", false, "tinymce");
    }
});
</script>
    <textarea id="tinymce" name="tinymce"></textarea>
EOT;
}

Ada beberapa masalah yang saya tidak yakin bagaimana cara mengatasinya. Editor tinyMCE akan bersarang di dalam kotak metabox, yang mungkin tidak ideal, dan itu tidak akan menampilkan kemampuan untuk beralih antara mode pengeditan HTML dan Visual, serta perintah penyisipan media yang dimiliki oleh editor pos biasa. Beralih mode tampaknya didefinisikan sebagai fungsi yang argumen pertama adalah ID, tetapi juga tampaknya dikodekan ke skrip wp-tinymce. Dimungkinkan untuk menggunakan fungsi built in tinyMCE untuk melakukannya, tetapi ini mengubah textarea antara tinyMCE penuh dan textarea dasar, tanpa tombol penyisipan WP HTML.

tak seorangpun
sumber
"Meta_boxen"? Luar biasa! Saya pikir saya adalah satu-satunya. Akan memberi Anda solusi mencoba sebentar.
mfields
Solusi Thomas McDonalds tidak bekerja untuk saya dalam 3.1 - apakah ada cara dalam 3.1 untuk melakukan ini?
19

Pertama: Terima kasih Big untuk @Thomas McDonald untuk jawabannya ; Saya perlu mencari tahu pertanyaan yang persis sama yang @Paul Sheldrake tanyakan dan kode Thomas membuat saya mulai ke arah yang benar.

Sayangnya saya kemudian macet karena saya perlu mengubah tata letak dari default ke tata letak yang lebih sederhana dan lebih kecil karena saya perlu menggunakan TinyMCE di metabox samping. Saya mencari solusi di mana - mana dan terutama pada MoxieCode TinyMCE Wiki dan TinyMCE Tips & How To Forum dan tidak menemukan apa pun! 1 Semua yang saya menemukan menjelaskan bagaimana set theme, width, height, dll menggunakan tinyMCE.init({...})tetapi tampaknya Anda tidak dapat menggunakan bahwa ketika Anda menggunakan tinyMCE.execCommand("mceAddControl").

Saya hampir bingung ketika saya melihat artikel beberapa contoh TinyMCE 3 pada satu halaman oleh Hamilton Chua , dan dia berhasil! Solusinya adalah menetapkan tinyMCE.settingssebelum memanggil tinyMCE.execCommand("mceAddControl"), misalnya:

<?php 
$id = "sidebar-content";
$script = <<<EOT
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#{$id}").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
      tinyMCE.settings = {
        theme : "advanced",
        mode : "none",
        language : "en",
        height:"200",
        width:"100%",
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : ""
      };
      tinyMCE.execCommand("mceAddControl", true, "{$id}");
    }
});
</script>
<textarea id="sidebar-content" name="sidebar-content"></textarea>
EOT;

Bagian yang menyedihkan adalah ini benar-benar tidak sulit, tetapi tidak didokumentasikan di tempat lain yang bisa saya temukan. Sungguh menakjubkan menemukan hampir tidak ada orang lain yang mengalami masalah ini.

Jadi, bagaimanapun, kode di atas menghasilkan TinyMCE kedua berikut persis format / tata letak yang dibutuhkan klien saya:

Beberapa TinyMCE TextAreas di Editor Admin WordPress 3.0
(sumber: mikeschinkel.com )

Jadi, jika Anda menggunakan kode @Thomas McDonald di atas, Anda merasa perlu memodifikasi tata letak, pastikan untuk memeriksa artikel mengagumkan Hamilton Chua (terima kasih Ham!) :

PS Jika Anda melakukan sesuatu yang sedikit salah, TinyMCE mungkin tidak muncul sama sekali. Sebagai contoh dalam kasus saya, saya menggunakantheme: "simple"pada awalnya dan saya tidak mendapatkan apa-apa dan butuh lebih dari satu jam untuk menyadari bahwa saya hanya perlu menggunakantheme: "advanced". Jadi, jika Anda menemukan TinyMCE tidak bekerja untuk Anda, pastikan untuk mencoba mengubah keadaan, Anda mungkin mengalami masalah yang sama. (BTW, saya belum mencoba tema lain atau menjelajahi apa lagi yang tersedia; jika Anda menemukan tema lain yang berfungsi silakan beri komentar di bawah ini.)

Catatan kaki

1 : Sangat membuat frustrasi! Setelah lebih dari sebulan dengan WordPress Answer, saya sekarang berharap untuk menemukan jawaban atas semua pertanyaan saya dengan tingkat kualitas yang sama seperti di sini, dan di tempat lain saya biasanya menemukan kekecewaan!

MikeSchinkel
sumber
Mike, Anda kehilangan equals setelah $scriptdan juga tidak ada penutupan untuk heredoc Anda, yaitu. EOT;. Terlepas dari kesalahan kecil itu adalah contoh kerja yang baik ..;)
t31os
@ t31os - Terima kasih telah memberi tahu saya. Tidak yakin bagaimana saya melewatkannya; Saya biasanya menguji dan kemudian menyalin jawaban saya dari kode kerja saya. Sosok pergi!
MikeSchinkel
menggunakan solusi ini menghasilkan editor visual normal menjadi SimpleLayout juga bagi saya di 3.1.
mfields
@fields - Nyebelin bahwa 3.1 telah merusak begitu banyak hal. :-(
MikeSchinkel
Ingin menarik perhatian Anda pada artikel ini, karena dapat mengklarifikasi beberapa hal: dannyvankooten.com/450/…
marfarma
2

Karena saya menemukan artikel ini sebagai hasil pertama di Google, saya hanya ingin berkomentar bahwa WP sekarang menawarkan fungsi untuk menangani tugas semacam ini.

Dalam add_meta_boxfungsi tersebut, tambahkan kode berikut ->

wp_editor( $content, $editor_id, $settings = array() );

Di mana pun Anda ingin menambahkan editor TinyMCE

Referensi: wp_editor

ejhost
sumber
1
Jawaban harus lebih dari sekadar tautan biasa . Mereka seharusnya benar-benar menjadi jawaban alih-alih rute di mana seseorang mungkin akan menemukan jawaban. Tolong bantu mencegah tautan busuk, edit jawaban Anda dan berikan informasi yang diperlukan yang membantu OP serta pengunjung selanjutnya untuk menyelesaikan masalah mereka.
kaiser
0

Editor default, tinymce, diambil oleh fungsi di wp-admin / include / post.php disebut wp_tiny_mce (); Lihat di sumber pada baris 1350. Ada array pengaturan di baris 1478. Salah satu opsi tampaknya menunjuk pemilih teks untuk menerapkan editor javascript. Saya membaca posting ini oleh Keighl di blognya yang mengarahkan saya ke sana. Baca artikel, dan mungkin ada cara untuk memanggil wp_tiny_mce () di plugin bagian admin dan menerapkannya ke area teks kedua yang Anda buat.

kevtrout
sumber
0

Saya mendapatkannya hanya dengan menambahkan "theEditor" sebagai atribut kelas ke textarea:

<div style="background: #FFF; border: 1px solid #CCC;"><textarea id="my_details_field" name="my_details" class="theEditor" rows="20" style="width: 100%;"><?=get_post_meta($post->ID, 'my_details', TRUE)?></textarea></div>
Markus René Einicher
sumber