• Решено SeVlad

    (@sevlad)


    Пытаюсь написать плагинчик добавляющий размеченный текст в контент.
    Для удобства юзера — заполнение полей по копке в редакторе.

    Но возникает непонятная проблема со вставкой результата в пост. Функция вставки:

    onsubmit: function( e ) { 
       editor.insertContent( '<p style="reference"><div class="external-reference"><div class="external-reference-body">' + e.data.refbody + '</div><div class="external-reference-name">' + e.data.refname + '</div><div class="external-reference-source">' + e.data.refsource + '</div></div></p>');
    									}

    Проблема: параграф (p) или теряется (если делать как выше) или же, если стили прописать явно (напр <p style="text-align: justify">) смещается вниз. Причём только один раз под все вставки, если их сделать несколько.
    Т.е. в итоге получаю след:

    <div class="external-reference">
    <div class="external-reference-body">Упал сервер</div>
    <div class="external-reference-name">Вася</div>
    <div class="external-reference-source">газета</div>
    </div>
    <div class="external-reference">
    <div class="external-reference-body">Разбили окно</div>
    <div class="external-reference-name">Соседка</div>
    <div class="external-reference-source">Лавочка</div>
    </div>
    <p style="text-align: justify"></p>

    Я где-то накосячил или кто виноват и как решить?
    Нужно обрамить каждую вставку параграфом, иначе в виз.режиме происходит циклическая вложенность вставляемых блоков (новый вставляется перед последним дивом)

    Полный код кнопки: http://pastebin.com/aqF8uChG

    • Тема изменена 8 лет назад пользователем SeVlad.
    • Тема изменена 8 лет назад пользователем SeVlad.
    • Тема изменена 8 лет назад пользователем SeVlad.
Просмотр 3 ответов — с 1 по 3 (всего 3)
  • Автор SeVlad

    (@sevlad)

    Как оказалось даже простейший код

        (function() {
            tinymce.PluginManager.add('ref_mce_button', function( editor, url ) {
                editor.addButton( 'ref_mce_button', {
                    title: 'Кнопка',
                    icon: 'icon dashicons-before dashicons-carrot', 
                    onclick: function() {
                        editor.insertContent('<p class="mystyle"><div class="mydivstyle">тект</div></p>');
                    }
                });
            });
        })();
    

    при многократной вставке работает некорректно:

    
    <div class="mydivstyle">тект</div>
    <div class="mydivstyle">тект</div>
    <div class="mydivstyle">тект</div>
    <p class="mystyle"></p>

    Т.е. параграф вставляется не после каждого дива, как прописано, а после всех.

    Если же не прописывать стили элементов, то параграф удаляется вообще и при многократной вставке получиться такой ужас:

    <div>тект
    <div>тект
    <div>тект
    <div>тект</div>
    </div>
    </div>
    </div>

    ЗЫ. В js-код выше вкралась ошибка: вместо <p class="reference"> в запарке осталось <p style="reference">. Но тем интереснее поведение редактора — параграф в этом случае удаляется вообще.

    • Ответ изменён 8 лет назад пользователем SeVlad. Причина: добавил
    • Ответ изменён 8 лет назад пользователем SeVlad.
    Модератор Sergey Biryukov

    (@sergeybiryukov)

    Live and Learn

    <p class="mystyle"><div class="mydivstyle">тект</div></p>

    <div> не может находиться внутри <p>, это противоречит стандартам:
    http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it

    Автор SeVlad

    (@sevlad)

    <div> не может находиться внутри <p>, это противоречит стандартам:

    Если не вставать p, то курсор остаётся внутри div. И след. вставка в виз редакторе (вообще чего бы то ни было) будет не после блока, а внутри:

    <div>тект
    <div>тект
    <div>тект
    <div>тект</div>
    </div>
    </div>
    </div>

    И без переключения в текст и переноса в нём из этого никак не выйти. Это и была основная проблема. И ради того, чтобы это пофксить div-ы были взяты в p.

    Сейчас проделал ещё неск экспериментов и выяснилось, что при вставке пустого параграфа <div>тект</div><p></p>, на выходе имеем параграф с неразрывными пробелом:

    <div>тект</div>
    &nbsp;
    <div>тект</div>
    &nbsp;
    <div>тект</div>
    &nbsp;
    <div>тект</div>
    &nbsp;

    Если же вставить с параграф с неразрывными пробелом <div>тект</div><p>&nbsp;</p>, то он не печатается, но хотя бы происходит перенос.

    
    <div>тект</div>
    <div>тект</div>
    <div>тект</div>
    <div>тект</div>
    &nbsp;

    Т.е. происходит ровно наоборот и только в конце вставляется параграф с пробелом.
    (как же плохо, что p, если он без стилей, в текст редакторе не печатается. Такой избирательный подход к тегам — неправильно я считаю).

    Ок, в принципе задачка решена, но поведение редактора всё же странно.

Просмотр 3 ответов — с 1 по 3 (всего 3)
  • Тема «Некорректность ВП, TinyMCE или ошибка в js?» закрыта для новых ответов.