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

35

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

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

wysiwyg demonstration screenshot

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

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

Он показывает ошибку javascript

f is undefined

Снимок экрана Firebug: TinyMCE error

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

<textarea class="theEditor" id="videogalerie-add_description" name="videogalerie-add_description"></textarea>
Теги:
plugins
tinymce

8 ответов

35
Лучший ответ

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

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

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

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

  • 0
    это действительно самый новый и самый простой. использовал его для нового проекта, и он прекрасно работает
11

Camden уже ответил на это, но в случае, если кому-то нужен полный код... Обязательно подключайтесь к 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>
  • 0
    это больше не работает, по крайней мере на WordPress 3.0.5
  • 0
    это отлично сработало на моей странице плагинов (wp 3.2.1). Я использовал add_action ('admin_head-mypluginpage', чтобы загрузить его только на моей странице плагинов).
7

Следующий пример работает для меня. Просто убедитесь, что вы используете идентификатор текстового поля, который вы хотите выбрать в переменной $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);
}

? >

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

  • 0
    функция редактора wp_tiny_mce () исключена в последней версии WordPress ...
  • 0
    ключ "text_area_name" должен быть переписан как "textarea_name"
2

Ниже приведены руководства от здесь и там (найдено спасибо 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>
1

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

1

Протестировано и работает над 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

  • 0
    +1 отлично работает в WP 3.3.1. СПАСИБО...
1

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

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню