使用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文檔