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 demo!</h1>
<p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tinymce/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /></p>
<p> </p>
<ul>
<li>Our <a href="//www.tinymce/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/forum/">Community Forum</a>.</li>
<li>We also offer enterprise grade support as part of <a href="https://tinymce/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编码的富文本内容再转成原来的正常的富文本内容即可。
小伙伴们如果有其他的方法,欢迎前来讨论分享
更多推荐
vue 使用tinymce富文本编辑器,以及前后端富文本内容存储&展示处理方法推荐
发布评论