Add tinymce editor

Author: jmontoyaa

assets/vue/components/documents/FormNewDocument.vue

@@ -1,49 +1,50 @@
 <template>
-      <q-form>
-        <q-input
-            id="item_title"
-            v-model="item.title"
-            :error="v$.item.title.$error"
-            :error-message="titleErrors"
-            :placeholder="$t('Title')"
-            @input="v$.item.title.$touch()"
-            @blur="v$.item.title.$touch()"
-        />
-
-        <editor
-            id="item_content"
-            v-if="(item.resourceNode && item.resourceNode.resourceFile && item.resourceNode.resourceFile.text) || item.newDocument"
-            v-model="item.contentFile"
-            :error-message="contentFileErrors"
-            required
-            :init="{
+  <q-form>
+    <q-input
+        id="item_title"
+        v-model="item.title"
+        :error="v$.item.title.$error"
+        :error-message="titleErrors"
+        :placeholder="$t('Title')"
+        @input="v$.item.title.$touch()"
+        @blur="v$.item.title.$touch()"
+    />
+
+    <editor
+        id="item_content"
+        v-if="(item.resourceNode && item.resourceNode.resourceFile && item.resourceNode.resourceFile.text) || item.newDocument"
+        v-model="item.contentFile"
+        :error-message="contentFileErrors"
+        required
+        :init="{
           skin_url: '/build/libs/tinymce/skins/ui/oxide',
           content_css: '/build/libs/tinymce/skins/content/default/content.css',
-          branding:false,
+          branding: false,
+          relative_urls: false,
           height: 500,
           toolbar_mode: 'sliding',
           file_picker_callback : browser,
           /*file_picker_callback: function(callback, value, meta) {
-                  // Provide file and text for the link dialog
-                  if (meta.filetype == 'file') {
-                    callback('mypage.html', {text: 'My text'});
-                  }
-
-                  // Provide image and alt text for the image dialog
-                  if (meta.filetype == 'image') {
-                    callback('myimage.jpg', {alt: 'My alt text'});
-                  }
-
-                  // Provide alternative source and posted for the media dialog
-                  if (meta.filetype == 'media') {
-                    callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
-                  }
-                },*/
-          /*images_upload_handler: (blobInfo, success, failure) => {
-                  const img = 'data:image/jpeg;base64,' + blobInfo.base64();
-                  //console.log(img);
-                  success(img);
-                },*/
+              // Provide file and text for the link dialog
+              if (meta.filetype == 'file') {
+                callback('mypage.html', {text: 'My text'});
+              }
+
+              // Provide image and alt text for the image dialog
+              if (meta.filetype == 'image') {
+                callback('myimage.jpg', {alt: 'My alt text'});
+              }
+
+              // Provide alternative source and posted for the media dialog
+              if (meta.filetype == 'media') {
+                callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
+              }
+            },*/
+      /*images_upload_handler: (blobInfo, success, failure) => {
+              const img = 'data:image/jpeg;base64,' + blobInfo.base64();
+              //console.log(img);
+              success(img);
+            },*/
           //menubar: true,
           autosave_ask_before_unload: true,
           plugins: [
@@ -54,11 +55,10 @@
           toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor code codesample | ltr rtl',
         }
         "
-        />
-
-        <!-- For extra content-->
-        <slot></slot>
-      </q-form>
+    />
+    <!-- For extra content-->
+    <slot></slot>
+  </q-form>
 </template>
 
 <script>
@@ -67,6 +67,7 @@ import useVuelidate from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 //import UploadAdapter from './UploadAdapter';
 import Editor from '../Editor'
+import {useRouter} from "vue-router";
 
 export default {
   name: 'DocumentsForm',
@@ -132,8 +133,28 @@ export default {
   },
   methods: {
     browser (callback, value, meta) {
+      let url = '/resources/document/4/manager?cid=1&sid=0&gid=0';
+      if (meta.filetype === 'image') {
+        url = url + "&type=images";
+      } else {
+        url = url + "&type=files";
+      }
+
+      console.log(url);
+
+      window.addEventListener('message', function (event) {
+        var data = event.data;
+        if (data.url) {
+          url = data.url;
+          console.log(meta); // {filetype: "image", fieldname: "src"}
+          callback(url);
+
+        }
+      });
+
+
       tinymce.activeEditor.windowManager.openUrl({
-        url: '/',// use an absolute path!
+        url: url,// use an absolute path!
         title: 'file manager',
         /*width: 900,
         height: 450,

assets/vue/router/documents.js

@@ -10,6 +10,14 @@ export default {
       path: '',
       component: () => import('../views/documents/List.vue')
     },
+    {
+      name: 'DocumentManager',
+      path: 'manager',
+      component: () => import('../views/documents/DocumentManager.vue'),
+      meta: {
+        layout: 'Empty'
+      }
+    },
     {
       name: 'DocumentsCreate',
       path: 'new',

assets/vue/router/index.js

@@ -42,7 +42,6 @@ const router = createRouter({
                     path: '/courses', name: 'MyCourses', component: MyCourseList,
                     meta: {requiresAuth: true},
                 },
-
                 {
                     path: '/sessions', name: 'MySessions', component: MySessionList,
                     meta: {requiresAuth: true},