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


Есть ли способ добавить 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

Скриншот огненного жука:

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

<textarea class="theEditor" id="videogalerie-add_description" name="videogalerie-add_description"></textarea>
Author: Community, 2010-05-18

8 answers

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

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

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

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

 35
Author: Kevin Leary, 2012-01-10 18:18:51

Кэмден уже ответил на этот вопрос, но на случай, если кому-то понадобится полный код... Обязательно подключитесь к 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>
 11
Author: Andy, 2011-03-07 20:26:00

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

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

// 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);
}

?>

 7
Author: Camden Daily, 2010-11-30 15:09:53

Крошечная функция 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

 4
Author: Ranjith Siji, 2012-05-21 10:13:17

Следуя руководствам из здесь и там (найдено благодаря этому), вот как мне удалось заставить что-то работать на 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>
 2
Author: cregox, 2011-03-12 22:13:05

У меня была похожая проблема, и 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").

 1
Author: Hobo, 2011-07-05 15:46:47

Протестировано и работает на 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 в файлах плагина или шаблонов.

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

М

 1
Author: Marty, 2012-01-06 21:30:45

У меня было довольно много проблем с этим. После поиска в течение всего дня и перепробования десятков примеров кода я не смог получить параметры темы 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. Я поместил этот код в нижний колонтитул, чтобы отобразить содержимое МСЕ.

 1
Author: Jennifer Michelle, 2012-08-02 02:07:55