vue项目中使用tinymce富文本编辑器

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>