chamilo-lms/assets/vue/components/ctoolintro/Form.vue

<template>
  <q-form>
    <TinyEditor
      id="introText"
      v-model="item.introText"
      :init="{
        skin_url: '/build/libs/tinymce/skins/ui/oxide',
        content_css: '/build/libs/tinymce/skins/content/default/content.css',
        branding: false,
        relative_urls: false,
        height: 500,
        toolbar_mode: 'sliding',
        file_picker_callback: browser,
        autosave_ask_before_unload: true,
        plugins: [
          'fullpage advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste wordcount emoticons ' +
            extraPlugins,
        ],
        toolbar:
          'undo redo | bold italic underline strikethrough | insertfile image media template link | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | code codesample | ltr rtl | ' +
          extraPlugins,
      }"
      required
    />
    <!-- For extra content-->
    <slot></slot>
  </q-form>
</template>

<script>
import useVuelidate from "@vuelidate/core";
import { ref } from "vue";
import { usePlatformConfig } from "../../store/platformConfig";
import {useRoute} from "vue-router";
export default {
  name: "ToolIntroForm",
  props: {
    values: {
      type: Object,
      required: true,
    },
    errors: {
      type: Object,
      default: () => {},
    },
    initialValues: {
      type: Object,
      default: () => {},
    },
  },
  setup() {
    const extraPlugins = ref("");

    const platformConfigStore = usePlatformConfig();

    if ("true" === platformConfigStore.getSetting("editor.translate_html")) {
      extraPlugins.value = "translatehtml";
    }

    const route = useRoute();
    const parentResourceNodeId = ref(route.query.parentResourceNodeId);

    return { v$: useVuelidate(), extraPlugins, parentResourceNodeId};
  },
  data() {
    return {
      introText: null,
      parentResourceNodeId: null,
      resourceNode: null,
    };
  },
  computed: {
    item() {
      return this.initialValues || this.values;
    },
    violations() {
      return this.errors || {};
    },
  },
  methods: {
    browser(callback, value, meta) {
      let nodeId = this.parentResourceNodeId;
      let folderParams = this.$route.query;
      let url = this.$router.resolve({
        name: "DocumentForHtmlEditor",
        params: { node: nodeId },
        query: folderParams,
      });
      url = url.fullPath;
      console.log(url);

      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: url, // use an absolute path!
          title: "file manager",
          /*width: 900,
                  height: 450,
                  resizable: 'yes'*/
        },
        {
          oninsert: function (file, fm) {
            var url, reg, info;

            // URL normalization
            url = fm.convAbsUrl(file.url);

            // Make file info
            info = file.name + " (" + fm.formatSize(file.size) + ")";

            // Provide file and text for the link dialog
            if (meta.filetype === "file") {
              callback(url, { text: info, title: info });
            }

            // Provide image and alt text for the image dialog
            if (meta.filetype === "image") {
              callback(url, { alt: info });
            }

            // Provide alternative source and posted for the media dialog
            if (meta.filetype === "media") {
              callback(url);
            }
          },
        }
      );
      return false;
    },
  },
  validations: {
    item: {
      introText: {
        //required,
      },
      parentResourceNodeId: {},
      resourceNode: {},
    },
  },
};
</script>