Tinymce

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

富文本组件使用的是 CDN 方式引入。可以自行更改 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

属性类型默认值说明
optionsany{}tinymce 的配置项
value(v-model)string-双向绑定值
heightnumber , string400高度
widthnumber , stringauto宽度
toolbarstring[]-工具栏
pluginsstring[]-插件
showImageUploadbooleantrue是否显示上传按钮

Events

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