Nano Hash - криптовалюты, майнинг, программирование

Изображения Tinymce автоматически обертываются тегом ‹p›. CSS способы обхода или хаки текстового редактора

Привет,
Я много раз сталкивался с этой проблемой, используя drupal или wordpress, где мои файлы конфигурации tinymce слишком умело абстрагированы.

Проблема в том, что tinymce автоматически оборачивает мои теги <img> в теги <p>. Если есть способ обойти это в Wordpress или Drupal, это было бы здорово.

Моя проблема существует, когда я хочу сделать что-то подобное

<style>
    img {
        float: left;
    }
    p {
        float: right;
        margin-right: 20px;
        width: 400px;
    }
 </style>

и я хочу, чтобы мой код выглядел так

<img src="some_png.png" />
<p> Imagine a lot of lipsum text.</p>

но тинимс делает это

<p><img src="crap_im_wrapped_in_a_paragraph.png" /></p>
<p> Imagine a lot of lipsum text.</p>

Я пытаюсь разместить изображение слева от абзаца с заданной шириной, не ограничивая ширину самого изображения.
в этом случае родительский элемент изображения затем получает ширину и плавающее положение вправо. Это не то, что я хочу.

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

1 предостережение ...
Единственная причина, по которой существует эта проблема, заключается в том, что я хочу, чтобы клиенты могли легко выполнять собственное редактирование, поэтому я не буду просто заставлять их оборачивать изображение в <div> вместо <p>. Мне это кажется нелогичным для моих клиентов, которые на самом деле являются пользователями wysiwyg

Предыдущее решение
Я использовал регулярное выражение для удаления тегов абзацев, но это всегда почему-то проблематично. В конечном итоге я добавляю больше изображений где-то еще, тогда мне нужно продолжать настраивать свое регулярное выражение, чтобы игнорировать их. 502 ошибки предостаточно!

мой вопрос (вопросы):
Что я могу сделать в моем CSS, чтобы изображение, заключенное в абзац, делало то, что я хочу?
и могу ли я ' t
Что я могу сделать, чтобы этот абзац исчез в Drupal или Wordpress?

- Изменить - решение должно быть совместимо с IE7 + и современными браузерами. :П

Спасибо!
aaron



Ответы:


1

Если вы не хотите, чтобы теги изображений были обернуты, поищите в исходном коде Tinymce функцию под названием «isBlock». Существует тест белого списка регулярных выражений, который определяет, является ли элемент блочным. Если вам нужно, чтобы теги изображений обрабатывались как элементы блока, добавьте «IMG» в список имен узлов, которые он ищет. Мне просто пришлось сделать это самому, сейчас я все еще ищу негативные побочные эффекты, но это решает насущную проблему.

РЕДАКТИРОВАТЬ: Это было более или менее временным решением, если вам просто нужно остановить обертывание блоков корневого уровня тегов изображений, есть функция под названием «forceRoots», где вы действительно захотите выполнить проверку тега изображения. Я сделал это, изменив эту строку кода:

if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8)) {

чтобы выглядеть так:

if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8) && nx.nodeName.toLowerCase() != "img") {

Для меня это решает проблему.

01.06.2011
  • Мне повезло, что мне больше не нужно использовать TinyMCE, поэтому, к сожалению, я, вероятно, никогда не смогу протестировать эти решения. Ответ идет большинству голосов. 14.07.2012
  • Чтобы применить это изменение в tinyMCE4, найдите blockElementsMap = createLookupTable ('...') и добавьте img в список элементов блока. Я не тестировал на побочные эффекты! 30.01.2015

  • 2

    Вы вызываете tinyMCE с помощью функции tinyMCE.init, не так ли?

    Так что добавьте к нему эту строку:

    forced_root_block : false,
    

    Также вы можете изменить tiny_mce_src.js. Находить

    forced_root_block : 'p',
    

    и измените его на

    forced_root_block : false,
    

    P.S. Не забывайте очищать кеш.

    11.07.2011
  • Документы TinyMCE говорят: если вы установите для этого параметра значение false, он никогда не будет P-теги при вводе или автоматически вместо этого будут создаваться элементы BR, а Shift + Enter будет создавать P. Обратите внимание, что не использование элементов P в качестве корневого блока может серьезно подорвать функциональность редактора. Может быть, для кого-то это нормально, но используйте на свой страх и риск! 30.01.2015

  • 3

    Если мы говорим о сайте WordPress, есть раздражающий фильтр, который автоматически обертывает некоторые элементы в содержимом тегом ‹p› под названием wpautop. На самом деле это обрабатывается wordpress во время выполнения, а не TinyMCE.

    Добавьте это в начало вашего шаблона или файла functions.php:

    <?php remove_filter('the_content', 'wpautop'); ?>
    

    источник:
    http://wordpress.org/support/topic/stop-wordpress-from-adding-p-tags-and-removing-line-break

    09.08.2011

    4

    В Drupal одним из видов «клудейского» способа сделать это было бы использование hook_nodeapi () или эквивалента (ов) d7 для отображения узлов, а также использование регулярного выражения для замены p-обернутых изображений, встречающихся в начале поля. Вы должны будете сообщить своему клиенту, что они не будут выглядеть правильно при редактировании, но что на дисплее они будут отображаться правильно.

    Если вы ищете вариант css:

    В css2 у вас есть селектор: first-child, а в css3 также есть селектор: only-child. p: first-child img можно использовать с отрицательными полями для смещения полей, которые вы объявили для элементов p. Обратной стороной будет то, что это также наложит те же отрицательные поля на любые изображения, которые клиент может поместить в первый абзац. css3 может не поддерживаться во всех браузерах, которые вы хотите охватить, но если вы можете его использовать, вы можете использовать селектор: only-child для изображений, которые являются единственными дочерними элементами элементов p, смещая поля родительского элемента p отрицательными полями.

    28.04.2011
  • Как я уже отмечал выше, раньше я использовал старый трюк с регулярным выражением. Это именно то, чего я пытаюсь избежать. Я думал, что селектор: first-child не так поддерживается, как есть. Похоже, он будет работать даже с IE7. Проблема все еще в том, что очень возможно, что я не буду работать с первым потомком и пока не хочу использовать селекторы CSS3. +1 хотя спасибо 28.04.2011
  • Я не виню вас за то, что вы хотите избежать взлома регулярных выражений. Я предполагаю, что вероятно: first-child будет достаточно хорош для большинства посетителей вашего сайта ... хотя у него есть недостатки для изображений, содержащихся в первом абзаце, когда там присутствует текст. Удачи! 28.04.2011

  • 5

    Если Javascript - это вариант, вы можете использовать jQuery для повторного родителя img, чтобы он стал братом p. Что-то вроде этого (непроверено)

    $("p > img").each(function () {
      var $this = $(this);
      var $p= $this.parent();
      $p.before($this);
    });

    Добавьте логику только к тем абзацам / изображениям, которые вам действительно нужны.

    Уродливо, да, но жизнеспособное решение в крайнем случае.

    29.04.2011
  • я бы сделал эту последнюю строчку $p.before($this).remove();: O 29.04.2011
  • Да, в вашем случае это может быть целесообразно. Однако я бы не стал делать этого в этой функции. Более общим решением были бы отдельные вызовы для удаления всех пустых абзацев и всех абзацев, состоящих исключительно из. И то, и другое довольно часто случается с TinyMCE. 30.04.2011

  • 6

    Добавьте эту строку:

    theme_advanced_blockformats : "p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp"
    

    Если вы хотите вставить img, выберите div:

    <div>
        <img src="my_img.jpg>
    </div>
    

    Не нужно ничего изменять с помощью css.

    16.03.2012

    7

    TinyMCE 4 оборачивает все в блочные элементы. Оберткой по умолчанию является P. Щелкните изображение и выберите другой элемент оболочки, например DIV. Чтобы добавить DIV в меню, добавьте его в functions.php:

    function make_mce_awesome( $init ) {
      $init['block_formats'] = "Paragraph=p; Heading 1=h1; Heading 3=h3; Heading 2=h2; Preformatted=pre; Media=div";
    return $init;
    }
    
    add_filter('tiny_mce_before_init', __NAMESPACE__ . "\\make_mce_awesome");
    

    Обертка DIV вокруг изображения

    14.07.2015

    8

    Есть опция "valid_children" https://www.tiny.cloud/docs/configure/content-filtering/#valid_children. Он контролирует, какие элементы вы запрещаете (-) или разрешаете (+) заключать тег img в оболочку.

    Этот пример предназначен для - не позволяя тегу img быть дочерним по отношению к p и h1-4 - позволяя тегу img быть дочерним по отношению к div и span

    tinymce.init({
    valid_children : '-p[img],h1[img],h2[img],h3[img],h4[img],+div[img],span[img]'
    });
    
    13.05.2019

    9

    Боюсь, что это невозможно из-за того, что img является встроенным элементом. Tinymce оборачивает все, что пользователь вводит, в элементы блока (divs или p-tags), но img не является блочным элементом.

    28.04.2011
  • Я читал это раньше и этот другой вопрос (stackoverflow.com/questions/2402761/), похоже, подразумевает, что теги img являются встроенными элементами или блока. Но ведите себя скорее как встроенные элементы. Так что тинимце было бы не правильно обернуть изображение во всех случаях. Просто в большинстве случаев. 28.04.2011
  • Я думаю, что можно определить, как tinymce обрабатывает img-теги. это может сработать, чтобы отключить принудительный_корневой_блок 29.04.2011
  • как вы можете видеть из моего комментария выше, я знаю о Force_root_block, но не знаю, как реализовать его в Wordpress или Drupal. Ты знаешь как? 29.04.2011
  • да, посмотрите это руководство о том, как установить параметры tinymce init в wordpress: lucidgreen. net / webbybooth /? p = 11 29.04.2011
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

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

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..