Использование TinyMCE с textarea в метабоксах пользовательских типов записей WordPress

Question

Использование TinyMCE с textarea в метабоксах пользовательских типов записей WordPress

2 окт. 2013 г., 06:48:29

Просмотры: 15.5K

Голосов: 7

Я пытаюсь использовать плагин http://www.tinymce.com/ для добавления TinyMCE в мои текстовые поля textarea в созданных метабоксах. Я искал другие решения, но либо не смог заставить их работать, либо не понял концепцию. Вот что я пробую сейчас:

Я попытался создать плагин для добавления скрипта в админ-панель:

add_action('admin_init', 'admin_load_scripts'); 
function admin_load_scripts() { 
    $js_file = plugins_url( '/tinymce/jquery.tinymce.min.js', __FILE__ );  
    wp_enqueue_script('jquery.tinymce.min', $js_file, array('jquery')); 
}

Затем мне нужно вызвать его следующим образом:

<script>
        tinymce.init({selector:'textarea'});
</script>

Но я не уверен, как это сделать, так как это для бэкенда, а не фронтенда. Как мне этого добиться?

ОБНОВЛЕНО

Вот мой код для метабоксов: http://pastebin.com/WcC51uA9

Я пробовал следующие методы (размещая их в functions.php, конечно), и в большинстве случаев они либо просто не работали, либо появлялись вверху или внизу страницы. Они не появлялись в textarea вообще:

http://pastebin.com/Ct0mF6q7

http://pastebin.com/R6t0ij6h

http://pastebin.com/dcczcVby

http://pastebin.com/yt1uRS5U

730wavy

193

произвольное поле метабокс wp admin javascript tinymce

Комментарии

Почему бы не использовать функцию wp_editor()?

helgatheviking

9 окт. 2013 г. 17:01:12

Все ответы на вопрос

Комментарии

Спасибо. Последний вопрос: в статье WPTuts я увидел массив настроек, но там не было упоминания о передаче массива настроек для "кухонной мойки". Есть идеи по этому поводу? Я хотел сделать редактор для другого поля, который позволяет изменять только цвет шрифта.

730wavy

10 окт. 2013 г. 19:14:59

@mygm26 - в статье WPTuts передается theme_advanced_buttons1 - если вам нужен второй ряд кнопок, вы также можете передать theme_advanced_buttons2 или сколько угодно рядов. В статье WPTuts также есть wp_adv в конце theme_advanced_buttons1, который необходим для отображения второго или третьего ряда кнопок. Если вам нужно только изменить цвет - возможно, стоит рассмотреть встроенный в WordPress Color Picker.

Howdy_McGee

10 окт. 2013 г. 19:49:26

Понял, спасибо. Есть ли способ скрыть "кухонную мойку" в определенных экземплярах? Я использую код wp_editor для нескольких текстовых областей, но хотел бы скрыть "кухонную мойку" в одной из них @Howdy_McGee

730wavy

12 окт. 2013 г. 03:57:20

@mygm26 Я не уверен на 100% и пытался найти ответ - вы можете обратиться к этому вопросу, но если вы когда-нибудь разберетесь, дайте мне знать как: http://wordpress.stackexchange.com/questions/117395/tinymce-show-advanced-options-2nd-row-by-default

Howdy_McGee

14 окт. 2013 г. 05:42:53

// для страниц используйте 'edit_page_form' в качестве первого параметра. Смотрите мой комментарий ниже.
add_action( 'edit_form_advanced', 'my_meta_editor' ); 

function my_meta_editor() {

    // замените 'your_meta_key' на реальный ключ
    $content = get_post_meta($post->ID, 'your_meta_key', true);

    // только строчные буквы [a-z], без дефисов и подчёркиваний
    $editor = 'mymetaeditor';

    // Смотрите мой комментарий ниже
    $editor_settings = array();

    wp_editor( $content, $editor, $editor_settings);

}

Изучите Административные действия для edit_form_after_title, edit_form_after_editor, edit_form_advanced если хотите изменить расположение метабокса.

Также смотрите wp_editor для настроек редактора.

Max Yudin

6.38K

2 окт. 2013 г. 09:46:29

Комментарии

спасибо за ответ, я не совсем уверен, как применить это в моей ситуации. Я собираюсь обновить свой ответ с кодом, который использую для создания метабоксов.

730wavy

2 окт. 2013 г. 20:07:49

Где бы вы ни хотели разместить tinymce, вы можете просто добавить что-то вроде: http://pastebin.com/6N5adFip — По моему опыту, это лучше всего размещать в области с большим количеством контента, например, под основным редактором поста или подобным.

Howdy_McGee

2 окт. 2013 г. 21:56:50

@Howdy_McGee ок, значит если я вставлю код из pastebin в файл функций моей темы и заменю id, то редактор будет отображаться для этого текстового поля?

730wavy

2 окт. 2013 г. 22:49:46

Теоретически да, все, что вам дал @MaxYudin, — это способы отображения wp_editor(); вы должны суметь заставить его работать с этим. Это довольно просто. В противном случае быстрый поиск должен дать много результатов. Дайте мне знать, если у вас получится!

Howdy_McGee

2 окт. 2013 г. 23:24:19

У меня не получается заставить это работать. Я также пробовал использовать этот код -- `// для страниц используйте 'edit_page_form' в качестве первого параметра. И см. мой комментарий ниже. add_action( 'edit_form_advanced', 'my_meta_editor' );

function my_meta_editor() {

// задайте 'your_meta_key' фактическому ключу
$content = get_post_meta($post->ID, 'att_meta_bio', true);

// только строчные буквы [a-z], без дефисов и подчеркиваний
$editor = 'mymetaeditor';

// См. мой комментарий ниже
$editor_settings = array();

wp_editor( $content, $editor, $editor_settings);

}` @Max Yudin @Howdy_McGee

730wavy

5 окт. 2013 г. 08:51:30

Показать остальные 7 комментариев

Эта функция отлично сработала для меня - просто добавьте её в файл functions.php и сделайте свои пользовательские поля текстовыми областями (textarea), и всё готово:

// добавляем редактор tinymce к пользовательским текстовым полям
function admin_add_wysiwyg_custom_field_textarea()
{ ?>
<script type="text/javascript">/* <![CDATA[ */
    jQuery(function($){
        var i=1;
        $('textarea').each(function(e)
        {
          var id = $(this).attr('id');
          if (!id)
          {
           id = 'customEditor-' + i++;
           $(this).attr('id',id);
          }
          tinyMCE.execCommand("mceAddEditor", false, id);
          tinyMCE.execCommand('mceAddControl', false, id);
        });
    });
/* ]]> */</script>
<?php }
add_action( 'admin_print_footer_scripts', 'admin_add_wysiwyg_custom_field_textarea', 99 );

Взято отсюда.

Salam El-Banna

121

26 февр. 2016 г. 12:49:53

Howdy_McGee 20.8K · Accepted Answer · 2013-10-09T16:54:27Z

Вот pastebin с включенным вашим кодом.

Получение старого значения tinyMCE

$meta_biography = get_post_meta( $post->ID, 'meta_biography', true );

Вызов редактора TinyMCE

wp_editor( $meta_biography, 'biography', array(
    'wpautop'       => true,
    'media_buttons' => false,
    'textarea_name' => 'meta_biography',
    'textarea_rows' => 10,
    'teeny'         => true
) );

Сохранение значения редактора или удаление старых значений, если ничего не введено.

if( isset( $_POST['meta_biography'] ) && $_POST['meta_biography'] != '' ) {
    update_post_meta( $post_id, 'meta_biography', $_POST['meta_biography'] );
} else {
    delete_post_meta( $post_id, 'meta_biography' );
}

Если вы хотите добавить больше опций в редактор - вы можете посмотреть Кодекс или ознакомиться с этой полезной статьей на WPTuts. Вам нужно использовать tinymce и передать ему массив настроек. Возможно, вам придется убрать параметр teeny => true в функции wp_editor(), так как Кодекс указывает, что это приведет к использованию только минимальной конфигурации редактора.