编辑器加布局

app/Admin/bootstrap.php

@@ -55,7 +55,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"],
+        '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"],
     ]);
 });
 

app/Distributor/bootstrap.php

@@ -55,11 +55,13 @@ config(['app.locale' => Cookie::get('lang') ?: config('app.locale')]);
 
 //编辑器配置
 Editor::resolving(function (Editor $editor) {
+    $editor->setView('distributor.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"],
+        '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"],
     ]);
+
 });
 
 //菜单

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

@@ -0,0 +1,57 @@
+<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.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);
+            }
+        });
+    }
+    tinymce.init(opts)
+</script>