使⽤tinymce富⽂本
开始进⼊正题
引⼊vue版本(npm命令：npm install @tinymce/tinymce-vue)
import Editor from '@tinymce/tinymce-vue'
汉化包：
html：
js(vue)：
1 components:{ //引⼊富⽂本组件 2 editor: Editor 3 },
4 data(){ 5 return {
11 inforContent: '', //通知内容13 token: '', //上传⾄七⽜云token14 editorInit: { //富⽂本初始化
15 language_url: '/static/tinymce/zh_CN.js', //引⼊汉化包16 language: 'zh_CN', //使⽤中⽂17 height: 300,
18 plugins: 'code image paste link', //插件19 // hidden_input: false,
20 branding: false, //隐藏tinymce右下⾓⽔印
21 // contextmenu: \"link image imagetools table spellchecker\22
23 // inline: true,
24 // menubar: 'file edit view',
25 // menu: { //菜单栏添加⾃定义栏 plugins应加上code选项26 // view: {title: 'Happy', items: 'code'}27 // },
28 // toolbar: 'bold italic | link image | alignleft aligncenter alignright', //⼆级菜单栏29 images_upload_handler: (blobInfo, success, failure) => { //上传图⽚回调函数30 this.imgUpload(blobInfo, success, failure)31 }32 },35 }36 },
methods:{
imgUpload(blobInfo, success, failure){ console.log(this.token)
let formData = new FormData()
//⼊参
formData.append('token', this.token)
formData.append('key', new Date().getTime())
formData.append('file', blobInfo.blob(), blobInfo.name())
const url = this.$store.state.configData.qiniuModule.uploadUrl fetch(url,{
method: 'POST', body: formData }).then(async data=>{
const res = await data.json() if(res.key){
const imgUrl = this.$store.state.configData.qiniuModule.prefix + res.key; success(imgUrl) //上传成功返回回调函数 }else{
failure('fail: ' + res.error) //上传失败返回回调函数及错误信息 }
}).catch( err=>{ // console.log(err) failure('fail: ' + err);
}) }, }
更多详情参考tinymce api⽂档
