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)=>{} | 富文本内容改变触发事件 | 
 Vben Admin
 Vben Admin