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代码




效果图
vue 使用tinymce富文本编辑器,以及前后端富文本内容存储&展示处理方法推荐_第1张图片

因为配置了上传图片的,所以当点击插入图片后就会多一个上传图片的按钮,如下图
vue 使用tinymce富文本编辑器,以及前后端富文本内容存储&展示处理方法推荐_第2张图片

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

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

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

你可能感兴趣的:(Vue,Html/CSS/JS)