<template>
  <div>
    <textarea id="sample">初始化内容</textarea>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, onMounted } from "vue";
const { proxy } = getCurrentInstance();

import "suneditor/dist/css/suneditor.min.css";
import suneditor from "suneditor";

// How to import plugins
import plugins from "suneditor/src/plugins";

// How to import language files (default: en)
import lang from "suneditor/src/lang";

const init = () => {
  nextTick(() => {
    const editorImageSample = suneditor.create("sample", {
      //语言
      lang: lang.zh_cn,
      //高度
      height: 500,
      //引入所有插件
      plugins: plugins,
      //按钮
      buttonList: [
        ["undo", "redo"],
        ["font", "fontSize", "formatBlock"],
        ["paragraphStyle", "blockquote"],
        ["bold", "underline", "italic", "strike", "subscript", "superscript"],
        ["fontColor", "hiliteColor", "textStyle"],
        ["removeFormat"],
        ["outdent", "indent"],
        ["align", "horizontalRule", "list", "lineHeight"],
        ["table", "link", "image", "video", "audio" /** ,'math' */], // You must add the 'katex' library at options to use the 'math' plugin.
        /** ['imageGallery'] */ // You must add the "imageGalleryUrl".
        ["fullScreen", "showBlocks", "codeView"],
        ["preview", "print"],
        ["save", "template"],
        /** ['dir', 'dir_ltr', 'dir_rtl'] */ // "dir": Toggle text direction, "dir_ltr": Right to Left, "dir_rtl": Left to Right
      ],
    });
    //自定义图片上传
    editorImageSample.onImageUploadBefore = async (
      files,
      info,
      core,
      uploadHandler
    ) => {
      //TODO 这里就可以调用axios上传就可以了，比如我封装的这个request
      let result = await proxy.Request({
        url: "file/uploadImage",
        params: {
          file: files[0],
        },
      });
      if (!result) {
        return;
      }
      const response = {
        result: [
          {
            url: result.data.url,
            name: files[0].name,
            size: files[0].size,
          },
        ],
      };
    };
  });
};

onMounted(() => {
  init();
});
</script>

<style scoped>
#sample {
  width: 100%;
}
</style>