sd-new-vue/src/components/Editor/TinymceEditor.vue

<template>
  <div class="content_1111">
    <Editor api-key="nfaxt3iz0ciqr1yg7zxzifvksvval28yl46wr1n0847mt0d3" :init="init" v-model="content" :disabled="disabled" ref="tinymce" />
  </div>
</template>

<script setup>
import Editor from "@tinymce/tinymce-vue";
import { getToken } from "/src/utils/auth";

import { watch } from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  plugins: {
    type: [String, Array],
    default: "lists link image table code help wordcount",
  }, //必填
  toolbar: {
    type: [String, Array],
    default:
      "font | fontsize | format | bold italic underline forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | image | removeformat",
  }, //必填
});
const emit = defineEmits(["updateValue"]);
const content = ref(props.value);
const toolbar = ref(props.toolbar);
const plugins = ref(props.plugins);
const disabled = ref(props.disabled);
const tinymce = ref(null);
const init = reactive({
  plugins: plugins,
  toolbar: toolbar,
  content_css: "tinymce-5", //主题tinymce-5-dark || tinymce-5 || default || writer || document || dark
  custom_undo_redo_levels: 50, //回退数量
  end_container_on_empty_block: true, //块级文本是否换行
  keep_styles: true, //回车是否保存原有样式，例如code块回车是否截断
  menubar: false, //是否开启顶部菜单 > false 关闭菜单 |  'edit insert view format table tools help' 菜单按照这里排序 | 参考:https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/
  toolbar_mode: "wrap", //功能栏是否换行 > | wrap 换行  | scrolling 滚动 | sliding 省略
  toolbar_location: "top", //菜单栏位置 > bottom 底部 | top 顶部
  style_formats_merge: true, //是否开启默认功能
  elementpath: false, //是否展示编辑层级  > p span
  resize: true, //调整宽高 > true 调整高 | false 不可调整宽高 | both 宽高可调
  language: "zh_CN", //中文
  paste_data_images: true, //是否打开黏贴图片功能
  font_formats:
    "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings", //字体
  fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt", // 第二步
  convert_fonts_to_spans: true,
  font_size_style_values: "8pt,10pt,12pt,14pt,18pt,24pt,36pt",
  images_upload_url: import.meta.env.VITE_APP_BASE_API,
  images_upload_handler: (blobInfo, progress) =>
    new Promise((resolve, reject) => {
      if (blobInfo.blob().size / 1024 / 1024 > 5) {
        reject({ message: "上传失败，图片大小请控制在 5M 以内", remove: true });
        return;
      } else {
        const file = blobInfo.blob();
        proxy.post("/fileInfo/getSing", { fileName: blobInfo.filename() }).then((res) => {
          const otherData = res.uploadBody;
          const formData = new FormData();
          for (const key in otherData) {
            formData.append(key, otherData[key]);
          }
          formData.append("file", file);
          proxy.post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", formData).then((data) => {
            if (res && typeof res.fileUrl == "string" && res.fileUrl) {
              resolve(res.fileUrl);
            }
          });
        });
      }
    }),
  images_upload_base_path: "/demo",
});

const changeHtml = (val) => {
  content.value = val;
};

onMounted(() => {});

defineExpose({
  changeHtml,
});

watch(
  () => content.value,
  (val) => {
    emit("updateValue", val);
  }
);
</script>

<style lang="scss" scope>
// .mce-content-body {
//   .mce-item-table:not([border]),
//   .mce-item-table:not([border]) caption,
//   .mce-item-table:not([border]) td,
//   .mce-item-table:not([border]) th,
//   .mce-item-table[border="0"],
//   .mce-item-table[border="0"] caption,
//   .mce-item-table[border="0"] td,
//   .mce-item-table[border="0"] th,
//   table[style*="border-width: 0px"],
//   table[style*="border-width: 0px"] caption,
//   table[style*="border-width: 0px"] td,
//   table[style*="border-width: 0px"] th {
//     border: none !important;
//   }
// }
</style>