В определенные моменты HTML-кода мне нужно закрыть каждый открытый тег, вставить DIV, а затем снова открыть все теги, чтобы

Question

Я имею дело с HTML, который был создан с помощью FCKeditor .Так это будет выглядеть примерно так:

<p>Paragraph</p>
<ul>
<li>List item</li>
</ul>

Нет тега head, нет тега body, просто фрагмент HTML.

Я пытаюсь добавить поддержку определенных переменныхэто, когда вставлено в HTML, будет заменено динамическим контентом.Таким образом, HTML, вставленная переменная, может выглядеть так:

<p>Here's a variable: {widget}</p>

Я хочу заменить {widget} на это:

<div class="widget">Hi, I'm a widget.</div>

FCKeditor инкапсулирует содержимое (правильно) в абзацы, когда вывставить разрыв строки.Так что, если бы я сделал прямую замену, результирующий HTML-код был бы таким:

<p>Here's a variable: <div class="widget">Hi, I'm a widget.</div></p>

Это не сработает, потому что тег div находится внутри тега p.Поэтому я хочу закрыть абзац и вставить после него DIV:

<p>Here's a variable: </p>
<div class="widget">Hi, I'm a widget.</div>

Давайте рассмотрим следующий пример:

<p class="someclass">Here's a <strong>variable: {widget} more</strong> content 
after</p>

Я бы хотел получить такой результат:

<p class="someclass">Here's a <strong>variable: </strong></p>
<div class="widget">Hi, I'm a widget.</div>
<p class="someclass"><strong> more</strong> content after</p>

При каждом экземпляре {widget} во фрагменте HTML мне нужно сделать «разрыв» в HTML.Для чего нужно закрыть каждый открытый тег, вставить код виджета, а затем снова открыть их все по порядку.

Возможно ли это с помощью синтаксического анализатора PHP HTML?Если так, как бы я поступил об этом?

Answer 1

Я бы предложил совершенно другой подход.(F) CKEditor уже может делать то, что вы хотите.Просто попробуйте добавить таблицу в середине абзаца.Он закроет стек встроенных тегов, добавит таблицу и снова откроет стек.

Я предлагаю, чтобы вместо того, чтобы ваши пользователи писали {widget}, вы написали (F) плагин CKEditor, который добавляет виджетыдля тебя.Вы можете взглянуть на код кнопки таблицы (или любого другого элемента уровня блока), чтобы увидеть, как (F) CKEditor вставляет их.

Есть две вещи, которые вы можете сделать, когда пользователь нажимает на "виджет "кнопка.Или вы вставляете какой-то пользовательский тег, такой как <widget type="foo" />, или вставляете HTML-тег, который вы можете распознать позже, например <div class="widget foo"></div>.

С некоторой дополнительной консистентной смазкой вы можете даже сделать этот любитель, фактически загружаяСам виджет, завернутый в такие теги.Таким образом, пользователь будет видеть то же самое в окне редактора, что и при его сохранении.Когда редактор сохраняет на сервере, просто очистите теги, обертывающие виджет, чтобы избавиться от него.

Пример рабочего процесса (курсор помечен знаком |):

Пользователь вводит текст:

<p>foo bar| baz</p>

Пользователь нажимает кнопку «виджет»:

<p>foo bar</p>
<div class="widget foo"> ... contents of "foo" widget ... </div>
<p>|baz</p>

При сохранении отбрасывайте содержимое виджета:

<p>foo bar</p>
<div class="widget foo"></div>
<p>baz</p>

При отображении сохраненного содержимого анализируйте теги div с помощьюкласс «виджет» и динамически заполнить его:

<p>foo bar</p>
<div class="widget foo"> ... contents of "foo" widget ... </div>
<p>baz</p>

Answer 2

Это может быть сделано после обработки при сохранении с помощью регулярных выражений, если вы были довольно осторожны с тем, что разрешаете. В качестве альтернативы, я делаю немало жонглирования во внешнем интерфейсе выводом моего редактора (CKEditor), комбинируя контент пользовательского ввода и вещи, которые я вставляю между строкой и вокруг нее, которые я анализирую и проверяю.

Еще одна опция, которую нужно изучить, - это плагин BBCode, добавленный CKEditor. Будучи давним пользователем FCK и текущим пользователем CK, я могу вам сказать, что стоит потратить время на обновление. И, согласно сайту CK Developer, он претендует на то, чтобы быть встроенным. Я также нашел плагин, который позволит BBCode. Оба могут быть легко адаптированы для ваших целей.

Наконец, если вы любите приключения и уверены в себе, JavaScript-процессор может быть взломан, чтобы сделать несколько вещей. Например, CK теперь выводит со стилями, а не традиционным HTML, и мой редактор выполняет исключительно электронные письма в формате HTML, которые не очень хорошо поддерживают объявления стилей. Итак, я взломал код HTML-процессора для вывода всего с height=, width=, align= и т. Д., А не style="height=x; width=x" и т. Д.