Как показать HTML внутри Intro.js Intro вместо простого текста? ⇐ Php

[Anonymous]

Я работаю над проектом Symfony с использованием EdyAdmin. У меня есть объект страницы, которая содержит коллекцию пошаговых сущностей. Каждый шаг имеет поле, называемое Intro, где я хочу сохранить и отображать код Extube Iframe Iframe.

Код: Выделить всё

yield CollectionField::new('steps', 'Steps')
->setEntryType(IntroStepType::class)
->allowAdd()
->allowDelete()
->renderExpanded()
->addJsFiles(Asset::fromEasyAdminAssetPackage('field-text-editor.js')->onlyOnForms())
->addCssFiles(Asset::fromEasyAdminAssetPackage('field-text-editor.css')->onlyOnForms());

< /code>
и мой пользовательский тип формы для «шагов» выглядит так: < /p>
class IntroStepType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder
->add('title', TextType::class, [
'label' => 'Title',
])
->add('element', TextType::class, [
'label' => 'Element',
])
->add('intro', TextEditorType::class, [
'label' => 'Instructions',
]);
}

public function configureOptions(OptionsResolver $resolver): void
{
$resolver->setDefaults([
'data_class' => Step::class,
]);
}
}
< /code>
Проблема: < /p>
Я могу ввести код utube uframe в поле Intro через текстовый редактор в Edyadmin, но при просмотре страницы детализации iframe не отображается как HTML. Вместо этого он показывает как простой текст. < /P>
Это мой контроллер стимула, где я загружаю данные в: < /p>
import { Controller } from '@hotwired/stimulus';
import introJs from 'intro.js';
import '../vendor/intro.js/introjs.css';

export default class extends Controller {
async connect() {
this.intro = introJs();

this.baseOptions = {
showBullets: false,
showPrevButton: true,
nextLabel: 'Next',
prevLabel: 'Previous',
};

this.intro.setOptions(this.baseOptions);

const params = new URLSearchParams(window.location.search);

if ('true' === params.get('tutorial')) {
await this.startTutorial();
}
}

async startTutorial() {
const path = encodeURIComponent(window.location.pathname);

try {
const response = await fetch(`/tutorial?path=${path}`);

if (!response.ok) {
console.error('Error loading tutorial data:', response.status, response.statusText);

return;
}

const data = await response.json();
if (!data.steps?.length) return;

const steps = data.steps.filter(step => !step.element || document.querySelector(step.element));
if (steps.length === 0) return;

const options = {
...this.baseOptions,
steps,
doneLabel: data.next ? 'Next' : 'Done',
};

this.intro.setOptions(options);

this.intro.oncomplete(() => {
if (data.next) {
const nextUrl = new URL(window.location.origin + data.next);

nextUrl.searchParams.set('tutorial', 'true');

window.location.href = nextUrl.toString();
} else {
this.removeTutorialQueryParam();
}
});

setTimeout(() => this.intro.start(), 100);
} catch (error) {
console.error('Network error:', error);
}
}

removeTutorialQueryParam() {
const url = new URL(window.location);

url.searchParams.delete('tutorial');

window.history.replaceState({}, document.title, url);
}
}

Любые советы или примеры очень ценятся.

Подробнее здесь: https://stackoverflow.com/questions/796 ... plain-text