Tinymce

富文本组件位于 src/components/TinyMce

富文本组件使用的是 CDN 方式引入

可在 /@/components/TinyMce/src/Editor.vue 更改下面 CDN 地址

const CDN_URL = 'https://cdn.bootcdn.net/ajax/libs/tinymce/5.5.1';

Usage

<template>
  <Tinymce v-model="value" @change="handleChange" width="100%" />
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { Tinymce } from '/@/components/Tinymce/index';

  export default defineComponent({
    components: { Tinymce },
    setup() {
      const value = ref('hello world!');
      function handleChange(value: string) {
        console.log(value);
      }
      return { handleChange, value };
    },
  });
</script>

Props

属性	类型	默认值	说明
options	any		tinymce 的配置项
value(v-model)	string	-	双向绑定值
height	number , string	400	高度
width	number , string	auto	宽度
toolbar	string[]	-	工具栏
plugins	string[]	-	插件
showImageUpload	boolean	true	是否显示上传按钮

Events

事件	回调参数	返回值	说明
change	(str:string)=>{}		富文本内容改变触发事件