@wfrog/vc/es/components/tinymce/index.mjs

`自用` 的基于 `element-plus` 二次封装的 `vue3` 组件库。追求在业务场景中，尽可能使用更少的代码量来实现需求。 因此在组件封装上，以 `方便` 为主，打包仅 `esm` 模式。

import './index.css'
// vue-script:D:\project\_my\vc\src\components\tinymce\index.vue?type=script
import { useCssVars as _useCssVars, defineComponent as _defineComponent } from "vue";
import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, unref as _unref, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue";
import { defaultWindow, loader } from "@wfrog/utils";
import { vLoading } from "element-plus";

// src/components/tinymce/config.ts
var mini = {
  toolbar: "bold | alignleft aligncenter alignright alignjustify | bullist numlist | forecolor | fullscreen",
  menubar: false,
  plugins: "lists fullscreen"
};
var simple = {
  toolbar: "undo redo | formatselect | bold | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | forecolor backcolor | removeformat | link image table | uploadImage | preview | fullscreen",
  menubar: false,
  plugins: "lists fullscreen link image preview table imagetools"
};
var standard = {
  toolbar: "formatselect | bold | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | forecolor backcolor | removeformat | link image | preview",
  menubar: true,
  plugins: "lists link image preview table imagetools fullscreen"
};
var full = {
  toolbar: "formatselect | code | bold italic strikethrough forecolor backcolor permanentpen formatpainter | link image media pageembed | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent | removeformat | addcomment",
  menubar: true,
  plugins: "code print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern help",
  image_advtab: true,
  image_caption: true
};
var config_default = {
  mini,
  simple,
  standard,
  full
};

// vue-script:D:\project\_my\vc\src\components\tinymce\index.vue?type=script
var _hoisted_1 = ["id"];
var tinymce_default = /* @__PURE__ */ _defineComponent({
  __name: "index",
  props: {
    id: { type: String, default: () => `h-tinymce-${+new Date()}${(Math.random() * 1e3).toFixed(0)}` },
    config: { type: String, default: "mini" },
    width: { type: String, default: "100%" },
    height: { type: String, default: "360px" },
    modelValue: { type: String, default: "" },
    httpRequest: { type: Function, default: void 0 }
  },
  emits: ["update:modelValue"],
  setup(__props, { expose, emit: emits }) {
    const props = __props;
    _useCssVars((_ctx) => ({
      "25f7749a-height": __props.height
    }));
    const Tinymce = shallowRef();
    const loading = ref(false);
    const tinymceInit = async () => {
      if (!defaultWindow) {
        return;
      }
      if (!Tinymce.value) {
        loading.value = true;
        Tinymce.value = await loader.loadCdnSingle("tinymce");
      }
      const cdnName = defaultWindow.h_utils.cdn.name;
      const cdnUrl = loader.baseCdnUrl[cdnName];
      const version = "5.8.1";
      let base_url = "";
      let language_url = "";
      switch (cdnName) {
        case "defaultBase":
          base_url = `${cdnUrl}/tinymce/${version}`;
          language_url = `${cdnUrl}/tinymce-langs/1.0.0/langs/zh_CN.js`;
          break;
        case "jsdelivr":
          base_url = `${cdnUrl}/tinymce@${version}`;
          language_url = `${cdnUrl}/tinymce-langs@1.0.0/langs/zh_CN.js`;
          break;
        case "localCDN":
          base_url = `${cdnUrl}/tinymce/${version}`;
          language_url = `${cdnUrl}/tinymce-langs/1.0.0/langs/zh_CN.js`;
          break;
      }
      Tinymce.value.init({
        ...config_default[props.config],
        selector: `#${props.id}`,
        language: "zh_CN",
        language_url,
        height: props.height,
        width: props.width,
        base_url,
        content_css: false,
        image_uploadtab: true,
        images_upload_handler: props.httpRequest,
        init_instance_callback: (editor) => {
          if (props.modelValue) {
            editor.setContent(props.modelValue);
          }
          editor.on("NodeChange Change KeyUp SetContent", () => {
            emits("update:modelValue", editor.getContent());
          });
          loading.value = false;
        }
      });
    };
    const tinymceDestory = () => {
      if (!Tinymce.value) {
        return;
      }
      const tinymce = Tinymce.value.get(props.id);
      tinymce.execCommand("mceFullScreen");
      tinymce && tinymce.destroy();
    };
    const tinymceConfig = computed(() => props.config);
    watch(tinymceConfig, () => {
      tinymceDestory();
      tinymceInit();
    });
    onMounted(async () => {
      tinymceInit();
    });
    onBeforeUnmount(() => tinymceDestory());
    const setContent = (val) => {
      if (!Tinymce.value) {
        return;
      }
      const tinymce = Tinymce.value.get(props.id);
      tinymce.setContent(val);
    };
    const getContent = () => {
      if (!Tinymce.value) {
        return;
      }
      const tinymce = Tinymce.value.get(props.id);
      tinymce.getContent();
    };
    expose({ setContent, getContent });
    return (_ctx, _cache) => {
      return _withDirectives((_openBlock(), _createElementBlock("div", {
        class: _normalizeClass(_ctx.$style.tinymce)
      }, [
        _createElementVNode("textarea", {
          id: __props.id,
          class: _normalizeClass(_ctx.$style.textarea)
        }, null, 10, _hoisted_1)
      ], 2)), [
        [_unref(vLoading), loading.value]
      ]);
    };
  }
});

// vue-style:D:\project\_my\vc\src\components\tinymce\index.vue?type=style&index=0&isModule=true&isNameImport=true
var tinymce_default2 = { tinymce: "_tinymce_aa7a3_1", textarea: "_textarea_aa7a3_6" };

// src/components/tinymce/index.vue
var cssModules = {};
tinymce_default.__cssModules = cssModules = {};
cssModules["$style"] = tinymce_default2;
var tinymce_default3 = tinymce_default;
export {
  tinymce_default3 as default
};