it-swarm.xyz

Есть ли способ получить N количество редакторов WYSIWYG в пользовательском типе записи?

Есть ли способ иметь несколько редакторов WYSIWYG для пользовательского типа записи? Например, если у меня был макет с двумя столбцами, я хотел иметь один редактор для одного столбца и другой редактор для другого.

custom-post-typeswysiwyg
27
Paul Sheldrake

Скажем, ваш пользовательский тип записи называется 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.

20
nobody

Во-первых: Большое спасибо @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 именно в том формате/макете, который нужен моему клиенту:

 Multiple TinyMCE TextAreas in the WordPress 3.0 Admin Editor 
(источник: mikeschinkel.com )

Поэтому, если вы используете приведенный выше код @Thomas McDonald, вы обнаружите, что вам нужно изменить макет, обязательно ознакомьтесь с замечательной статьей Гамильтона Чуа (спасибо, Хэм!):

P.S.Если вы делаете что-то даже немного не так, TinyMCE может вообще не показываться. Например, в моем случае я сначала использую theme: "simple", но ничего не получил, и мне потребовалось более часа, чтобы понять, что мне просто нужно использовать theme: "advanced". Так что, если вы обнаружите, что TinyMCE не работает, обязательно попробуйте изменить ситуацию, возможно, у вас возникла аналогичная проблема. (Кстати, я не пробовал никаких других тем и не исследовал, что еще доступно; если вы найдете другие работающие темы, пожалуйста, оставьте комментарий ниже.)

Сноска

1 : Очень расстраивает! Спустя чуть больше месяца с WordPress Answer, я теперь ожидаю найти ответы на все мои вопросы с тем же уровнем качества, что и здесь, и в других местах я обычно нахожу разочарование!

18
MikeSchinkel

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

В функции add_meta_box добавьте следующий код ->

wp_editor( $content, $editor_id, $settings = array() );

Везде, где вы хотите добавить редактор TinyMCE

Ссылка: wp_editor

1
ejhost

Я получил это, просто добавив "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>
0
Markus René Einicher

Редактор по умолчанию, tinymce, загружается функцией из wp-admin/includes/post.php, которая называется wp_tiny_mce (); Посмотрите в источнике в строке 1350. В строке 1478 есть массив настроек. Одна из опций, очевидно, обозначает селектор textarea, к которому следует применить редактор javascript. Я читал этот пост Keighl в своем блоге, который указал мне на это. Прочитайте статью, и, возможно, есть способ вызвать wp_tiny_mce () в плагине раздела администратора и применить его ко второй создаваемой вами текстовой области.

0
kevtrout