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">
    <editor
      v-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-editor
             v-model="content"
             @input="updateContent"
         ></tinymce-editor>
     </div>
 </el-tab-pane>