mtb_dcatadmin_plus/public/vendor/grapes/grapes.init.js

const panelsConfig = {
    stylePrefix: 'pn-', // 面板的样式前缀
    defaults: [
        {
            id: 'commands',
            buttons: [{}],
        },
        {
            id: 'options',
            buttons: [
                {
                    active: false,
                    id: 'sw-visibility',
                    className: 'fa fa-square-o',
                    command: 'core:component-outline',
                    context: 'sw-visibility',
                    attributes: { title: 'View components' },
                },
                {
                    id: 'preview',
                    className: 'fa fa-eye',
                    command: 'preview',
                    context: 'preview',
                    attributes: { title: 'Preview' },
                },
                {
                    id: 'fullscreen',
                    className: 'fa fa-arrows-alt',
                    command: 'fullscreen',
                    context: 'fullscreen',
                    attributes: { title: 'Fullscreen' },
                },
                // {
                //     id: 'export-template',
                //     className: 'fa fa-code',
                //     command: 'export-template',
                //     attributes: { title: 'View code' },
                // },
            ],
        },
        {
            id: 'views',
            buttons: [
                // {
                //     id: 'open-sm',
                //     className: 'fa fa-paint-brush',
                //     command: 'open-sm',
                //     active: false,
                //     togglable: false,
                //     attributes: { title: 'Open Style Manager' },
                // },
                {
                    id: 'open-tm',
                    className: 'fa fa-cog',
                    command: 'open-tm',
                    active: true,
                    togglable: true,
                    attributes: { title: 'Settings' },
                },
                // {
                //     id: 'open-layers',
                //     className: 'fa fa-bars',
                //     command: 'open-layers',
                //     togglable: false,
                //     attributes: { title: 'Open Layer Manager' },
                // },
                // {
                //     id: 'open-blocks',
                //     className: 'fa fa-th-large',
                //     command: 'open-blocks',
                //     togglable: false,
                //     attributes: { title: 'Open Blocks' },
                // },
            ],
        },
    ],
};

// 定义自定义组件类型
const myNewComponentTypes = (editor) => {
    //连接属性
    // editor.Components.addType('a', {
    //     isComponent: (el) => el.tagName === 'A',
    //     model: {
    //         defaults: {
    //             traits: [
    //                 {
    //                     type: 'text', // Type of the trait
    //                     name: 'href', // (required) The name of the attribute/property to use on component
    //                     label: 'URL', // The label you will see in Settings
    //                 }
    //             ],
    //         },
    //     },
    // });

    //图片属性
    editor.Components.addType('img', {
        isComponent: (el) => el.tagName === 'IMG',
        model: {
            defaults: {
                traits: [
                    {
                        type: 'text', // Type of the trait
                        name: 'width', // (required) The name of the attribute/property to use on component
                        label: 'width', // The label you will see in Settings
                    },
                    {
                        type: 'text', // Type of the trait
                        name: 'height', // (required) The name of the attribute/property to use on component
                        label: 'height', // The label you will see in Settings
                    },
                ],
            },
        },
    });
};

// 创建 GrapesJS 编辑器实例
const editor = grapesjs.init({
    container: '#gjs', // 指定编辑器容器的 DOM 元素
    fromElement: true, // 从 DOM 元素中加载初始内容
    height: '100%', // 设置编辑器的高度
    width: '100%', // 设置宽度自适应
    storageManager: false,
    panels: panelsConfig,
    plugins: [myNewComponentTypes],
    canvas: {
        // 禁用对所有元素的选择
        selectorManager: {
            // 允许选择特定类名的元素
            selector: '.your-class-name',
        }
    }
});
const am = editor.AssetManager;
// 锁定整个画布
editor.getWrapper().set({ locked: true });

// 遍历所有组件并解锁具有edit属性的组件
const edit_classes = ['mtb_edit']; // 定义需要解锁的组件类名
editor.getComponents().each(component => {
    component.onAll(component => {
        //解销CLASS
        let html = component.toHTML();
        const classes = component.getClasses();
        // 判断是否有交集
        const hasIntersection = classes.some(item => {
            // 如果是数组，则递归检查子数组
            if (Array.isArray(item)) {
                return item.some(subItem => edit_classes.includes(subItem));
            }
            // 如果是字符串，直接检查是否在 edit_classes 中
            return edit_classes.includes(item);
        });

        // 如果有交集，解锁组件
        if (hasIntersection || component.get('attributes').mtb_edit == 'true') {
            component.set({ locked: false });
            component.setStyle({
                border: '2px dashed  #3b97e3  '
            });
        }

    })

});



// 监听组件选择事件
editor.on('component:selected', (comp) => {
    //去掉选中组件后的按钮
    const selectedComponent = editor.getSelected();
    const defaultToolbar = selectedComponent.get('toolbar');
    selectedComponent.set({
        //  toolbar: [ ...defaultToolbar, {  attributes: {class: commandIcon}, command: commandToAdd}]
        toolbar: [ ]
    });

    //如果是连接与图片，显示右边的属性面板
    let tags = ['a', 'img'];
    const hasScheduleAttribute = selectedComponent.attributes;
    if (tags.includes(selectedComponent.attributes.tagName)) {
        editor.runCommand('open-tm');
        // 获取 .gjs-cv-canvas-bg 元素
        canvasBg = document.querySelector('.gjs-cv-canvas');
        canvasBg.classList.remove('gjs-cv-canvas-bg');

        var elements = document.querySelectorAll('.gjs-pn-views-container');
        elements.forEach(function(element) {
            element.style.display = 'block'; // 或者 'flex'，取决于你希望如何显示这些元素
        });
    } else {
        canvasBg = document.querySelector('.gjs-cv-canvas');
        canvasBg.classList.add('gjs-cv-canvas-bg');
        var elements = document.querySelectorAll('.gjs-pn-views-container');
        elements.forEach(function(element) {
            element.style.display = 'none'; // 或者 'flex'，取决于你希望如何显示这些元素
        });
    }
    // 双击图片时弹出图片管理器
    if (selectedComponent.attributes.tagName == 'img') {
        //双击图片时弹出图片管理器
        const el = selectedComponent.getEl();
        // 添加双击事件监听器
        el.addEventListener('dblclick', () => {
            am.open({
                types: ['image'], // This is the default option
                // Without select, nothing will happen on asset selection
                select(asset, complete) {
                    const selected = editor.getSelected();
                    if (selected) {
                        selected.addAttributes({ src: asset.getSrc() });
                        // The default AssetManager UI will trigger `select(asset, false)`
                        // on asset click and `select(asset, true)` on double-click
                        complete && am.close();
                    }
                },
            });
        });
    }
    //其他
});

// 监听 load 事件
editor.on('load', () => {
    // 在这里执行你的初始化逻辑
    // 获取目标元素
    const targetElement = document.querySelector('.fa-arrows-alt');
    // 创建下拉选择框
    const dropdown = document.createElement('select');
    dropdown.className = 'custom-select'; // 添加自定义样式类
    dropdown.id = 'dropdown'; // 添加 id 属性
    // 构建 option 标签
    var options = '';
    siteMenu.forEach(function (item) {
        if (mid == item.id) {
            options += `<option value="${item.id}" uri="${item.url}" selected>${item.title}</option>`;
        } else {
            options += `<option value="${item.id}" uri="${item.url}">${item.title}</option>`;
        }
    });
    // 将生成的 option 标签添加到 dropdown 中
    dropdown.innerHTML = options;
    // 将下拉选择框插入到目标元素之后
    targetElement.insertAdjacentElement('afterend', dropdown);
    //
    dropdownel = document.getElementById('dropdown');
    // 监听 change 事件
    dropdownel.addEventListener('change', function () {
        // 获取选中的 option
        var selectedOption = dropdownel.options[dropdownel.selectedIndex];
        // 获取选中的 id 和 uri
        var id = selectedOption.value;
        var uri = selectedOption.getAttribute('uri');

        if (id > 0) {
            // 生成跳转的 URL
            var redirectUrl = `?mid=${id}&uri=${encodeURIComponent(uri)}`;
            // 跳转到生成的 URL
            window.location.href = redirectUrl;
        }
    });

});

//更新时调用接口保存数据
editor.on('update', () => {
    const html = editor.getHtml();
    // 你可以在这里添加自定义逻辑
    console.log('GrapesJS updated the editor content', html);
});