今天遇到了一个需求需要仿wx 公众号的富文本 其中一个功能就是需要粘粘上传
话不多说 直接上代码
第一步:引入 paste 插件
import 'tinymce/plugins/paste'
第二步:配置上传方法
tinymce.init({
paste_data_images: true,
images_upload_handler: (blobInfo, success, failure, progress) => {
const file = blobInfo.blob()
upload(`${this.baseUrl}/uploadImageUrl`, file)
.then((res) => {
if (res.status == '200') {
const file = 图片地址
success(file)
return
} else {
failure('上传失败')
}
})
.catch((e) => {
failure('上传出错')
})
}
})
第三步:在plugins中加入paste
到这里就可以粘粘图片上传啦!
后续遇到问题:
使用paste 复制字体样式被过滤问题
处理方法:添加paste 配置
tinymce.init({
paste_webkit_styles:
'color font-size font-family font-weight font-style',
paste_retain_style_properties:
'color font-size font-family font-weight font-style',
valid_elements: '*[*]',
extended_valid_elements: 'span[style],div[style],font[style|color]',
})