vue3 如何使用 vue3-tinymce

前言

在vue3项目中，发现了这个开箱即用的vue3-tinymce，比之前vue2使用的 tinymce、@tinymce/tinymce-vue 少了繁琐的配置。

代码

1、npm 下载 vue3-tinymce

npm install vue3-tinymce -S
1

2、 创建个RichText.vue组件进行封装

<template>
  <div>
    <vue3-tinymce v-model="myValue" :setting="setting" />
  </div>
</template>

<script lang="ts" setup>
// 引入组件
import Vue3Tinymce from '@jsdawn/vue3-tinymce';
import { reactive, toRefs, watch } from 'vue';

const props = defineProps({
  value: {
    type: String,
    default: () => {
      return '';
    },
  },
});

const emits = defineEmits({
  input: null,
});

const { getters } = useStore();

const { myValue, setting } = toRefs(
  reactive({
    myValue: props.value,
    // editor 配置项
    setting: {
      height: 400, // editor 高度
      language_url: '/tinymce/langs/zh_CN.js',
      language: 'zh_CN',

      plugins:
        'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help  autosave autoresize',
      toolbar:
        ' fontselect fontsizeselect | forecolor backcolor bold italic underline strikethrough link | image media alignleft aligncenter alignright alignjustify  | \
         code undo redo restoredraft | cut copy paste pastetext  anchor | \
         outdent indent | styleselect formatselect  |  bullist numlist | \
         blockquote subscript superscript removeformat | table  charmap hr pagebreak insertdatetime print preview | fullscreen ',

      branding: false,
      paste_data_images: true, // 设置为“true”将允许粘贴图像，而将其设置为“false”将不允许粘贴图
      // plugin_preview_width: 375, // 预览宽度 plugin_preview_height: 668,
      content_style: `img {max-width:100%;height:auto}`,

      images_upload_handler: (blobInfo: any, success: any, failure: any) => {
        const img = 'data:image/jpeg;base64,' + blobInfo.base64();
        console.log('img', img);
        if (blobInfo.blob().size > 1000000) {
        	failure("单张图片大小不能超过1000k");
        	return;
        } else {
			success(img);
		}
      },
      ...
    },
  })
);

watch(
  () => props.value,
  (newValue) => {
    myValue.value = newValue;
  }
);

watch(
  () => myValue.value,
  (newValue) => {
    emits('input', newValue);
  }
);

</script>
<style lang="scss" scoped>
// 在使用过程中发现以上的setting下的height不生效，可以在这里深度的修改样式。
:deep(.tox-tinymce) {
  min-height: 400px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

3、在父组件进行调用

<template>
	<RichText :value="richValue" @input="input" />
</template>
<script lang="ts" setup>
import { ref } from "vue";
const richValue = ref('我是初始化的数据...');

const input = (emit)=>{
	richValue.value = emit;
}
</script>


1
2
3
4
5
6
7
8
9
10
11
12
13

中文参考文档：http://tinymce.qscoding.com/