iking-tinymce v1.0.2

Vue 3 + TypeScript + Vite

金合信息科技

金合富文本组件

export const defaultProps = {
   // 数据回显
  value: {
    type: String,
    default: () => {
      return "";
    },
  },
  // 文件地址
  baseUrl: {
    type: String,
    default: "",
  },
  // 是否可编辑
  disabled: {
    type: Boolean,
    default: false,
  },
  // 插件
  plugins: {
    type: [String, Array],
    default: "lists  table code kityformula-editor  fullscreen image ",
  }, //必填
  // 工具栏
  toolbar: {
    type: [String, Array],
    default:
      "codesample bold italic underline alignleft aligncenter alignright alignjustify | undo redo | formatselect | fontselect | fontsizeselect | forecolor backcolor | bullist numlist outdent indent | lists link table code | image kityformula-editor  | removeformat fullscreen",
  },
  // 文件上传的方法
  fn: {
    type: Function,
    default: null,
  },
  // 文件大小
   size:{
    type:Number,
    default:2
  }
}

数据处理请参考以下方法

<template>
   <IkingTinymce
    @getContent="getValue"
    :value="state.value"
    :loadUrl="state.loadUrl"
    :baseUrl="state.baseUrl"
  />
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { IkingTinymce } from "iking-tinymce";
const state = reactive({
  value:"",
  loadUrl:"",
  baseUrl:""
});
const getValue = (str: any) => {
  state.value = str
};
</script>