前言
在vue3项目中,发现了这个开箱即用的vue3-tinymce ,比之前vue2使用的 tinymce 、@tinymce/tinymce-vue 少了繁琐的配置。
代码
1、npm 下载 vue3-tinymce
npm install vue3-tinymce -S
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,
setting: {
height: 400,
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,
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>
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>
中文参考文档:http://tinymce.qscoding.com/
|