Блог

Я хочу создать ссылку на кнопку на моем сайте, которая открывает папку с кодом в чем-то вроде Visual Studio Code online, с боковой панелью. Я нашел Plunker, и он выглядит великолепно.

У меня есть простой шаблон веб-сайта, который представляет собой папку с типичными файлами, например index.html а также css и javascript. Я хочу, чтобы люди могли создавать сайт из шаблона одним нажатием кнопки, входить в систему и сохранять свои изменения, а также сотрудничать с другими. Также было бы здорово отслеживать изменения.

В конечном итоге я хочу внедрить его на свой собственный сайт, но я решил, что начну с установленного онлайн-инструмента.

На случай, если есть что-то особенное, связанное с веб-картами, я использую MapBox GL.

Кто-нибудь знает что-нибудь?

Встроенная версия Plunker может принимать POST отредактированную форму, чтобы вы могли динамически настраивать редактор с пользовательскими файлами. Пример этого можно найти здесь.

В качестве альтернативы я создал мини-SDK для Plunker, чтобы помочь создавать такие динамические встраивания, которые публикуются в npm и источник которых находится на GitHub.

 <script src="https://cdn.jsdelivr.net/npm/@plnkr/sdk@1.0.0-pre.1/dist/index.js"></script>
<div id="embed"></div>
<script>
  const { showDynamicEmbed } = window['@plnkr/sdk'];
  
  // Generate the files for the dynamic plunk. This could easily
  // be generated on the fly by your application.
  const files = [
      {
          pathname: 'index.html',
          content: '<h1>Hello world</h1>',
      },
  ];

  showDynamicEmbed(
    {
        files,
        title: 'Hello world example',
        tags: ['hello', 'world'],
    },
    {
        deferRun: true, // Don't immediately run the preview
        show: ['index.html', 'preview'], // Open the index file and preview panes
        parentEl: document.getElementById('embed'), // Mount the embed in the #embed element
    }
  );
</script>  

По крайней мере, что-то понял:

Создайте новую страницу или «Plunk» в plunker, а затем сохраните ее и используйте ссылку на нее. Если пользователи хотят использовать шаблон, они могут нажать кнопку «fork» и сохранить его в своей учетной записи. Не совсем понятно, как просмотреть историю версий.