可视化编辑

app/Distributor/Repositories/DistAppearanceTemplate.php

@@ -99,6 +99,16 @@ class DistAppearanceTemplate extends EloquentRepository
                 },
                 $content
             );
+            //替换img等标签的情况
+            $content = preg_replace_callback(
+                '/<([a-zA-Z0-9]+)[^>]*mtb_id="' . preg_quote($mtbId, '/') . '"[^>]*>/s',
+                function ($matches) use ($outHtml) {
+                    // 返回替换后的内容
+                    return $outHtml;
+                },
+                $content
+            );
+
         }
 
         return $content;
@@ -130,6 +140,20 @@ class DistAppearanceTemplate extends EloquentRepository
             ];
         }
 
+        //匹配img等标签
+        $pattern = '/<([a-zA-Z0-9]+)[^>]*\smtb_id="([^"]+)"[^>]*>/is';  // 匹配所有含有 mtb_id 属性的标签
+        preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
+        foreach ($matches as $match) {
+            //去掉mtb_id属性
+            $outHtml = $match[0];
+            $outHtml = preg_replace('/mtb_id="[^"]*"/', '', $outHtml);
+            $result[] = [
+                'mtb_id' => $match[2],  // mtb_id 的值，这里改为 $match[2]
+                'outHtml' => $outHtml,  // 匹配到的完整 HTML 元素
+            ];
+        }
+
+
         $result = array_reduce($result, function ($carry, $item) {
             // 获取 mtb_id 的前缀
             $prefix = explode('_', $item['mtb_id'])[0];

public/vendor/grapes/grapes.init.js

@@ -105,30 +105,30 @@ const myNewComponentTypes = (editor) => {
     // });
 
     //图片属性
-    editor.Components.addType('img', {
-        isComponent: (el) => el.tagName === 'IMG',
-        model: {
-            defaults: {
-                traits: [
-                    {
-                        type: 'text', // Type of the trait
-                        name: 'title', // (required) The name of the attribute/property to use on component
-                        label: 'title', // The label you will see in Settings
-                    },
-                    {
-                        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
-                    },
-                ],
-            },
-        },
-    });
+    // editor.Components.addType('img', {
+    //     isComponent: (el) => el.tagName === 'IMG',
+    //     model: {
+    //         defaults: {
+    //             traits: [
+    //                 {
+    //                     type: 'text', // Type of the trait
+    //                     name: 'title', // (required) The name of the attribute/property to use on component
+    //                     label: 'title', // The label you will see in Settings
+    //                 },
+    //                 {
+    //                     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
+    //                 },
+    //             ],
+    //         },
+    //     },
+    // });
 };
 const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
 // 创建 GrapesJS 编辑器实例