TinyMCE — Как добавить предварительный просмотр продукта в текстовом редакторе, используя бесплатные параметры панели ин ⇐ Php

[Anonymous]

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

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

Test



form {
width: 1000px;
margin: auto;
}

form .row {
padding: 10px 0;
}

form .row label {
display: block;
padding: 5px 0;
}

form input[type="submit"] {
margin: 20px 0 0 0;
}


tinymce.init({

selector: 'textarea',
menubar: false,
statusbar: false,
plugins: 'table lists link image media codesample fullscreen code',
toolbar: 'undo redo | bold italic underline | fontsizeinput forecolor | alignleft aligncenter alignright | numlist bullist | table | link unlink | image media | codesample code fullscreen',
language: 'it',
link_default_target: '_blank'

});






Titolo


Testo

Среди опций, доступных бесплатно на панели инструментов TinyMCE, я нашел инструмент исходный код, с помощью которого я могу добавить предварительный просмотр продукта с помощью тега iframe
Параметр панели инструментов исходного кода
Однако я не хочу отображать предварительный просмотр продукта в iframe, а собираюсь добавить его в текстовый редактор с помощью его шаблон (get-product-preview.php)

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

.product {
display: inline-block;
border: 1px solid black;
}

.product h2 {
margin: 0;
padding: 5px;
background-color: gray;
color: white;
}

.details {
margin: 20px 0 0 0;
padding: 5px;
display: flex;
gap: 40px;
align-items: center;
}

.details img {
width: 200px;
}

.details .price {
display: inline-block;
padding: 10px;
background-color: green;
color: white;
font-size: 20px;
font-weight: 500;
}




[img]prodotti/

Подробнее здесь: [url]https://stackoverflow.com/questions/79083426/tinymce-how-can-i-add-a-product-preview-in-the-text-editor-using-the-free-tool[/url]