Так может выглядеть редактор в новой версии WordPress

    Вот уже более десяти лет, для того, чтобы редактировать содержимое сайта на WordPress, приходится заходить в панель администрирования, но в скором времени это должно измениться. Группа разработчиков WordPress принялись за работу над возможностью создавать и редактировать контент прямо «на лету» в вашей теме WordPress.

    Работа с контентом в теме Twenty Twelve



    Подобный подход уже давно применяется в некоторых онлайн продуктах, например сеть Medium и платформа Squarespace, но реализовать это в WordPress гораздо сложнее, чем кажется на первый взгляд — ведь WordPress хорошо знаменит своей обратной совместимостью, и для WordPress уже написано десятки тысяч тем оформления.

    Расширенный режим редактора

    В качестве редактора в WordPress уже несколько лет используется популярная библиотека TinyMCE — самый гибкий и надёжный визуальный редактор для веб на сегодняшний день. Отказ от него в WordPress не планируется, а наоборот — новая версия TinyMCE 4.0 очень хорошо вписывается в текущие задачи и не является преградой для реализации задуманного в будущем.

    Работа с метками

    В новом редакторе планируется поддержка меток, категорий, форматов записей. Планируется так же возможность полноценной работы с медиатекой WordPress, и конечно же поддержка мобильных устройств и планшетов.

    Проект находится на стадии идеи и прототипа, который можно уже сегодя установить из директории плагинов, и вполне вероятно, что подобный редактор войдёт в ядро WordPress в будущем. Ещё одним схожим проектом является популярный плагин Front-end Editor.

    Что вы думаете о таком способе работы с содержимым в WordPress? Стали бы вы им пользоваться, или же проще продолжать работать в уже привычном нам редакторе?

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 40

      0
      TinyMCE работая в iframe не мог иметь полосы прокрутки в iOS, теперь это исправили?
        0
        У меня нет ответа на ваш вопрос, настолько глубоко в TinyMCE 4.0 я не копал :(
          0
          насколько я помню у tinyMCE уже давно нету проблем с тем что бы он работал без iframe.
          +5
          Не знаю, меня вполне устраивает редактирование в админке. Как по мне, даже более удобней и функциональней, особенно если используются различные модули, доп.поля и т.д…
            0
            С доп. полями и метабоксами согласен — сложно их будет как-то внедрить в новый интерфейс.
              –2
              Мне кажеться разработчики об этом не забудут
                0
                ну на самом деле можно воспользоваться верхней панелью, просто при необходимости она будет раскрываться на весь экран… ну это как вариант.
              0
              Когда ещё разрабатывал на WordPress, юзали плагин Front-end Editor. Достаточно удобно было.
                +3
                Способ удобный, но вообще не понимаю, почему вы его преподносите чуть ли не как киллер-фичу. Помимо перечисленных продуктов, этот подход применяется еще в паре десятков других. В том же б-триксе, где в большинстве случаев шаблоны делаются индивидуально под проект, визуальное редактирование работает на каждом из них.
                  0
                  Про Битрикс, к сожалению, ничего сказать не могу, но как я и упомянул, сама идея не является новшеством. Плагин Front-end Editor для WordPress появился ещё в 2009 году, а первый раз я что-то подобное увидел наверное в Macromedia Contribute миллион лет назад.
                    0
                    эээ… а где написано про уникальность и «киллерность»?
                    0
                    Мне одному эта идея напоминает concrete5 или нет?
                      0
                      это не только в concrete5
                      0
                      В принципе, неплохая задумка, и она бы понравилась конечному пользователю. Но она почти наверняка не будет работать с темами, которые не соблюдают стандарты разметки Wordpress — а таких тем большинство, не считая дефолтных. А если тема делалась под конкретный проект — то там вообще почти никто не придерживается никаких стандартов. Знаю, т.к сам Wordpress — разрабочик :-)
                        0
                        Именно это и является самой сложной задачей в реализации подобного редактора :)
                        +1
                        Я писал такое еще лет 7 назад, и оно работает на удивление и сейчас. d.pr/i/EjfU

                        Конечно я на это уже забил, но написал новый редактор, который как раз и хотел так использовать в своих проектах. На удивление сложного тут ничего не оказалось, главное чтоб редактор умел работать с div а все дальнейшее сохранение не так и сложно. Хотя нужно признать у меня не было реализовано добавления новых материалов, только редактирование.
                          0
                          Tarya, интересно! А где-нибудь можно посмотреть подробнее ваше решение — плагин или может быть просто наброски кода остались?
                            +1
                            В общем решение тут очень простое. Код вам давать не буду так как нет смысла, я тогда еще и писать не умел, но переделал редактор которым тогда фанател Widgeditor.

                            Сама работа очень простая. Когда вы готовите на выход какой то документ, там у вас например есть какие то блоки которые нужно редактировать. Вы например в своем проекте суете в div#content статью, в div#extra анонс или что угодно. И нужно чтоб все это редактировалось. Разумеется получается что все это берется из базы данных, данные лежать по полям. Получается перед тем как я все это размещал, в эти слои на сайте проверял пользователь ли админ, и добавлял в поле некоторые данные, как я сейчас погдялел я даже обрамлял свои данные еще одним блоком и писал его так «div lang=»content-content-724-text" class=«liveedit»". И тут все просто. Когда вы на фронтэнде заходите то у вас все данные обрамлены такими блоками. Далее у меня там две кнопки есть d.pr/i/4UQV активировать редактирование, и активировать сортировку данных в списках (меню, картинки). При нажатии активация редактирования я просто подсвечивал все поля с классом liveedit — d.pr/i/qpqE на выходе подсвечиваются рамкой все что можно редактировать. Подносишь мышку появляется кнопка как на картинке, нажав которую на этом блоке развернется редактор. Редактор можно использовать любой что сейчас есть в сети который может работать с дивами. Сейчас у меня полностью написанный с нуля мой редактор личный d.pr/i/46kE я его под это и затачиваю. Так вот когда вы поредактировали нажимаете сохранить, и у вас на скрипт через ajax улетают данные, в которых и прописано content-content-724-text это мои лично значения, «тип документа-модуль-айди-поле в базе», по ним я поднимаю в скрипте документ 724 и обновляю поле text. Ну в общем такое. «Тип документа» для того что есть просто текстровые блоки на сайте, а есть A.href линки, по этому идентификатору я чуток иначе строю редактор чтоб изменять только текст, но не трогать линк.

                            Сортировка что я написал выше тоже удобна, на основе jquery.ui там есть виджет сортировок, так же само, только люди переставляют руками сортировку докуметов, а на скрипт улетают значения айди и обновляются в поле сортировки.

                            Примерно так.

                              0
                              Интересно, а как быть, когда в этот же блок с контентом, плагин добавляет социальные кнопки, или схожие записи, или биографию автора. Многие ведь подобные плагины именно к фильтру the_content подключаются. Получается ваше решение включит (или попытается включить) все эти дополнительные данные в редактор? Не сталкивались с этим?
                                0
                                Такого быть не может. Вот например у вас в CMS вы добавляете статью. Вы там заполняте «Заголовок статьи», «Описание», «Контент статьи». Это же вы пишите не в одно поле сплошным текстом. Разбиваете же по полям title, desc, content. А когда вы строите статью уже на сайте то пишите там чтото такое «h1 $title /h1». И так далее, и получается что только эту переменную вы и обрамляете оберткою, она и будет знать где начало и где конец того что править. Социальные кнопки и все остальное лишнее у вас же не встраивается непосредственно в сам текст, посреди же заголовка не будет же социальной кнопки. Потому работает все четко. Лично я не замечал ничего такого.

                                Тип контента я вспомнил нужен для того чтоб например у вас на сайте выведен заголовок статьи через h1. H1 это не то что берется в редакторе, а вы сами его рисуете а в внутрь вставляете данные из переменной. И для того чтоб пользователь ошибочно не поменял H1 на H2 или не сделал список для того и подгуржаются разные редактора с разными настройками, где разрешается делать правки html и где нет.
                                  0
                                  > Социальные кнопки и все остальное лишнее у вас же не встраивается непосредственно в сам текст

                                  Так это не от вас зависит, а от плагинов, которыми вы пользуетесь, например Jetpack Sharedaddy, который при выводе the_content просто добавляет блок в конце. Многие другие плагины работают подобным образом. Похожая ситуация возникает с шорткодами — если у вас есть шорткод для отображения блока голосования посреди вашего контента, как отреагирует на него ваш редактор? Вам ведь тогда придётся выводить «необработанный» контент в чистом виде, а поверх него этот же контент только уже с обработкой, чтобы при изменении в редакторе появлялся именно оригинал.
                                    0
                                    Мне сложно ответить вам, так как те кнопки которые использую я вставляются туда куда я хочу. То есть в конце блока текста. Потому они ничего не трогают и не как не мешают.
                          +1
                          А мышью ерзать от низа экрана к верху это новая мода? Поехал вверх, нажал New, поехал вниз, нажал Captions, поездил центр-боттом еще раз 100 пока написал пост, поехал вверх и сохранил. Одному мне это кажется неудобным?
                            0
                            Там вроде ж внизу только категории, теги, медиа и линк. К ним не так часто и ездить придеться, да и в админе при редактировании поста эти элементы разбросаны по странице.
                              0
                              Теги и категории обычно устанавливаются после написания записи перед сохранением или публикацией, так что смысл держать их внизу рядом с кнопкой «Сохранить» думаю смысл есть. Вот с медиатекой конечно согласен — она стала слишком далеко от содержимого и от блока форматирования.
                              0
                              Поставил плагин — ничего не изменилось, как его заставить работать? WP 3.6.1
                                0
                                Нужно чтобы был установлен и активен ещё плагин MP6, затем после активации WordPress Front-end Editor (в моём случае версия 0.3). Активируйте тему Twenty Eleven, зайдите на главную где у вас список записей откройте любую запись и нажмите «редактировать» — у вас откроется новый редактор.
                                  0
                                  Проблема была в том, что у меня верхняя панель отключена в настройках профиля — а так все работает
                                    0
                                    работает только в Twenty Eleven?

                                    установил и активировал оба плагина — изменений не вижу, тема не дефолтная…
                                      0
                                      К сожалению в настоящее время да, только с Twenty Eleven.
                                  0
                                  Хоть и постоянно обновляю WP — постоянно приходится чистить от вредоносов.
                                    0
                                    Возможно вы имеете дело с вредоносными плагинами или бесплатно скаченной «премиум» темой? А может быть у вас пароль очень слабый и легко подбирается? А может в вашем FTP клиенте сидит червь? Нельзя винить во всём движок :) см. Основы безопасности WordPress.
                                      0
                                      Но и в самом вордпрессе дыр хватает. Хотя, конечно, в плагинах и левых темах их на порядки больше, чем в ядре.
                                        0
                                        да неправда. Сам вордпресс с адекватными паролями — взломать практически анрил. Если ломают то через дырки в плагинах и шаблонах
                                    0
                                    Выглядит привлекательно.
                                    Кстати, в восьмой версии Drupal что-то похожее уже реализовали, называется Drupal Spark. Как это выглядит можете посмотреть здесь: habrastorage.org/storage3/2d3/dd0/fcb/2d3dd0fcbd90ba1b3169db78e4f15797.png
                                      0
                                      Спасибо за ссылку!
                                      +2
                                      CKEditor имеет такой функционал «из коробки»: ckeditor.com/demo#inline
                                        0
                                        +1. Ещё интереснее contenteditable в HTML5: html5demos.com/contenteditable
                                          0
                                          Возможно я расскажу вам страшную тайну, но большинство wysiwyg редакторов, в том числе и tinyMCE и ckeditor используют contentEditable вместо designMode. Но от этого жить не легче.
                                        0
                                        в проектах yii использую Imperavi redactor. В нем есть автомасштабируемость высоты окошка редактора по тексту. Очень удобно. В водпрессе задалбливало проматывать окошко на пол экрана чтоб свойства например выставить внизу. Понятно что можно сжать там окошко, но тексты разные и в 2 строки и в 200. Устанешь :)

                                        Only users with full accounts can post comments. Log in, please.