可视化编辑器

app/Distributor/Actions/AppearanceEnable.php

@@ -17,7 +17,7 @@ class AppearanceEnable extends RowAction
      */
     public function title()
     {
-        return '<i class="feather icon-edit"></i> '.admin_trans_label('enable');
+        return '<i class="feather icon-check-circle"></i>&nbsp;&nbsp;'.admin_trans_label('enable');
     }
 
     public function confirm()

app/Distributor/Controllers/DistAppearanceController.php

@@ -45,8 +45,8 @@ class DistAppearanceController extends AdminDistController
             $grid->column('cover_image')->display(function ($image) {
                 $dataImages = [$image];
                 return CommonHelper::displayImage($dataImages,100);
-            })->width('20%');
-            $grid->column('describe')->width('40%');
+            })->width('15%');
+            $grid->column('describe')->width('30%');
             $grid->column('isEnabled')->display(function () use ($distInfo) {
                 if ($this->id == $distInfo->appearance_id) {
                     return '<span class="label" style="background:#21b978;">'.admin_trans_label('Yes').'</span>';
@@ -61,11 +61,18 @@ class DistAppearanceController extends AdminDistController
             $grid->disableBatchDelete();
             $grid->tools('<a href="'.getDistributorDomain().'" target="_blank"><button  class="btn btn-primary grid-refresh btn-mini" style="margin-right:3px"><i class="feather icon-chrome"></i><span class="d-none d-sm-inline">&nbsp; '.admin_trans_label('browse').'</span></button></a>');
             // 操作
-            $grid->actions(function (Grid\Displayers\Actions $actions) {
+            $grid->actions(function (Grid\Displayers\Actions $actions) use ($distInfo) {
                 $actions->disableDelete();
                 $actions->disableEdit();
                 $actions->disableView();
+                // 启用
                 $actions->append(new AppearanceEnable());
+                //可视化编辑
+                $isEnabled = $actions->row->id == $distInfo->appearance_id;
+                if ($isEnabled) {
+                    $edit = admin_trans_label('visual_edit');
+                    $actions->append('<a style="cursor: pointer;"  href="/dist/visual-editor" target="_blank"><i class="feather icon-edit"></i>&nbsp;&nbsp;'.$edit.'</a>');
+                }
             });
             //排序
             $grid->model()->where('enabled',1)->orderBy('order','desc')->orderBy('id','desc');

app/Distributor/Controllers/VisualEditorController.php

@@ -102,6 +102,11 @@ class VisualEditorController extends Controller
             return str_replace($matches[3], $url . $matches[3], $matches[0]);
         };
         $html = preg_replace_callback($pattern, $replacement, $html);
+
+        //把form去掉
+        $pattern = '/<form[^>]*>(.*?)<\/form>/is';
+        $html = preg_replace($pattern, '$1', $html);
+        
         return $html;
     }
 

lang/en/global.php

@@ -186,6 +186,7 @@ return [
         'name_tips'=>'Nickname',
         'distributor_create_success' => 'Create successfully, please configure the distributor site!',
         'attribute_name'        => 'Attribute Name',
+        'visual_edit'           => 'Visual Edit',
     ],
     'options' => [
         //

lang/zh_CN/global.php

@@ -193,6 +193,7 @@ return [
         'name_tips'=>'昵称',
         'distributor_create_success' => '创建成功，请配置分销商站点!',
         'attribute_name'        => '属性名称',
+        'visual_edit'           => '可视化编辑',
     ],
     'options' => [
         //

public/vendor/grapes/grapes.init.js

@@ -188,11 +188,11 @@ editor.getComponents().each(component => {
 function setBorder(component) {
     if (component.attributes.tagName == 'a') {
         component.setStyle({
-            border: '3px dashed  #f08300'
+            border: '3px dotted #f08300'
         });
     } else {
         component.setStyle({
-            border: '1px dashed  #3b97e3'
+            border: '1px dotted #3b97e3'
         });
     }
 }
@@ -321,6 +321,18 @@ editor.on('load', () => {
             window.location.href = redirectUrl;
         }
     });
+
+    //发布按钮
+    customSelect = document.querySelector('.custom-select');
+    // 创建 sendButton 按钮
+    const sendButton = document.createElement('button');
+    sendButton.textContent = 'publish'; // 按钮文本
+    sendButton.classList.add('send-button');
+    sendButton.classList.add('layui-btn');
+    sendButton.classList.add('layui-btn-radius');
+    sendButton.classList.add('layui-btn-radius');
+    sendButton.style = 'margin-left:10px;height:25px;line-height:25px;padding:0 10px;vertical-align:unset;'; // 添加样式（可选）
+    customSelect.insertAdjacentElement('afterend', sendButton);
 });
 
 //更新时调用接口保存数据
@@ -339,7 +351,7 @@ editor.on('update', () => {
         },
         success: function (res) {
             if (res.status != 1) {
-                //alert('save error');
+                alert('save error');
             }
         },
         error: function (err) {

resources/views/distributor/pages-custom/visual-editor.blade.php

@@ -32,7 +32,7 @@
 
         .gjs-pn-options {
             right: unset;
-            left: 40%;
+            left: 33%;
         }
         .gjs-pn-buttons {
             text-align: right;