<template>
  <div class="richtext">
    <froala :id="spareId" :tag="'textarea'" :config="froalaConfig" v-model:value="modelText"></froala>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from "vue";
const props = defineProps({
  spareId: {
    type: String,
    required: true,
  },
  isText: {
    type: String,
    required: true,
    default: "",
  },
});

const modelText = defineModel();

let frolaEditorContentChange = ref(false); //富文本内容是否改变
let lastFocusPosition = ref(null); //最后焦点位置
let imgUploadFlag = ref(true); //图片是否上传完成
const froalaConfig = ref({
  key: "BWC6D-16D3B2F3C2H1A6A7wdwgacxuB-33c1fB2twtfG3A7A6B6A3B3B2G3D2H2==",
  toolbarButtons: [
    "insertImage",
    "textColor",
    "bold",
    "italic",
    "underline",
    "strikeThrough",
    "fontFamily",
    "fontSize",
    "color",
    "paragraphStyle",
    "lineHeight",
    "paragraphFormat",
    "align",
    "insertHR",
    "undo",
    "redo",
  ],
  height: 400,
  fontSize: ["12", "14", "16", "18", "20", "24", "28", "32", "36", "40"],
  fontSizeDefaultSelection: "16",
  theme: "dark", //主题
  language: "zh_cn", //国际化
  imageUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
  videoUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
  fileUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
  imageDefaultWidth: false,
  quickInsertButtons: ["image", "table", "ul", "ol", "hr"], //快速插入项
  toolbarVisibleWithoutSelection: true, //是否开启 不选中模式
  toolbarSticky: false, //操作栏是否自动吸顶
  saveInterval: 0,
  charCounterCount: false,
  reportloadding: false,
  lastsavetime: "",
  isAddEnter: false, //是否已经添加过
  timer: null,
  ischange: false,
  isPublishloading: false,
  events: {
    // 内容变化事件
    contentChanged: function () {
      frolaEditorContentChange.value = true;
      getSelection().rangeCount && (lastFocusPosition.value = getSelection().getRangeAt(0));
    },
    keyup: function (e, editor) {
      nextTick(() => {
        getSelection().rangeCount && (lastFocusPosition.value = getSelection().getRangeAt(0));
      });
    },
    click: function (e, editor) {
      nextTick(() => {
        getSelection().rangeCount && (lastFocusPosition.value = getSelection().getRangeAt(0));
      });
    },
    "image.beforePasteUpload": function () {
      imgUploadFlag.value = false;
    },
    "image.beforeUpload": function () {
      imgUploadFlag.value = false;
    },
    "image.inserted": function () {
      imgUploadFlag.value = true;
    },
    "image.error": function () {
      imgUploadFlag.value = true;
    },
  },
});

watch(
  () => props.isText,
  (newVal) => {
    if (newVal) {
      froalaConfig.value.placeholderText = newVal;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style lang="scss">
.richtext {
  width: 100%;
  .fr-placeholder {
    margin-top: 41px !important;
  }
  .fr-second-toolbar {
    display: none;
  }
}
</style>
