编辑器加布局

app/Admin/bootstrap.php

@@ -52,10 +52,11 @@ $user = Admin::guard()->check() ? Admin::user() : null;
 config(['app.locale' => Cookie::get('lang') ?: config('app.locale')]);
 //编辑器配置
 Editor::resolving(function (Editor $editor) {
+    $editor->setView('admin.form_custom.editor');
     // 设置默认配置
     $editor->options([
         'plugins'=>["advlist","autolink","link","image","media","lists","preview","code","help","fullscreen","table","autoresize","codesample"],
-        'toolbar'=>["undo redo | preview fullscreen | formatselect  | fontsizeselect bold italic underline strikethrough forecolor backcolor | link image media blockquote removeformat codesample","alignleft aligncenter alignright  alignjustify| indent outdent bullist numlist table subscript superscript | code | myLayout"],
+        'toolbar'=>["undo redo | preview fullscreen | formatselect  | fontsizeselect bold italic underline strikethrough forecolor backcolor | link image media blockquote removeformat codesample","alignleft aligncenter alignright  alignjustify| indent outdent bullist numlist table subscript superscript | code"],
     ]);
 });
 

app/Distributor/bootstrap.php

@@ -59,7 +59,7 @@ Editor::resolving(function (Editor $editor) {
     // 设置默认配置
     $editor->options([
         'plugins'=>["advlist","autolink","link","image","media","lists","preview","code","help","fullscreen","table","autoresize","codesample"],
-        'toolbar'=>["undo redo | preview fullscreen | formatselect  | fontsizeselect bold italic underline strikethrough forecolor backcolor | link image media blockquote removeformat codesample","alignleft aligncenter alignright  alignjustify| indent outdent bullist numlist table subscript superscript | code | myLayout"],
+        'toolbar'=>["undo redo | preview fullscreen | formatselect  | fontsizeselect bold italic underline strikethrough forecolor backcolor | link image media blockquote removeformat codesample","alignleft aligncenter alignright  alignjustify| indent outdent bullist numlist table subscript superscript | myLayoutLeft myLayoutRight | code"],
     ]);
 
 });

resources/views/admin/form_custom/editor.blade.php

@@ -0,0 +1,56 @@
+<div class="{{$viewClass['form-group']}}">
+
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+
+    <div class="{{$viewClass['field']}}">
+
+        @include('admin::form.error')
+
+        <textarea class="form-control {{$class}}" name="{{$name}}" placeholder="{{ $placeholder }}" {!! $attributes !!} >{{ $value }}</textarea>
+
+        @include('admin::form.help-block')
+
+    </div>
+</div>
+
+<script require="@tinymce" init="{!! $selector !!}">
+    var opts = {!! admin_javascript_json($options) !!};
+
+    opts.selector = '#'+id;
+
+    if (! opts.init_instance_callback) {
+        opts.init_instance_callback = function (editor) {
+            editor.on('Change', function(e) {
+                $this.val(String(e.target.getContent()).replace('<p><br data-mce-bogus="1"></p>', '').replace('<p><br></p>', ''));
+            });
+        }
+    }
+    opts.setup = function (editor) {
+        editor.ui.registry.addIcon('myCustomIcon1', '<svg t="1748573632733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29351" width="24" height="24"><path d="M893.09536344 340.61983656V178.25968172c0-25.93252473-20.85876989-47.35504516-47.35504516-47.35504516H178.25968172c-25.93252473 0-47.35504516 20.85876989-47.35504516 47.35504516v162.36015484h762.19072688zM381.20987527 393.6123871H131.4683871v452.12793118c0 25.93252473 20.85876989 47.35504516 47.35504516 47.35504516h202.38644301V393.6123871z m52.4288 0V892.5316129h412.66539355c33.26128172 0 46.22754408-18.04001721 46.22754408-46.22754408V393.6123871H433.63867527z" fill="#2C2C2C" p-id="29352"></path></svg>');
+        editor.ui.registry.addIcon('myCustomIconLeft', '<svg t="1748572285440" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25026" width="24" height="24"><path d="M853.333333 128H170.666667c-25.6 0-42.666667 17.066667-42.666667 42.666667v682.666666c0 25.6 17.066667 42.666667 42.666667 42.666667h682.666666c25.6 0 42.666667-17.066667 42.666667-42.666667V170.666667c0-25.6-17.066667-42.666667-42.666667-42.666667zM213.333333 213.333333h256v256H213.333333V213.333333z m0 597.333334v-256h256v256H213.333333z m597.333334 0h-256V213.333333h256v597.333334z" fill="#09121F" p-id="25027"></path></svg>');
+        editor.ui.registry.addIcon('myCustomIconRight', '<svg t="1748572229839" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24877" width="24" height="24"><path d="M853.333333 128H170.666667c-25.6 0-42.666667 17.066667-42.666667 42.666667v682.666666c0 25.6 17.066667 42.666667 42.666667 42.666667h682.666666c25.6 0 42.666667-17.066667 42.666667-42.666667V170.666667c0-25.6-17.066667-42.666667-42.666667-42.666667zM213.333333 810.666667V213.333333h256v597.333334H213.333333z m597.333334 0h-256v-256h256v256z m0-341.333334h-256V213.333333h256v256z" fill="#09121F" p-id="24878"></path></svg>');
+
+        editor.ui.registry.addButton('myLayoutLeft',  {
+            text: '',
+            icon: 'myCustomIconLeft',
+            tooltip: 'Insert Left Layout',
+            onAction: function ()  {
+                const html = tinymce.get(editor.id).getContent();
+                const insterEle = '<div style="padding: 0px 20px 0px 20px;display: block;color: #666;font-size: 16px;line-height: 1.75;-webkit-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;unicode-bidi: isolate;"><div style="display: flex;"><div style="width: 65%;padding: 40px 60px;margin: 0;webkit-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;display: block;unicode-bidi: isolate;color: #666;font-size: 16px;line-height: 1.75;"><h3 style="font-size: 36px;font-weight: bold;color: #333;margin-bottom: 36px;line-height: 1.75;margin-top: 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;">Intelligent cutting and pasting all-in-one machine </h3><p style="padding: 0;margin: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;color: #666;font-size: 16px;">Intelligent cutting and pasting all-in-one machineFull process automation: integrated cloud database to retrieve model data, laser cutting, vacuum adsorption film, UV curing and other links, eliminating the cumbersome operation of multi-equipment switching, to achieve “one-click” service.</p><\/div><div style="line-height: 1.75;margin-bottom: 1.5em;"><img src="https://mietubl-website.oss-cn-hongkong.aliyuncs.com/static/common/images/500px.png"  style="max-width: 100%;border: 0;overflow-clip-margin: content-box;overflow: clip;"><\/div><\/div><\/div><br \/>';
+                tinymce.activeEditor.setContent(html+insterEle);
+            }
+        });
+
+        editor.ui.registry.addButton('myLayoutRight', {
+            text: '',
+            icon: 'myCustomIconRight',
+            tooltip: 'Insert Right Layout',
+            onAction: function ()  {
+                const html = tinymce.get(editor.id).getContent();
+                const insterEle = '<div style="padding: 0px 20px 0px 20px;display: block;color: #666;font-size: 16px;line-height: 1.75;-webkit-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;unicode-bidi: isolate;"><div style="display: flex;"><div style="width: 65%;padding: 40px 60px;margin: 0;webkit-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;display: block;unicode-bidi: isolate;color: #666;font-size: 16px;line-height: 1.75;"><h3 style="font-size: 36px;font-weight: bold;color: #333;margin-bottom: 36px;line-height: 1.75;margin-top: 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;">European Union certified intelligent film cutting machine</h3><p style="padding: 0;margin: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;color: #666;font-size: 16px;">24000+ models updated in the cloud, on-demand cut phone/tablet/watch film, open consumables, personalized back film customization, one machine to solve the inventory problem.</p><\/div><div style="order: -1;line-height: 1.75;margin-bottom: 1.5em;"><img src="https://mietubl-website.oss-cn-hongkong.aliyuncs.com/static/common/images/500px.png" style="max-width: 100%;border: 0;overflow-clip-margin: content-box;overflow: clip;"><\/div><\/div><\/div><br \/>';
+                tinymce.activeEditor.setContent(html+insterEle);
+            }
+        });
+    }
+    tinymce.init(opts)
+</script>

resources/views/distributor/form_custom/editor.blade.php

@@ -26,30 +26,29 @@
         }
     }
     opts.setup = function (editor) {
-        editor.ui.registry.addMenuButton('myLayout', {
-            text: 'Layout',
-            icon: 'template', // 内置图标或自定义 SVG
-            fetch: (callback) => {
-                const html = tinymce.get(id).getContent();
-                const items = [
-                    {
-                        type: 'menuitem',
-                        text: 'Left Layout',
-                        onAction: () => {
-                            const insterEle = '<div style="padding: 0px 20px 0px 20px;display: block;color: #666;font-size: 16px;line-height: 1.75;-webkit-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;unicode-bidi: isolate;"><div style="display: flex;"><div style="width: 65%;padding: 40px 60px;margin: 0;webkit-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;display: block;unicode-bidi: isolate;color: #666;font-size: 16px;line-height: 1.75;"><h3 style="font-size: 36px;font-weight: bold;color: #333;margin-bottom: 36px;line-height: 1.75;margin-top: 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;">Intelligent cutting and pasting all-in-one machine </h3><p style="padding: 0;margin: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;color: #666;font-size: 16px;">Intelligent cutting and pasting all-in-one machineFull process automation: integrated cloud database to retrieve model data, laser cutting, vacuum adsorption film, UV curing and other links, eliminating the cumbersome operation of multi-equipment switching, to achieve “one-click” service.</p><\/div><div style="line-height: 1.75;margin-bottom: 1.5em;"><img src="https://mietubl-website.oss-cn-hongkong.aliyuncs.com/static/common/images/500px.png"  style="max-width: 100%;border: 0;overflow-clip-margin: content-box;overflow: clip;"><\/div><\/div><\/div><br \/>';
-                            tinymce.activeEditor.setContent(html+insterEle);
-                        }
-                    },
-                    {
-                        type: 'menuitem',
-                        text: 'Right Layout',
-                        onAction: () =>  {
-                            const insterEle = '<div style="padding: 0px 20px 0px 20px;display: block;color: #666;font-size: 16px;line-height: 1.75;-webkit-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;unicode-bidi: isolate;"><div style="display: flex;"><div style="width: 65%;padding: 40px 60px;margin: 0;webkit-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;display: block;unicode-bidi: isolate;color: #666;font-size: 16px;line-height: 1.75;"><h3 style="font-size: 36px;font-weight: bold;color: #333;margin-bottom: 36px;line-height: 1.75;margin-top: 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;">European Union certified intelligent film cutting machine</h3><p style="padding: 0;margin: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;color: #666;font-size: 16px;">European Union certified intelligent film cutting machineEnvironmental compliance certification: low carbon process from raw material procurement to production, equipment life cycle carbon emissions 60% lower than traditional models</p><\/div><div style="order: -1;line-height: 1.75;margin-bottom: 1.5em;"><img src="https://mietubl-website.oss-cn-hongkong.aliyuncs.com/static/common/images/500px.png" style="max-width: 100%;border: 0;overflow-clip-margin: content-box;overflow: clip;"><\/div><\/div><\/div><br \/>';
-                            tinymce.activeEditor.setContent(html+insterEle);
-                        }
-                    }
-                ];
-                callback(items);
+        editor.ui.registry.addIcon('myCustomIcon1', '<svg t="1748573632733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29351" width="24" height="24"><path d="M893.09536344 340.61983656V178.25968172c0-25.93252473-20.85876989-47.35504516-47.35504516-47.35504516H178.25968172c-25.93252473 0-47.35504516 20.85876989-47.35504516 47.35504516v162.36015484h762.19072688zM381.20987527 393.6123871H131.4683871v452.12793118c0 25.93252473 20.85876989 47.35504516 47.35504516 47.35504516h202.38644301V393.6123871z m52.4288 0V892.5316129h412.66539355c33.26128172 0 46.22754408-18.04001721 46.22754408-46.22754408V393.6123871H433.63867527z" fill="#2C2C2C" p-id="29352"></path></svg>');
+        editor.ui.registry.addIcon('myCustomIconLeft', '<svg t="1748572285440" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25026" width="24" height="24"><path d="M853.333333 128H170.666667c-25.6 0-42.666667 17.066667-42.666667 42.666667v682.666666c0 25.6 17.066667 42.666667 42.666667 42.666667h682.666666c25.6 0 42.666667-17.066667 42.666667-42.666667V170.666667c0-25.6-17.066667-42.666667-42.666667-42.666667zM213.333333 213.333333h256v256H213.333333V213.333333z m0 597.333334v-256h256v256H213.333333z m597.333334 0h-256V213.333333h256v597.333334z" fill="#09121F" p-id="25027"></path></svg>');
+        editor.ui.registry.addIcon('myCustomIconRight', '<svg t="1748572229839" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24877" width="24" height="24"><path d="M853.333333 128H170.666667c-25.6 0-42.666667 17.066667-42.666667 42.666667v682.666666c0 25.6 17.066667 42.666667 42.666667 42.666667h682.666666c25.6 0 42.666667-17.066667 42.666667-42.666667V170.666667c0-25.6-17.066667-42.666667-42.666667-42.666667zM213.333333 810.666667V213.333333h256v597.333334H213.333333z m597.333334 0h-256v-256h256v256z m0-341.333334h-256V213.333333h256v256z" fill="#09121F" p-id="24878"></path></svg>');
+
+        editor.ui.registry.addButton('myLayoutLeft',  {
+            text: '',
+            icon: 'myCustomIconLeft',
+            tooltip: 'Insert Left Layout',
+            onAction: function ()  {
+                const html = tinymce.get(editor.id).getContent();
+                const insterEle = '<div style="padding: 0px 20px 0px 20px;display: block;color: #666;font-size: 16px;line-height: 1.75;-webkit-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;unicode-bidi: isolate;"><div style="display: flex;"><div style="width: 65%;padding: 40px 60px;margin: 0;webkit-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;display: block;unicode-bidi: isolate;color: #666;font-size: 16px;line-height: 1.75;"><h3 style="font-size: 36px;font-weight: bold;color: #333;margin-bottom: 36px;line-height: 1.75;margin-top: 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;">Intelligent cutting and pasting all-in-one machine </h3><p style="padding: 0;margin: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;color: #666;font-size: 16px;">Intelligent cutting and pasting all-in-one machineFull process automation: integrated cloud database to retrieve model data, laser cutting, vacuum adsorption film, UV curing and other links, eliminating the cumbersome operation of multi-equipment switching, to achieve “one-click” service.</p><\/div><div style="line-height: 1.75;margin-bottom: 1.5em;"><img src="https://mietubl-website.oss-cn-hongkong.aliyuncs.com/static/common/images/500px.png"  style="max-width: 100%;border: 0;overflow-clip-margin: content-box;overflow: clip;"><\/div><\/div><\/div><br \/>';
+                tinymce.activeEditor.setContent(html+insterEle);
+            }
+        });
+
+        editor.ui.registry.addButton('myLayoutRight', {
+            text: '',
+            icon: 'myCustomIconRight',
+            tooltip: 'Insert Right Layout',
+            onAction: function ()  {
+                const html = tinymce.get(editor.id).getContent();
+                const insterEle = '<div style="padding: 0px 20px 0px 20px;display: block;color: #666;font-size: 16px;line-height: 1.75;-webkit-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;unicode-bidi: isolate;"><div style="display: flex;"><div style="width: 65%;padding: 40px 60px;margin: 0;webkit-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;display: block;unicode-bidi: isolate;color: #666;font-size: 16px;line-height: 1.75;"><h3 style="font-size: 36px;font-weight: bold;color: #333;margin-bottom: 36px;line-height: 1.75;margin-top: 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;">European Union certified intelligent film cutting machine</h3><p style="padding: 0;margin: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;font-family: \'Poppins\', \'sans-serif\', \'Arial\';-webkit-font-smoothing: antialiased;color: #666;font-size: 16px;">24000+ models updated in the cloud, on-demand cut phone/tablet/watch film, open consumables, personalized back film customization, one machine to solve the inventory problem.</p><\/div><div style="order: -1;line-height: 1.75;margin-bottom: 1.5em;"><img src="https://mietubl-website.oss-cn-hongkong.aliyuncs.com/static/common/images/500px.png" style="max-width: 100%;border: 0;overflow-clip-margin: content-box;overflow: clip;"><\/div><\/div><\/div><br \/>';
+                tinymce.activeEditor.setContent(html+insterEle);
             }
         });
     }