Есть ли способ иметь несколько редакторов WYSIWYG для пользовательского типа записи? Например, если у меня был макет с двумя столбцами, я хотел иметь один редактор для одного столбца и другой редактор для другого.
Скажем, ваш пользовательский тип записи называется Properties
, вы бы добавили поле для хранения вашего дополнительного редактора tinyMCE, используя код, подобный следующему:
function register_meta_boxen() {
add_meta_box("wysiwyg-editor-2", "Second Column", "second_column_box",
"properties", "normal", "high");
}
add_action('admin_menu', 'register_meta_boxen');
wysiwyg-editor-2
- это идентификатор, который будет применен к мета-блоку, Second Column
- это заголовок, который будет иметь мета-поле, second_column_box
- это функция, которая будет распечатывать HTML-код для мета-блока, properties
- наш пользовательский тип записи, normal
- это расположение мета-блока, а high
указывает, что он должен отображаться как можно выше на странице. (Обычно ниже стандартного редактора tinyMCE).
Затем, взяв это как самый простой пример, вы должны прикрепить редактор tinyMCE к текстовой области. Нам все еще нужно определить нашу функцию second_column_box
, которая будет печатать HTML-код для мета-блока, так что это то же место, что и любой другой, для этого:
function second_column_box() {
echo <<<EOT
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#tinymce").addClass("mceEditor");
if ( typeof( tinyMCE ) == "object" &&
typeof( tinyMCE.execCommand ) == "function" ) {
tinyMCE.execCommand("mceAddControl", false, "tinymce");
}
});
</script>
<textarea id="tinymce" name="tinymce"></textarea>
EOT;
}
Есть пара вопросов, которые я не знаю, как преодолеть. Редактор tinyMCE будет вложен в метабокс, который может быть не идеальным, и не будет иметь возможности переключаться между режимами редактирования HTML и Visual, а также командами вставки медиафайлов, которые есть в обычном редакторе записей. Переключение режимов, по-видимому, определяется как функция, первым аргументом которой является идентификатор, но, тем не менее, он также закодирован в сценарии wp-tinymce. Для этого можно использовать встроенные функции tinyMCE, но это изменяет текстовую область между полной tinyMCE и базовой текстовой областью без каких-либо кнопок вставки WP HTML.
Во-первых: Большое спасибо @Thomas McDonald за его ответ ; Мне нужно было выяснить точно такой же вопрос, который задал @Paul Sheldrake, и код Томаса заставил меня начать в правильном направлении.
К сожалению, я застрял, потому что мне нужно было изменить макет со стандартного на более простой и меньший макет, поскольку мне нужно было использовать TinyMCE в боковом метабоксе. Я везде искал практически решение, особенно на MoxieCode TinyMCE Wiki и TinyMCE Tips & How To Forum и ничего не нашел! 1 Все, что я нашел, объясняло, как установить theme
, width
, height
и т.д. С помощью tinyMCE.init({...})
, но, очевидно, вы не можете использовать это, когда используете tinyMCE.execCommand("mceAddControl")
.
Я был ошеломлен, когда наткнулся на статью несколько экземпляров TinyMCE 3 на одной странице by Гамильтон Чуа , и он прибил его! Его решением было назначить tinyMCE.settings
перед вызовом tinyMCE.execCommand("mceAddControl")
, например:
<?php
$id = "sidebar-content";
$script = <<<EOT
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#{$id}").addClass("mceEditor");
if ( typeof( tinyMCE ) == "object" &&
typeof( tinyMCE.execCommand ) == "function" ) {
tinyMCE.settings = {
theme : "advanced",
mode : "none",
language : "en",
height:"200",
width:"100%",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""
};
tinyMCE.execCommand("mceAddControl", true, "{$id}");
}
});
</script>
<textarea id="sidebar-content" name="sidebar-content"></textarea>
EOT;
Грустная часть в том, что это было действительно не сложно, но это не было документировано где-либо еще, что я мог найти. Удивительно, что почти никто другой не сталкивался с этой проблемой.
Так или иначе, вышеприведенный код сгенерировал следующий второй TinyMCE именно в том формате/макете, который нужен моему клиенту:
(источник: mikeschinkel.com )
Поэтому, если вы используете приведенный выше код @Thomas McDonald, вы обнаружите, что вам нужно изменить макет, обязательно ознакомьтесь с замечательной статьей Гамильтона Чуа (спасибо, Хэм!):
P.S.Если вы делаете что-то даже немного не так, TinyMCE может вообще не показываться. Например, в моем случае я сначала использую theme: "simple"
, но ничего не получил, и мне потребовалось более часа, чтобы понять, что мне просто нужно использовать theme: "advanced"
. Так что, если вы обнаружите, что TinyMCE не работает, обязательно попробуйте изменить ситуацию, возможно, у вас возникла аналогичная проблема. (Кстати, я не пробовал никаких других тем и не исследовал, что еще доступно; если вы найдете другие работающие темы, пожалуйста, оставьте комментарий ниже.)
1 : Очень расстраивает! Спустя чуть больше месяца с WordPress Answer, я теперь ожидаю найти ответы на все мои вопросы с тем же уровнем качества, что и здесь, и в других местах я обычно нахожу разочарование!
Поскольку я нашел эту статью как первый результат в Google, я просто хотел прокомментировать, что WP теперь предлагает функцию для решения такого рода задач.
В функции add_meta_box
добавьте следующий код ->
wp_editor( $content, $editor_id, $settings = array() );
Везде, где вы хотите добавить редактор TinyMCE
Ссылка: wp_editor
Я получил это, просто добавив "theEditor" как атрибут класса к текстовой области:
<div style="background: #FFF; border: 1px solid #CCC;"><textarea id="my_details_field" name="my_details" class="theEditor" rows="20" style="width: 100%;"><?=get_post_meta($post->ID, 'my_details', TRUE)?></textarea></div>
Редактор по умолчанию, tinymce, загружается функцией из wp-admin/includes/post.php, которая называется wp_tiny_mce (); Посмотрите в источнике в строке 1350. В строке 1478 есть массив настроек. Одна из опций, очевидно, обозначает селектор textarea, к которому следует применить редактор javascript. Я читал этот пост Keighl в своем блоге, который указал мне на это. Прочитайте статью, и, возможно, есть способ вызвать wp_tiny_mce () в плагине раздела администратора и применить его ко второй создаваемой вами текстовой области.