Вызовите 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>
8 answers
Это намного проще сделать в WordPress 3.3 с помощью функции wp_editor().
Я работаю над плагином, который добавит экземпляр TinyMCE на страницу параметров темы. Вот как это выглядит:
// Add TinyMCE visual editor
wp_editor( $content, $id );
Где $content - сохраненное содержимое, а $id - имя поля. Параметры также могут быть переданы для настройки функциональности TinyMCE, ознакомьтесь с кодексом WordPress для получения более подробной информации.
Кэмден уже ответил на этот вопрос, но на случай, если кому-то понадобится полный код... Обязательно подключитесь к 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>
Следующий пример подходит для меня. Просто убедитесь, что вы используете идентификатор текстовой области, которую хотите выбрать в переменной $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);
}
?>
Крошечная функция 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
Следуя руководствам из здесь и там (найдено благодаря этому), вот как мне удалось заставить что-то работать на 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>
У меня была похожая проблема, и 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"
).
Протестировано и работает на 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 в файлах плагина или шаблонов.
Надеюсь, это поможет..
М
У меня было довольно много проблем с этим. После поиска в течение всего дня и перепробования десятков примеров кода я не смог получить параметры темы 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. Я поместил этот код в нижний колонтитул, чтобы отобразить содержимое МСЕ.