这里我用了tinymce,主要解决的是上传图片回调处理
效果预览:

第一步:下载tinymce资源,
把tinymce放到static目录
在index.html中引入tinymce.min.js文件
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce/tinymce.min.js></script>

第二步:新建tinymce组件
template:
<template> <div class="comp-tinymce-wrapper"> <textarea :id="tinymceId"></textarea> </div> </template>
script:
<script>
//上传图片方法
import {uploadRichImg} from '@/api/common' export default { name:'tinymce', props:{ id:{ type:String }, value:{ type:String, default:''

本文介绍了如何在Vue项目中封装Tinymce富文本编辑器,重点在于配置图片上传的回调方法。首先,将Tinymce资源放入static目录,并在HTML中引入。然后创建Tinymce组件,编写模板和脚本。在父组件中引入该组件,实现图片上传功能。
最低0.47元/天 解锁文章
3659

被折叠的 条评论
为什么被折叠?



