section_text button and section_textarea more menu

src/components/plugin/SectionText.vue

@@ -21,9 +21,9 @@
                 <label class="w-100 col-form-label">{{ langs.content }}</label>
                 <input class="form-control" type="text" v-model="text" />
             </div>
-            <div class="form-group">
+            <div class="form-grou mb-2">
                 <label class="w-100 col-form-label">{{ langs.type }}</label>
-                <select class="form-control" v-model="h_type">
+                <select class="form-select" v-model="h_type">
                     <option value="">{{ langs.typeplaintext }}</option>
                     <option value="h1">{{ langs.typeheader }} 1</option>
                     <option value="h2">{{ langs.typeheader }} 2</option>
@@ -33,8 +33,21 @@
                 </select>
             </div>
             <div class="form-group">
-                <!-- <label class="w-100 col-form-label">Wyrównanie</label> -->
-
+                <label class="w-100 col-form-label">Wyrównanie</label>
+    <div class="">
+        <button v-tooltip title="Wyrównanie do lewej" @click="align='left'" class="btn btn-icon-sm " :class="align=='left'?'btn-primary':'btn-outline-primary'">
+            <span class="material-icons-outlined">format_align_left</span>
+        </button>
+        <button v-tooltip title="Wyrównanie do środka" @click="align='center'" class="btn btn-icon-sm " :class="align=='center'?'btn-primary':'btn-outline-primary'">
+            <span class="material-icons-outlined">format_align_center</span>
+        </button>
+        <button v-tooltip title="Wyrównanie do prawej" @click="align='right'" class="btn btn-icon-sm " :class="align=='right'?'btn-primary':'btn-outline-primary'">
+            <span class="material-icons-outlined">format_align_right</span>
+        </button>
+        <button v-tooltip title="Justowanie" @click="align='justify'" class="btn btn-icon-sm " :class="align=='justify'?'btn-primary':'btn-outline-primary'">
+            <span class="material-icons-outlined">format_align_justify</span>
+        </button>
+    </div>
             </div>
 
             <div class="text-center"><button class="btn btn-outline-secondary me-1" @click.prevent="onCloseModal">{{
@@ -78,9 +91,10 @@ export default {
         this.align = (this.value && this.value.align) ? this.value.align : this.align;
         if (this.value.open) this.modalBox = true;
         console.log('mounted text');
-        this.$emit('input',this.value);
+        this.$emit('input', this.value);
 
     },
+    
     methods: {
         removeItem: function () {
             this.$emit('itemRemoved', this.value);
@@ -95,8 +109,8 @@ export default {
             })
         }
     },
-    destroy(){
-        this.modalBox=false;
+    destroy() {
+        this.modalBox = false;
     }
 
 }

src/components/plugin/SectionTextarea.vue

@@ -61,6 +61,18 @@ export default {
             vtinymce: tinymceConfig,
         }
     },
+    watch: {
+        modalBox: function() {
+            if (this.modalBox) {
+                document.addEventListener('focusin', (e) => {
+                    if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
+                        e.stopImmediatePropagation();
+                    }
+                });
+            }
+                    console.log('focus');
+        },
+    },
     computed: {
         ctext: function () {
             return this.value.text?this.value.text.replace(/<(?:.|\n)*?>/gm, ''):'';

src/components/tinymce/config.js

@@ -3,6 +3,7 @@ export default {
     width: '100%',
     selector: "textarea.wysiwyg",
     language: "pl",
+    language_url:'https://www.magico.pl/assets/js/tinymce/langs/pl.js',
     forced_root_block: "p",
     entity_encoding: 'named',
     entities: '160,nbsp,38,amp,60,lt,62,gt',
@@ -107,8 +108,8 @@ export default {
     },
     plugins: ['advlist', 'autolink', 'lists', 'link', 'image', 'print', 'hr', 'anchor', 'media', 'pagebreak' ,'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code' ,'insertdatetime', 'nonbreaking', 'save', 'table', 'contextmenu', 'directionality' ,'emoticons', 'paste', 'textcolor',  'textpattern', 'codesample', 'charmap', 'autoresize'],
     removed_menuitems: 'newdocument',
-    toolbarxx: "undo redo | styleselect | bold italic | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | link image forecolor backcolor mybutton mybuttona",
-    toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | media | forecolor backcolor',
+    toolbarxx: "undo redo | bold italic | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | link image forecolor backcolor",
+    toolbar1: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | media | forecolor backcolor',
     toolbar2: '',
-    menubar:false,
+    menubar:true,
 }