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


27

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


Какая конфигурация WYSIWYG вам нужна? Полная панель вкл. загрузка изображений, полноэкранный режим и т. д.?
Хакре


У Бюлтге есть хорошая статья, которая показывает, как это можно сделать: wpengineer.com/1991/example-how-to-add-meta-boxes-to-edit-area
Хакре,

Мне нужен именно этот вопрос для ответа клиентского проекта. Спасибо за вопрос!
MikeSchinkel

MikeSchinkel - я новичок в WordPress; где я могу разместить код, который вы разместили?

Ответы:


21

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


"Meta_boxen"? Потрясающе! Я думал, что я был единственным. Скоро попробую решение.
mfields

Решение Томаса Макдоналдса не работает для меня в 3.1 - есть ли способ в 3.1 сделать это?

19

Во- первых: Большое спасибо к @Thomas Макдональд для его ответа ; Мне нужно было выяснить точно такой же вопрос, который задал @Paul Sheldrake, и код Томаса помог мне начать в правильном направлении.

К сожалению, я застрял, потому что мне нужно было изменить макет по умолчанию на более простой и меньший макет, поскольку мне нужно было использовать TinyMCE в боковом метабоксе. Я искал практически везде решение, особенно на форуме TipsMiki Wiki и TinyMCE TipsMCE Wiki и TinyMCE, и ничего не нашел! 1 Все , что я нашел объяснил , как набор theme, width, heightи т.д. , используя , tinyMCE.init({...})но , очевидно , вы не можете использовать , что при использовании tinyMCE.execCommand("mceAddControl").

Я о озадачен , когда я наткнулся на статью многократным TinyMCE 3 экземпляров на одной странице с помощью Гамильтона Чуа , и он прибил его! Его решение было назначить 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 именно в том формате / макете, который нужен моему клиенту:

Несколько текстовых областей TinyMCE в редакторе администратора WordPress 3.0
(источник: mikeschinkel.com )

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

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

сноска

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


Майк, тебе не хватает равных после, $scriptа также нет закрытия для твоего наследственности, т.е. EOT;, Помимо небольших ошибок, это хороший рабочий пример ..;)
t31os

@ t31os - Спасибо, что сообщили мне об этом. Не уверен, как я скучал по этим; Я обычно проверяю, а затем копирую свои ответы из своего рабочего кода. Пойди разберись!
MikeSchinkel

использование этого решения привело к тому, что для меня в 3.1 был установлен обычный визуальный редактор SimpleLayout.
Mfields

@mfields - Облом, что 3.1 сломал так много вещей. :-(
MikeSchinkel

Хотел обратить ваше внимание на эту статью, так как она может прояснить некоторые вещи: dannyvankooten.com/450/…
marfarma

2

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

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

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

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

Ссылка: wp_editor


1
Ответы должны быть не просто ссылками . На самом деле это должен быть ответ, а не маршрут, по которому кто-то может найти ответ. Пожалуйста, помогите не допустить гниения ссылок, отредактируйте свой ответ и предоставьте необходимую информацию, которая поможет ОП, а также посетителям позже решить их проблему.
Кайзер

0

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


0

Я получил это, просто добавив «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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.