Добавление wp_editor в текстовую область произвольного метабокса

23 апр. 2012 г., 05:20:48
Просмотры: 26.2K
Голосов: 8

Я новичок и хочу добавить wp_editor в поле текстовой области произвольного метабокса. Я просмотрел, кажется, везде в поисках полного примера создания метабокса с текстовой областью, использующей wp_editor. Мне нужен полный пример от начала до конца.

Я не хочу использовать плагин.

Есть ли у кого-нибудь ссылка на полный пример?

Спасибо

0
Все ответы на вопрос 2
2
17

Существует как минимум 1 проблема при использовании wp_editor в метабоксе, как обсуждается в тикете #19173 (хорошее чтение по теме wp_editor и метабоксов). TinyMCE полностью сбивается, если переместить метабокс, который его содержит (конкретно, если изменить расположение TinyMCE в DOM). Однако вы можете использовать версию с Quicktags (без TinyMCE). Другой вариант — просто не перемещать метабокс (неудобно) или добавлять редакторы с помощью хуков edit_page_form или edit_form_advanced вместо использования add_meta_box().

Я написал быстрый плагин для демонстрации проблемы. Это полностью рабочий пример использования wp_editor в метабоксе. Вы можете настроить wp_editor, чтобы сделать его более дружелюбным к метабоксам, отключив TinyMCE и включив quicktags, используя соответствующие аргументы.

<?php
/**
 * Plugin Name: WP Editor in a Meta Box
 * Plugin URI: 
 * Description: Демонстрация использования WP Editor в метабоксе.
 * Version: 1.0
 * Author: goto10
 * Author URI: 
 * License: 
 */

// имя файла: wp_editor-in-meta-box-test.php 

/* Код метабокса основан на http://codex.wordpress.org/Function_Reference/add_meta_box */

/* Определяем пользовательский блок */
add_action( 'add_meta_boxes', 'myplugin_add_custom_box' );

/* Делаем что-то с введенными данными */
add_action( 'save_post', 'myplugin_save_postdata' );

/* Добавляем блок в основную колонку на экранах редактирования постов и страниц */
function myplugin_add_custom_box() {
  add_meta_box( 'wp_editor_test_1_box', 'WP Editor Test #1 Box', 'wp_editor_meta_box' );
}

/* Выводим содержимое блока */
function wp_editor_meta_box( $post ) {

  // Используем nonce для проверки
  wp_nonce_field( plugin_basename( __FILE__ ), 'myplugin_noncename' );

  $field_value = get_post_meta( $post->ID, '_wp_editor_test_1', false );
  wp_editor( $field_value[0], '_wp_editor_test_1' );
}

/* При сохранении поста сохраняем наши пользовательские данные */
function myplugin_save_postdata( $post_id ) {

  // проверяем, является ли это автосохранением. 
  // Если это так, наша форма не отправлена, поэтому ничего не делаем
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
      return;

  // проверяем, пришел ли запрос с нашего экрана и с корректной авторизацией,
  // так как save_post может быть вызван в других случаях
  if ( ( isset ( $_POST['myplugin_noncename'] ) ) && ( ! wp_verify_nonce( $_POST['myplugin_noncename'], plugin_basename( __FILE__ ) ) )
      return;

  // Проверяем права
  if ( ( isset ( $_POST['post_type'] ) ) && ( 'page' == $_POST['post_type'] )  ) {
    if ( ! current_user_can( 'edit_page', $post_id ) ) {
      return;
    }    
  }
  else {
    if ( ! current_user_can( 'edit_post', $post_id ) ) {
      return;
    }
  }

  // OK, мы аутентифицированы: нужно найти и сохранить данные
  if ( isset ( $_POST['_wp_editor_test_1'] ) ) {
    update_post_meta( $post_id, '_wp_editor_test_1', $_POST['_wp_editor_test_1'] );
  }

}

Редактирование: Эта версия функции wp_editor_meta_box() из примера выше будет иметь отключенный TMCE и включенные Quicktags:

/* Выводим содержимое блока */
function wp_editor_meta_box( $post ) {

  // Используем nonce для проверки
  wp_nonce_field( plugin_basename( __FILE__ ), 'myplugin_noncename' );

  $field_value = get_post_meta( $post->ID, '_wp_editor_test_1', false );

  // Настройки, которые мы передадим в wp_editor
  $args = array (
        'tinymce' => false,
        'quicktags' => true,
  );
  wp_editor( $field_value[0], '_wp_editor_test_1', $args );
}
23 апр. 2012 г. 06:06:14
Комментарии

Спасибо за код. Не могли бы вы подробнее объяснить, что означает "изменение расположения TinyMCE в DOM" и как именно "отключить TinyMCE и включить quicktags".

Travis Pflanz Travis Pflanz
23 апр. 2012 г. 06:30:10

Без проблем. Обновил ответ с версией без Tiny. Кроме того, когда вы перемещаете метабокс с помощью функции перетаскивания, его положение в DOM изменяется. Если метабокс содержит экземпляр TinyMCE, положение этого экземпляра в DOM также изменится, что вызывает проблемы. Похоже, что эти проблемы можно решить, но для этого потребуется много дополнительного функционала, поэтому было решено, что wp_editor (по крайней мере, когда он использует TinyMCE) не следует использовать в метабоксах.

Dave Romsey Dave Romsey
23 апр. 2012 г. 06:59:03
1

Вы ищете пример кода с нуля или рассматриваете возможность интеграции пользовательского плагина для метабоксов, который поддерживает WYSIWYG редактор в метабоксе? Если последнее, могу предложить https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress

23 апр. 2012 г. 05:53:24
Комментарии

Я ищу пример с нуля без использования плагина. Я обновлю вопрос.

Travis Pflanz Travis Pflanz
23 апр. 2012 г. 05:57:18