大家好，欢迎来到IT知识分享网。
效果图：
![vue 富文本存储_Vue<富文本编辑器>[通俗易懂]](https://yundeesoft.com/wp-content/uploads/2022/11/2022112316405970.jpg "vue 富文本存储_Vue<富文本编辑器>[通俗易懂]插图1")
image.png
此处介绍一个好用的 Tinymce 富文本编辑器，也是 vue-element-admin
后台管理项目中所用到的。(都有现成的了，不妨拿来用)
image.png
image.png
文件下载：
此处给大家看一下使用到的文件目录
image.png
上面就是封装好的富文本组件，你也可以 点击这里去下载 相应的文件目录，不过还是建议全部下载下来，把对应的组件拿出来用比较好。(还有很多别的组件也很好用呢，也可以偷来用 😄)
image.png
图片上传：
外部图片插入：这里提一下图片插入这块，每次插入的时候，你需要备注图片的在线地址，输入完之后，就会插入到编辑器中。
image.png
本地图片插入：如果想插入本地图片，你需要点击右上角的上传，然后配合自己后端的接口，上传本地图片到服务端，并生成一个在线图片地址，以便插入到编辑器中，这样你最终传给后端的就是一个 的图片标签了。
image.png
下面文件标注的地方就是，上传图片的组件模块，这里面你可以根据自身需求进行调整
image.png
使用代码：
预览效果：
import Tinymce from “@/components/Tinymce”;
export default {
components: { Tinymce },
data() {
return {
content: “”
};
}
};
.Tinymce_box {
display: flex;
}
.editor-content {
margin-left: 30px;
flex-grow: 1;
border: 2px dashed #f1f1f1;
padding:0 20px;
}
h3 {
color: #808080;
}
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/25073.html
