grapesjs实现a链接组件设置href下拉选择代码-html代码-BFW代码库

grapesjs实现a链接组件设置href下拉选择代码

代码语言：html

所属分类：其他

代码描述：grapesjs实现a链接组件设置href下拉选择代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!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.........完整代码请登录后点击上方下载按钮下载查看