vue使用tinymce

---

---

tinymce富文本編輯器

提示：以下是本篇文章正文內容，下面案例可供參考

一、本文要實現

在‘商品詳情’tab頁實現富文本編輯器的使用。
前提，tab頁可以正常實現功能切換。

二、使用步驟

1.安裝tinymce

根據自己的項目安裝適合自己項目的tinymce版本。
版本有沖突安裝不上的可以請教d老師應當安裝什么版本。

npm install tinymce -S

1. 在node_modules中找到skins放入public文件夾當中
2. 下載tinymce漢化包并頁放入該文件中。漢化包下載鏈接：漢化包下載鏈接
   

2.tinymce組件新建

本文新建的tiny組件目錄如下：

文件代碼如下：

<template><div class="tinymce-editor"><editorv-model="myValue":init="init":disabled="disabled":api-key="apiKey"@onClick="onClick"@onBlur="onBlur"@onFocus="onFocus"/></div>
</template><script>
import Editor from '@tinymce/tinymce-vue'
import tinymceConfig from '@/config/tinymce'
import axios from 'axios';  export default {name: 'TinymceEditor',components: {Editor},props: {disabled: {type: Boolean,default: false},value: {type: String,default: ''}},data() {return {apiKey: '此處替換為你在tinymce中獲取的秘鑰',init: {language_url:'./tinymce/langs/zh.CN.js',language:'zh_CN',skin_url:'./tinymce/skins/ui/oxide',...tinymceConfig.defaultConfig,images_upload_handler: function (blobInfo, success, failure) {let formData = new FormData();formData.append('file', blobInfo.blob(), blobInfo.filename());// 使用 axios 或其他 HTTP 客戶端上傳圖片axios.post('/api/upload', formData).then(res => {success(res.data.url);}).catch(err => {failure('圖片上傳失敗：' + err.message);});}}}},computed: {myValue: {get() {return this.value},set(value) {this.$emit('input', value)}}},methods: {onClick(e) {this.$emit('onClick', e, this.myValue)},onBlur(e) {this.$emit('onBlur', e, this.myValue)},onFocus(e) {this.$emit('onFocus', e, this.myValue)}}
}
</script><style scoped>
.tinymce-editor {width: 100%;position: relative;z-index: 1;
}
</style> 

3. 在store添加商品詳情的狀態管理

export default {namespaced: true,  // 必須添加這行來啟用命名空間state: {content: '', // 商品詳情富文本內容}，mutations: {// 修改商品詳情富文本內容updateContent(state, content) {state.content = content}}

4. tinymce組件的引入

在你想要展示富文本編輯器的地方引入該組件，下面是一個引入的例子

import TinymceEditor from '@/components/common/tinymce-editor.vue'export default {name: "createGoods",components: { TinymceEditor },}

在頁面中調用

 <el-tab-pane label="商品詳情"><div class="p-3"><tinymce-editorv-model="content"@input="updateContent"></tinymce-editor></div></el-tab-pane>