grapejs新增trait示例代码-html代码-BFW代码库

grapejs新增trait示例代码

代码语言：html

所属分类：其他

代码描述：grapejs新增trait示例代码，修改了link组件的属性设置，自定义属性面板。

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

<!DOCTYPE html>
<html>

<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>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapesjs-component-code-editor.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-component-code-editor.min.js"></script>
    <style>
        body, html {
      margin: 0;
      height: 100%;
    }
    </style>
</head>

<body>

    <div id="gjs">
        <h1>测试</h1>
    </div>


    <script>
        const editor = grapesjs.init({
        	container: '#gjs',
          height: '100%',
          fromElement: true,
          storageManager: false,

        });
       // Update component
editor.DomComponents.addType('link', {
  model: {
    defaults: {
      traits: [
        {
          type: 'href-next',
          name: 'href',
          label: 'New href',
        },
      ]
    }
  }
}); 

editor.TraitManager.addType('href-next', {
  // Expects as return a simple HTML string or an HTML element
  createInput({ trait }) {
    // Here we can decide to use properties from the trait
    const traitOpts = trait.get('options') || [];
    const options = traitOpts.length ? traitOpts : [
      { id: 'url', name: 'URL' },
      { id: 'email', name: 'Email' },
    ];

    // Create a new element container and add some content
    const el = document.createElement('div');
    el.innerHTML = `
      <select class="href-next__type">
        ${options.map(opt => `<option value="${opt.id}">${opt.name}</option>`).join('')}
      </select>
      <div class="href-next__url-inputs">
        <input class="href-next__url" placeholder="Insert URL"/>
      </div>
      <div class="href-next__email-inputs">
        <input class="href-next__email" placeholder="Insert email"/>
        <input class="href-next__email-subject" placeholder="Insert subject"/>
      </div>
    `;

    // Let's make our content interactive
    const inputsUrl = .........完整代码请登录后点击上方下载按钮下载查看