Как реализовать предварительный просмотр миниатюр, таких как vscode live preview
Я работаю над редактором на основе grapesjs
Я хотел бы сделать функцию предварительного просмотра. как Visual Studio живой предварительный просмотр.
Моему клиенту требовалась функция, позволяющая пользователю предварительно просмотреть небольшое изображение своего рабочего холста, например, предварительный просмотр кода.
Вы можете увидеть красное поле на нижнем изображении. но я не могу догадаться, как реализовать функцию предварительного просмотра.
Я просто думаю, используя iframe или что-то в этом роде. но я не могу убедить это.
кто-нибудь знает это? Пожалуйста, помогите мне.
1 ответ
По сути, вам просто нужно отразить содержимое на другой элемент, который следует тем же правилам стиля, что и основной контент, но настроить его так, чтобы он был меньше. Код Visual Studio работает на основе веб-технологий, и вы упомянули об использовании iframe, поэтому все, что я могу сказать, это то, что CSS станет вашим лучшим другом в этой ситуации.
Когда содержимое вашего редактора изменится, обновите мини-карту (так ее называет код Visual Studio)
Описание мини-карты для визуального кода студии
Реализацию кода Visual Studio можно найти, он просто похоронен под множеством шаблонов Electron, и я, к сожалению, не знаком с фреймворком, поэтому я не могу копать глубже, чем предоставление ссылки GitHub на файлы, которые составляют их реализацию мини-карты.