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