搜索

回答

这样

800_auto

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.0.21.1.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.0.21.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-preset-webpage.1.0.2.js"></script>
  <style>
    body, html {
      height: 100%;
      margin: 0;
    }
    #gjs {
      border: 3px solid #444;
    }
  </style>
</head>
<body>
  <div id="gjs" style="height:100%;"></div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const editor = grapesjs.init({
        container: '#gjs',
        fromElement: true,
        height: '100%',
        width: 'auto',
        plugins: ['gjs-preset-webpage'],
        pluginsOpts: {
          'gjs-preset-webpage': {}
        }
      });

      // Initial content
      editor.setComponents(`
        <div>
          <p id="selectable-link">Click here to select a link</p>
        </div>
      `);

      const links = [
        { label: 'Google', value: 'https://www.google.com' },
        { label: 'Facebook', value: 'https://www.facebook.com' },
        { label: 'Twitter', value: 'https://www.twitter.com' }
      ];

      // Extend the Component Manager to add a custom trait for href
      editor.Components.addType('link', {
        model: {
          defaults: {
            traits: [
              // Replace href trait with a dropdown
              {
                type: 'select',
                label: 'Href',
                name: 'href',
                options: links.map(link => ({ value: link.value, name: link.label }))
              }
            ]
          }
        }
      });

      // Apply the custom link component type to <a> elements
      editor.DomComponents.addType('link', {
        isComponent: el => el.tagName === 'A',
        model: {
          defaults: {
            tagName: 'a',
            draggable: true,
            droppable: true,
            traits: [
              {
                type: 'select',
                label: 'Href',
                name: 'href',
                options: links.map(link => ({ value: link.value, name: link.label }))
              }
            ]
          }
        }
      });

      // Convert the initial text element to a link component when selected
      editor.on('component:selected', (component) => {
        if (component.getAttributes().id === 'selectable-link') {
          component.set({ tagName: 'a', draggable: true, droppable: true });
          component.addTraits([
            {
              type: 'select',
              label: 'Href',
              name: 'href',
              options: links.map(link => ({ value: link.value, name: link.label }))
            }
          ]);
        }
      });
    });
  </script>
</body>
</html>

网友回复

我知道答案，我要回答

我有问题

回答

最新的国内外ai大模型能力排行榜有吗？

国产图片大模型seedream-5及qwen-image-3都无法生成360度全景图片？

听说OpenAI的Astra太强了可能会失控？

qwen3.8-max比较适合那些场景？

python有没有免费的股市行情数据api可用？

UUIDv7、nanoid、Snowflake、ULID与sparkid这些id生成器区别？

get请求报错NS_BINDING_ABORTED是什么原因？

happyhorse与seedance及minmax h3到底哪个更好？

scriptc为啥能生成一个不带nodejs的原生二进制可执行程序？

为啥huggingface那么多ai图片和视频模型都能一键脱衣没人管呢？