GrapesJS自定义标签和组件及Trait属性编辑示例代码-html代码-BFW代码库

GrapesJS自定义标签和组件及Trait属性编辑示例代码

代码语言：html

所属分类：其他

代码描述：GrapesJS自定义标签和组件及Trait属性编辑示例代码，增加了组件及子组件是否能移动、是否能编辑、是否能复制、是否能删除的能力设置，已经点击组件设置组件属性值效果。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapesjs-preset-webpage.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.min.js"></script>

    <!--引入grapesjs-preset-webpage-->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.min.css">
  

    <style>
        body,
        html {
            height: 100%;
            margin: 0;
        }
    </style>



</head>

<body>

<div id="gjs">
    <div>
          <slider value="30"></slider>

  <slider value="75"></slider>
        
    </div>

</div>

    <script>


const hrefNextTrait = editor => {
  // Custom component
  editor.DomComponents.addType('slider', {
    isComponent: el => el.tagName === 'SLIDER',
    model: {
      defaults: {
        traits: [{ type: 'slider', name: 'value', label: true }],
          draggable: true,
      droppable: true,
      editable: false,
      removable:false,
      copyable:false
      },
      init() {
      	this.on('change:attributes:value', this.handleChange);
        this.handleChange();
      },
      handleChange() {
      	const value = this.getAttributes().value || 0;
        this.components(`<h2 data-gjs-draggable="false" data-gjs-dropable="false" data-gjs-editable="false" data-gjs-removable="false">Slider: ${value}</h2><p data-gjs-draggable="false" data-gjs-dropable="false" data-gjs-editable="false" data-gjs-removable="false">${value}</p>`);
      }
    }
  });
	
	
	
editor.TraitManager.addType('slider', {
    noLabel: true,

    // Return a simple HTML string or an HTML element
    createInput({ trait }) {
      // Here we can decide to use properties from the trait
      
     
      // Create a new element container add some content
      const el = document.createElement('div');
      el.innerHTML = `
     
      <div class="slider_value_div">
        <input class="slider_value-inputs" type="number" placeholder="修改数值"/>
      </div>
     
    `;



      return el;
    },

    // Update the component based element changes
    onEvent({ elInput, component }) {
      // `elInput` is the result HTMLElement you get from `cr.........完整代码请登录后点击上方下载按钮下载查看