使用tinymce富文本

1.tinymce入门参考 https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/

2.tinymce安装选项 https://www.tiny.cloud/docs/general-configuration-guide/advanced-install/

3.tinymce汉化包下载 https://www.tiny.cloud/get-tiny/language-packages/

4.tinymce-vue版本参考 https://github.com/tinymce/tinymce-vue

开始进入正题

 引入vue版本(npm命令：npm install @tinymce/tinymce-vue)

import Editor from '@tinymce/tinymce-vue'

 

汉化包：

 

html：

<!-- tinymce富文本 在5.0版本api-key是必要的，不然会弹出提示 -->
<editor v-model="inforContent" api-key='xxxxxxxxxx' :init="editorInit"></editor>

 

js(vue)：

 1 　　components:{　　//引入富文本组件
 2         editor: Editor
 3     },
 4     data(){
 5         return {
11             inforContent: '',   //通知内容
13             token: '',  //上传至七牛云token
14             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文档

 

 

转载于:https://www.cnblogs.com/jay-sans/p/10792226.html