vue 使用tinymce富文本编辑器，以及前后端富文本内容存储&展示处理方法推荐

1、安装相关插件

npm install tinymce

1、为什么安装这个？因为@tinymce/tinymce-vue是收费版本，需要key才能使用，所以我们需要使用 tinymce 封装一个来自己使用。
2、安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下

3、tinymce 默认是英文界面，所以还需要下载一个中文语言包（国内可能需要翻墙）

4、然后将这个语言包放到 static 目录下，为了结构清晰，给一个目录结构图

2、vue代码

<template>
  <div class='app-container'>
    <h1>tinymce 富文本编辑器</h1>
    <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
    <div v-html='tinymceHtml'></div>
    <el-row>
        <el-col :span="20"></el-col>
        <el-col :span="4"><el-button type="primary" @click="to_data">确定</el-button></el-col>
    </el-row>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import axios from 'axios'
import store from '@/store'
export default {
  name: 'tinymce',
  data () {
    return {
      headers: {'Authorization': 'bearer ' + store.getters.token},
      tinymceHtml: `<h1 style="text-align: center;">Welcome to the &nbsp;demo!</h1>
<p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /></p>
<p>&nbsp;</p>
<ul>
<li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
<li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li>
<li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
</ul>`,
      init: {
        language_url: '/static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/lightgray',
        height: 300,
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        branding: false,
        paste_word_valid_elements: '*[*]',        // word需要它
        paste_data_images: true,                  // 粘贴的同时能把内容里的图片自动上传，非常强力的功能
        paste_convert_word_fake_lists: false,     // 插入word文档需要该属性
		// 配置图片上传的功能
        images_upload_handler:(blobInfo, success, failure) => {
          this.handleImgUpload(blobInfo, success, failure)
        }
      }
    }
  },
  mounted () {
    tinymce.init({})
  },
  methods: {
      to_data() {
          console.log(this.tinymceHtml)
          let Base64 = {
            encode(str) {
                return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
                    function toSolidBytes(match, p1) {
                        return String.fromCharCode('0x' + p1)
                    }))
            },
            decode(str) {
                return decodeURIComponent(atob(str).split('').map(function (c) {
                    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
                }).join(''))
            }
        };
		// 将富文本内容专程base64编码，这个用于上传到服务存储到数据库中
        let encoded = Base64.encode(this.tinymceHtml)
		// 将富文本的base64编码 转换成原来的格式，这个用于将数据库中的富文本展示在界面上
        let decoded = Base64.decode(encoded)
        console.log(encoded)
        console.log(decoded)
      },
	  // 用于上传图片的，后端需要提供好上传接口
      handleImgUpload (blobInfo, success, failure) {
        let formdata = new FormData()
        formdata.set('upload_file', blobInfo.blob())
        let new_headers = { headers: this.headers}
		let upload_url = process.env.BASE_API + '/website/uploadfile'
        axios.post(upload_url, formdata, new_headers).then(res => {
          // console.log(res.data.data)
          success(res.data.data[0])
        }).catch(res => {
          failure('error')
        })
      }
  },
  components: {Editor}
}
</script>

效果图

因为配置了上传图片的，所以当点击插入图片后就会多一个上传图片的按钮，如下图

3、浅析 前后端富文本内容存储&展示处理方法

看过代码就知道，本文采用的是将富文本内容转换成base64编码，然后传给后端保存到数据库。
当需要展示时，就将服务器请求到的base64编码的富文本内容再转成原来的正常的富文本内容即可。

小伙伴们如果有其他的方法，欢迎前来讨论分享