Изображения 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>

но tinymce делает это

<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, чтобы сделать изображение, заключенное в параграфе, делать то, что я хочу?
и если я не могу Что может сделать drupal или wordpress, чтобы этот абзац исчез?

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

Спасибо!
Aaron

Ответ 1

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

EDIT: Это было более или менее временным решением, если вам просто нужно остановить блокировку блоков корневого уровня тегов изображений, там есть функция под названием "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") {

Это решает проблему для меня хорошо.

Ответ 2

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

Итак, добавьте в него эту строку:

forced_root_block : false,

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

forced_root_block : 'p',

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

forced_root_block : false,

P.S. Не блокируйте очистку кеша.

Ответ 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

Ответ 4

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

Если вы ищете опцию css:

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

Ответ 5

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

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

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

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

Ответ 6

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

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

Если вы хотите вставить img select div:

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

Нет необходимости изменять что-либо с помощью css.

Ответ 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 wrapper around image

Ответ 8

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

Ответ 9

Существует опция "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]'
});