init

src/components/plugin/SectionTextarea.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="row m-0 p-0 align-items-center">
+        <div class="col-sm-12 col-md-6 p-0">
+            <span class="material-icons-outlined box-move me-2" style="cursor:move;">open_with</span><span
+                class="font-weight-bold text-primary">{{ langs.label }}</span>
+        </div>
+
+        <div class="col-sm-12 col-md-6 p-0 text-end">
+            <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
+                    class="material-icons-outlined">create</i></a>
+            <b-modal no-enforce-focus class_other="modal-xl" v-model="modalBox" :title="langs.label"
+                v-on:hide="onCloseModal">
+                <div class="mb-4">
+                    <div class="form-group">
+                        <editor api-key="no-api-key" rows="12" class="form-control" v-model="text" :init="vtinymce" />
+                    </div>
+                </div>
+                <div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
+                        langs.saveclose
+                }}</button></div>
+            </b-modal>
+            <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
+                    class="material-icons-outlined">delete</i></a>
+        </div>
+        <div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
+    </div>
+</template>
+<script>
+import MagicoModal from './../MagicoModal.vue'
+import tinymceConfig from '../tinymce/config.js'
+
+import Editor from '@tinymce/tinymce-vue'
+export default {
+    emits:['update:modelValue'],
+    components: {
+        'b-modal': MagicoModal,
+
+        'editor': Editor // <- To jest TINYMCE
+    },
+    props: {
+        modelValue: Object
+    },
+    mounted: function () {
+        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
+        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
+        if (this.modelValue.open) this.modalBox = true;
+        console.log('mounted textarea');
+        this.$emit('update:modelValue', this.modelValue);
+
+    },
+    data: function () {
+        return {
+            langs: {
+                saveclose: "Zapisz",
+                label: "Pole tekstowe",
+                close: "Zamknij"
+            },
+            height: window.innerHeight - window.innerHeight / 4,
+            modalBox: false,
+            text: '',
+            name: 'core_section_textarea',
+            vtinymce: Object.assign(tinymceConfig, {
+                file_picker_callback: (callback) => {
+                    if (this.$filechooser) {
+                        this.$filechooser.open({
+                            chooseCallback: function (ev) {
+                                console.log('filePathChosed', ev)
+                                callback(ev.publicUrl);
+                            }
+                        })
+                    }
+                }
+            }),
+        }
+    },
+    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.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : '';
+        }
+    },
+    methods: {
+        removeItem: function () {
+            this.$emit('itemRemoved', this.modelValue);
+        },
+        onCloseModal: function () {
+            this.modalBox = false;
+            this.$emit('update:modelValue', {
+                name: this.name,
+                text: this.text,
+            })
+        }
+    },
+
+}
+</script>