Вызовите TinyMCE в плагине WordPress

Question

Есть ли способ добавить TinyMCE в мой собственный плагин WordPress?

У меня есть текстовая область в моем скрипте, и я хочу превратить эту область в редактируемое поле TinyMCE WYSIWYG. Есть ли способ сделать это?

Этот код не работает для меня:

<?php
    wp_tiny_mce(false,array("editor_selector" => "test"));
?>
<textarea class="test" id="test" name="test"></textarea>

Показывает ошибку JavaScript

f is undefined

Скриншот Firebug:

Это тоже не сработало:

<textarea class="theEditor" id="videogalerie-add_description" name="videogalerie-add_description"></textarea>

Answer 1

Это гораздо проще сделать в WordPress 3.3 с помощью функции wp_editor () .

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

// Add TinyMCE visual editor
wp_editor( $content, $id );

Где $ content - это сохраненный контент, а $ id - имя поля. Параметры также могут быть переданы для настройки функциональности TinyMCE, проверьте Кодекс WordPress для более подробной информации.

Answer 2

Камден уже ответил на это, но в случае, если кому-то нужен полный код ... Обязательно подключите admin_head, подключение к admin_enqueue_scripts вызовет его загрузку раньше других сценариев, таких как jQuery, поэтому он не будет работать. *

add_action("admin_head","load_custom_wp_tiny_mce");
function load_custom_wp_tiny_mce() {

if (function_exists('wp_tiny_mce')) {

  add_filter('teeny_mce_before_init', create_function('$a', '
    $a["theme"] = "advanced";
    $a["skin"] = "wp_theme";
    $a["height"] = "200";
    $a["width"] = "800";
    $a["onpageload"] = "";
    $a["mode"] = "exact";
    $a["elements"] = "intro";
    $a["editor_selector"] = "mceEditor";
    $a["plugins"] = "safari,inlinepopups,spellchecker";

    $a["forced_root_block"] = false;
    $a["force_br_newlines"] = true;
    $a["force_p_newlines"] = false;
    $a["convert_newlines_to_brs"] = true;

    return $a;'));

 wp_tiny_mce(true);
}


}

Затем где-то в вашем шаблоне вставьте обычную текстовую область:

<textarea id="intro"></textarea>

Answer 3

Следующий пример работает для меня. Просто убедитесь, что вы используете идентификатор текстовой области, которую хотите выбрать, в переменной $ a ["elements"].

Предполагается, что у вас есть текстовая область с идентификатором 'intro':

// attach the tiny mce editor to this textarea
if (function_exists('wp_tiny_mce')) {

  add_filter('teeny_mce_before_init', create_function('$a', '
    $a["theme"] = "advanced";
    $a["skin"] = "wp_theme";
    $a["height"] = "200";
    $a["width"] = "800";
    $a["onpageload"] = "";
    $a["mode"] = "exact";
    $a["elements"] = "intro";
    $a["editor_selector"] = "mceEditor";
    $a["plugins"] = "safari,inlinepopups,spellchecker";

    $a["forced_root_block"] = false;
    $a["force_br_newlines"] = true;
    $a["force_p_newlines"] = false;
    $a["convert_newlines_to_brs"] = true;

    return $a;'));

 wp_tiny_mce(true);
}

?>

Answer 4

Крошечная функция mce wp_tiny_mce теперь исключена. Для последней версии WordPress вы хотите использовать wp_editor

$initial_data='What you want to appear in the text box initially';
$settings = array(
'quicktags' => array('buttons' => 'em,strong,link',),
'text_area_name'=>'extra_content',//name you want for the textarea
'quicktags' => true,
'tinymce' => true
);
$id = 'editor-test';//has to be lower case
wp_editor($initial_data,$id,$settings);

для получения дополнительных инструкций просто просмотрите документацию в WordPress

http://codex.wordpress.org/Function_Reference/wp_editor

Answer 5

Следуя инструкциям из здесь и там (найдено благодаря this ), вот как мне удалось заставить что-то работать на WordPress 3.0.5:

<?php
add_action("admin_print_scripts", "js_libs");
function js_libs() {
    wp_enqueue_script('tiny_mce');
}
wp_tiny_mce( false , // true makes the editor "teeny"
    array(
        "editor_selector" => "tinymce_data"
    )
);
?>

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('a.toggleVisual').click(function() {
            console.log(tinyMCE.execCommand('mceAddControl', false, 'tinymce_data'));
        });
        $('a.toggleHTML').click(function() {
            console.log(tinyMCE.execCommand('mceRemoveControl', false, 'tinymce_data'));
        });
    });
</script>

<form method="post" action="">
<ul>
  <li>
    <span id="submit"><input class="button" type="submit"></span>
    <p id="toggle" align="right"><a class="button toggleVisual">Visual</a><a class="button toggleHTML">HTML</a></p>
  </li>
  <li><textarea style="width:100%;" class="tinymce_data" id="tinymce_data" name="tinymce_data"></textarea></li>
</ul>
</form>

Answer 6

У меня было немало проблем с этим. После поиска в течение всего дня и попытки десятков примеров кода, я не мог получить параметры темы Wordpress для сохранения значений MCE в базе данных. Я перепробовал все, ответы jQuery, скрытые поля и т. Д. И т. Д. Ничего из этого не сработало бы для меня, возможно, потому что я где-то пропустил шаг.

Наконец я нашел эту страницу: http://wptheming.com/options-framework-theme/

Скачать с Github и установить как указано (легко). После установки последняя вкладка в опциях вашей темы имеет редактор MCE. Введите несколько тестовых абзацев. Теперь откройте файл index.php в загрузке, чтобы увидеть примеры того, как включить каждую вещь в вашу страницу. Например, я открываю footer.php и добавляю немного кода.

Единственное редактирование, которое мне нужно было сделать, было:

<?php
$ft = of_get_option('example_editor', 'no entry');
$format_ft = wpautop( $ft, false );
echo ($format_ft);
?>

Функция wpautop () из Wordpress добавляет теги абзаца, поскольку они никогда не сохраняются в базе данных wp. Я поместил этот код в нижний колонтитул, чтобы отобразить содержимое MCE.

Answer 7

Проверено и работает на WordPress 3.3.1

добавить в файл функций или плагина.

<?php
    add_filter('admin_head','ShowTinyMCE');
    function ShowTinyMCE() {
        // conditions here
        wp_enqueue_script( 'common' );
        wp_enqueue_script( 'jquery-color' );
        wp_print_scripts('editor');
        if (function_exists('add_thickbox')) add_thickbox();
        wp_print_scripts('media-upload');
        if (function_exists('wp_tiny_mce')) wp_tiny_mce();
        wp_admin_css();
        wp_enqueue_script('utils');
        do_action("admin_print_styles-post-php");
        do_action('admin_print_styles');
    }
?>

для добавления нового контента ..

<?php the_editor($id='content');?>

для редактирования моего контента

<?php the_editor($mySavedContent); ?>

это будет включать в себя всю ярость сценариев / CSS и кода, необходимых для создания текстовой области tinyMCE в вашем плагине или файлах шаблонов.

надеюсь, это поможет ..

M

Answer 8

У меня была похожая проблема, и class="theEditor" мне тоже не помог (сначала).Я использовал пользовательский тип записи, который не включал редактор по умолчанию (то есть аргумент supports не включал 'editor').

Это означало, что WordPress не включал код TinyMCE.Как только я добавил

add_action( 'admin_print_footer_scripts', 'wp_tiny_mce', 25 );

в мой functions.php (на основе кода функции the_editor в general-template.php), он работал нормально (с class="theEditor").