james
  • 0
Учитель

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

  • 0

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

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

    • 0
  2. Скажем, ваш пользовательский тип записи называется 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 и визуального редактирования, а также команд вставки мультимедиа, которые есть в обычном редакторе сообщений. Переключение режимов, по-видимому, определяется как функция, первым аргументом которой является идентификатор, но, тем не менее, он также закодирован в скрипте wp-tinymce. Для этого можно использовать встроенные функции tinyMCE, но это меняет текстовое поле между полным tinyMCE и базовым текстовым полем без каких-либо кнопок вставки WP HTML.

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

    К сожалению, затем я застрял, потому что мне нужно было изменить макет со стандартного на более простой и меньший, поскольку мне нужно было использовать TinyMCE в боковом метабоксе. Я искал решение практически везде, особенно на MoxieCode TinyMCE Wiki и TinyMCE Tips & How To Forum, и ничего не нашел! 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 я теперь ожидаю найти ответы на все свои вопросы такого же уровня качества, как здесь, и в других местах я обычно нахожу разочарование!

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

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

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

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

    Ссылка:wp_editor

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

    • 0
  6. Я получил это, просто добавив «редактор» в качестве атрибута класса в текстовую область:

    <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

Оставить ответ

You must login to add an answer.